Android custom control -- (4) Circular progress bar and android progress bar

Android custom control -- (4) Circular progress bar and android progress bar

-------------------------------- The progress bar of a circular chart (attribute explanation is available in the source code -----------------------------------------------------

 

 

 

I. shape style: (create in drawable -- new --> Drawable resource file and change the original parent-level label selector to shape)

<?xml version="1.0" encoding="utf-8"?>

<! -- Nested shape in rotate to achieve circular rotation -->
<Rotate xmlns: android = "http://schemas.android.com/apk/res/android"
Android: fromDegrees = "0"
Android: Required Tx = "50%"
Android: Ty = "50%"
Android: toDegrees = "1080.0"
>
<Shape
Android: innerRadiusRatio = "3"
Android: shape = "ring"
Android: thicknessRatio = "9"
Android: useLevel = "false">
<Gradient
Android: startColor = "# ffffff"
Android: endColor = "# 4ec5ff"
Android: type = "sweep"/>
</Shape>
</Rotate>

Ii. style:

<Style name = "ring">
<Item name = "android: layout_width"> wrap_content </item>
<Item name = "android: layout_height"> wrap_content </item>
<Item name = "android: indeterminateDrawable"> @ drawable/buttonringstyle </item>
</Style>

3. The Button control calls the style:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.ly.blogtest.MainActivity">

<ProgressBar
 style="@style/ring"
 android:id="@+id/progressBar"
 />

</RelativeLayout>

-------------------------------- When the progress bar shows a circular progress bar, the progress bar appears -----------------------------------------------------

 

-------------------------------- Specify the shape of the shape ------------------------------

• Rectangle: rectangle, which has the default shape. It can be used to draw a rectangle with a right angle, a rectangle with a rounded corner, or an arc shape.
• Oval: oval. It is used to draw positive circles.
• Line: Linear. You can draw solid lines and dotted lines.
• Ring: ring. You can draw a ring progress bar.

-------------------------------- Specify the shape of the shape ------------------------------

 

-------------------------------- Only special properties of ring are available ----------------------------------

Note: shape has some special attributes that only apply to ring:

• Android: innerRadiusRadius of the inner ring
• Android: innerRadiusRatioFloating point type. The radius of the inner ring is expressed by the ring width ratio. The default value is 3, indicating that the inner ring radius is divided by 3. This value will be overwritten by android: innerRadius.
• Android: thicknessRing Thickness
• Android: thicknessRatioFloating point type: The Ring thickness is expressed by the ring width ratio. The default value is 9, indicating that the ring thickness is divided by 9. This value will be overwritten by android: thickness.
• Android: useLevelGenerally, this parameter is set to false. Otherwise, the Ring cannot be displayed. It is set to true only when used as LevelListDrawable.

-------------------------------- Only special properties of ring are available ----------------------------------

 

-------------------------------- The attribute label of the shape Parameter -----------------------------------------

<Shape>
<! -- Solid -->
<Solid android: color = "# ff9d77"/>
<! -- Gradient -->
<Gradient
Android: startColor = "# ff8c00"
Android: endColor = "# FFFFFF"
Android: angle = "270" type = "parmname" text = "parmname"/>
<! -- Stroke -->
<Stroke
Android: width = "2dp"
Android: color = "# dcdcdc"/>
<! -- Rounded corner -->
<Corners
Android: radius = "2dp"/>
<Padding
Android: left = "10dp"
Android: top = "10dp"
Android: right = "10dp"
Android: bottom = "10dp"/>
</Shape>

 

 

 

• Solid: Set the shape fill color. Only android: color has one attribute.

  • Android: colorFill color

• Padding: Set the inner spacing between the content and the shape boundary. You can set the distance between the left and right sides.

  • Android: leftLeft inner spacing
  • Android: rightRight inner spacing
  • Android: topUpper spacing
  • Android: bottomBottom spacing

• Gradient: Set the gradient color of the shape. It can be a linear gradient, a radiation gradient, or a scanning gradient.

  • Android: typeGradient Type
    • LinearLinear gradient, default Gradient Type
    • RadialRadiation gradient. When this item is set, android: gradientRadius must also be set.
    • SweepScanning gradient
  • Android: startColorGradient start color
  • Android: endColorGradient end color
  • Android: centerColorColor in the middle of the gradient
  • Android: angleGradient angle. It is valid only when linear gradient is used. It must be a multiple of 45. 0 indicates left to right, and 90 indicates bottom to top.
  • Android: centerXThe relative X coordinate of the gradient center is valid only when the gradient is emitted. The default value is 0.0 between 1.0 and 0.5, indicating that the gradient is in the center.
  • Android: centerYThe relative X coordinate of the gradient center is valid only when the gradient is emitted. The default value is 0.0 between 1.0 and 0.5, indicating that the gradient is in the center.
  • Android: gradientRadiusGradient radius. used only when the gradient type is radial.
  • Android: useLevelIf it is true, it can be used in LevelListDrawable.

• Corners: Set the rounded corner. It is only applicable to the rectangle type. You can set four rounded corners with different radius. When the radius of the rounded corner is large, for example, DP, it can be changed to an arc edge.

  • Android: radiusThe radius of the rounded corner is overwritten by each specific rounded corner attribute below.
  • Android: topLeftRadiusRadius in the upper left corner
  • Android: topRightRadiusRadius in the upper right corner
  • Android: bottomLeftRadiusRadius in the lower left corner
  • Android: bottomRightRadiusRadius in the lower right corner

• Stroke: Set stroke, which can be a solid line or dotted line.

  • Android: colorStroke color
  • Android: widthStroke width
  • Android: dashWidthSet the horizontal line length when the dotted line is used.
  • Android: dashGapSet the distance between the horizontal lines when the dotted line is used.

 

-------------------------------- The attribute label of the shape Parameter -----------------------------------------