Scale assembly, can achieve circular dial effect

Making the address

Github.com/MrR0990/Sca…

Main Functions

At the beginning, I wanted to do a horizontal scale effect. Later, WHEN I realized that the vertical and circular scale (dial effect) implementation code has a lot in common, so I simply made all the effects.

  • Horizontal, vertical, circular scale effect
  • The cursor is free to set the image, size and distance from the scale
  • Customizable scale default color and progress color
  • Use scaleNodeWidth scale line width, scaleWidth (takes up the entire component size ratio) has padding to control
  • If the cursor picture is not set, the cursor will not be drawn, so as to achieve the effect of controlling the cursor display
  • Scale Text This parameter is optional
  • The circular cursor rotates in radian

rendering

Run demo to see more effects

The Attributes property

Called in the ScaleView layout file

The following properties are not used by every indicator, so use them with care!

Attributes format describe
scaleWidth float The ratio of the scale line width to component size
scaleNodeWidth float The ratio of the scale line width to the component size
scaleLineWidth float The thickness of a graduated line
scaleDirect enum Linear component orientation: Horizontal (default) or vertical
progressDirect enum No effect, gradually improve the follow-up
scaleStyle enum Component styles Linear: Line (default) Circular :circle
cursorDrawable reference The cursor image
cursorSeat enum Cursor position relative to component linear use :left,top,right,bottom circular use :inside,outside
cursorWidth dimension The cursor is drawn as a square, specifying the cursor width is equivalent to specifying the cursor size at the same time
cursorGap dimension Distance between the cursor and the scale line
scaleTextSeat enum Calibration Text for component position linear use :left,top,right,bottom Circle use :inside,outside
scaleTextColor color Scale Text Indicates the font color
scaleTextSize dimension Scale Text Indicates the font size
scaleTextGap dimension Scale Text Distance of the scale line
totalProgress integer Total scale progress
unitScale integer Graduated cell
defaultColor color The calibration line is the default color
progressColor color Scale line progress color

Use the sample

Example 1. Horizontal scale

    <com.mrr.libscaleview.ScaleView
        android:id="@+id/horizontalScaleView"
        android:layout_width="320dp"
        android:layout_height="70dp"
        android:paddingLeft="20dp"
        android:paddingTop="25dp"
        android:paddingRight="20dp"
        android:paddingBottom="20dp"
        app:cursorDrawable="@drawable/night_brightness"
        app:cursorGap="0dp"
        app:cursorSeat="bottom"
        app:cursorWidth="10dp"
        app:defaultColor="@color/dark"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:progressColor="@color/purple_200"
        app:scaleDirect="horizontal"
        app:scaleStyle="line"
        app:scaleTextColor="@color/purple_200"
        app:scaleTextGap="2dp"
        app:scaleTextSeat="top"
        app:scaleTextSize="5sp" />
Copy the code

Example 2. Vertical scale

    <com.mrr.libscaleview.ScaleView
        android:id="@+id/verticalScaleView"
        android:layout_width="70dp"
        android:layout_height="420dp"
        android:paddingLeft="20dp"
        android:paddingTop="20dp"
        android:paddingRight="25dp"
        android:paddingBottom="20dp"
        app:cursorDrawable="@drawable/night_brightness"
        app:cursorGap="0dp"
        app:cursorSeat="right"
        app:cursorWidth="10dp"
        app:defaultColor="@color/dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:progressColor="@color/purple_200"
        app:scaleDirect="vertical"
        app:scaleNodeWidth="0.7"
        app:scaleStyle="line"
        app:scaleTextColor="@color/purple_200"
        app:scaleTextGap="2dp"
        app:scaleTextSeat="left"
        app:scaleTextSize="5sp" />
Copy the code

Example 3. Circular scale

      <com.mrr.libscaleview.ScaleView
        android:id="@+id/circleScaleView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:padding="20dp"
        app:cursorDrawable="@drawable/lollipop"
        app:cursorGap="3dp"
        app:cursorSeat="inside"
        app:cursorWidth="10dp"
        app:defaultColor="@color/dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.2"
        app:progressColor="@color/purple_200"
        app:scaleNodeWidth="0.2"
        app:scaleStyle="circle"
        app:scaleTextColor="@color/purple_200"
        app:scaleTextGap="2dp"
        app:scaleTextSeat="outside"
        app:scaleTextSize="5sp"
        app:scaleWidth="0.1"
        app:totalProgress="120"
        app:unitScale="10" />
Copy the code