Custom properties of the Android custom Control (ii) _android

Objective:
the previous article describes the basic requirements of custom controls and the rationale for rendering, and this article mainly describes how to customize some properties for custom controls. This article will continue to explain the custom round percentages in the above article. Refer to the basics of Android custom Controls (i) this article.

Demand Generation background:
Why do I introduce custom attributes? When Android offers native attributes that don't meet actual requirements, we need to customize the circle percent radius, the round background, the position of the circle, the background of the circular progress, and so on. This time we need to customize the attributes.

Custom attribute steps:
1. To add a attrs.xml file under the Res/values file, if the project is larger, will lead to Attrs.xml code is very large, at this time can be based on the corresponding function module name, easy to find, such as: Login module Related Attrs_ Login.xml

<?xml version= "1.0" encoding= "Utf-8"?>
<resources>
 <declare-styleable name= "Roundimageview ">
  <attr name=" Borderradius "/>
  <attr name=" type "/>
 </declare-styleable>

</resources>

2. How to declare a set of properties
Use the <declare-styleable name= "Percentview" ></declare-styleable> to define a collection of attributes, name is the names of the attribute set, the name must be known as the name.

 <declare-styleable name= "Percentview" >
 <!--add attributes-->
 </declare-styleable> 

Then is the definition of the property value, through the <attr name= "TextColor" format= "color"/> Way to define the value of the property, the property name also want to play in the name of the idea, format represents the value of this property type, the type has the following kinds:
Reference: Referencing resources
string: String
Color: Color
Boolean: Boolean value
Dimension: Dimension value
float: floating point type
integer: Integral type
Fraction: Percentage
enum: Enum type
flag: Bit or operation

Based on the above requirements, we can define the percent control properties

 <declare-styleable name= "Percentview" >
  <attr name= "percent_circle_gravity" ><!--the position of the circular drawing-->
   <flag name= "left" value= "0"/> <flag name= "Top
   " value= "1"/> <flag name= "
   Center" value= "2" />
   <flag name= "right" value= "3"/> <flag name=
   "Bottom" value= "4"/>
  </attr>
  <attr name= "Percent_circle_radius" format= "Dimension"/><!--round radius--> <attr name=
  "Percent_circle_ Progress "format="/><!--Current progress value--> <attr name= "Percent_progress_color"
  format= "Color"/> <!--progress Display color-->
  <attr name= "percent_background_color" format= "color"/><!--round background color-->
 </declare-styleable>

3.) How to use the layout

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
 xmlns:lee=" Http://schemas.android.com/apk/res-auto "
 android:layout_width=" Match_parent "
 android:layout_height= "match_parent"
 android:orientation= "vertical" >

 < Com.whoislcj.views.PercentView
  android:layout_width= "200DP"
  android:layout_height= "200DP"
  android: Layout_margin= "10DP"
  android:background= "@color/red"
  android:padding= "10DP"
  Lee:percent_ Background_color= "@color/gray"
  lee:percent_circle_gravity= "left"
  lee:percent_circle_progress= "30"
  lee:percent_circle_radius= "50DP"
  lee:percent_progress_color= "@color/blue"/>

</ Linearlayout>

Set a property set name for the property set, I'm here with Lee, I am because I really can't think of the attribute set name used, it is recommended to use the abbreviation of the project in the real project, for example, the micro-letter may be using WX.

4.) How to get custom properties in a custom control
After each attribute collection compiles, it corresponds to a Styleable object, obtains the TypedArray TypedArray through the Styleable object, and then obtains the property value through the key value pair, which is somewhat similar to the sharedpreference.

 TypedArray TypedArray = context.obtainstyledattributes (Attrs, r.styleable.percentview);
 if (TypedArray!= null) {
  backgroundcolor = Typedarray.getcolor (r.styleable.percentview_percent_background_color , Color.gray);
  Progresscolor = Typedarray.getcolor (R.styleable.percentview_percent_progress_color, Color.BLUE);
  Radius = typedarray.getdimension (R.styleable.percentview_percent_circle_radius, 0);
  progress = Typedarray.getint (r.styleable.percentview_percent_circle_progress, 0);
  Gravity = Typedarray.getint (r.styleable.percentview_percent_circle_gravity, CENTER);
  Typedarray.recycle ();
  }

5.) Complete Example

public class Percentview extends View {private final static String TAG = PercentView.class.getSimpleName ();
 Private Paint Mpaint;
 private int backgroundcolor = Color.gray;
 private int progresscolor = Color.Blue;
 private float radius;
 private int progress;
 private float CenterX = 0;
 private float centery = 0;
 public static final int left = 0;
 public static final int top = 1;
 public static final int CENTER = 2;
 public static final int right = 3;
 public static final int BOTTOM = 4;
 private int gravity = CENTER; Private RECTF RECTF;
  The bounds of the shape and size of the defined arc are public Percentview {super (context);
 Init ();
  Public Percentview (context, AttributeSet attrs) {Super (context, attrs);
  InitParams (context, attrs);
 Init ();
  Public Percentview (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);
  InitParams (context, attrs);
 Init ();
  private void Init () {mpaint = new Paint (); Mpaint.setantialias (true);
 RECTF = new RECTF ();
  } private void InitParams (context context, AttributeSet attrs) {mpaint = new Paint ();
  Mpaint.setantialias (TRUE);
  RECTF = new RECTF ();
  TypedArray TypedArray = context.obtainstyledattributes (Attrs, R.styleable.percentview); if (TypedArray!= null) {backgroundcolor = Typedarray.getcolor (R.styleable.percentview_percent_background_color, Colo
   R.gray);
   Progresscolor = Typedarray.getcolor (R.styleable.percentview_percent_progress_color, Color.BLUE);
   Radius = typedarray.getdimension (R.styleable.percentview_percent_circle_radius, 0);
   progress = Typedarray.getint (r.styleable.percentview_percent_circle_progress, 0);
   Gravity = Typedarray.getint (r.styleable.percentview_percent_circle_gravity, CENTER);
  Typedarray.recycle (); } @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (widthmeasuresp
  EC, HEIGHTMEASURESPEC);
  int widthmode = Measurespec.getmode (Widthmeasurespec); int WidthsizE = Measurespec.getsize (WIDTHMEASURESPEC);
  int heightmode = Measurespec.getmode (Heightmeasurespec);
  int heightsize = measurespec.getsize (Heightmeasurespec);
  LOG.E (TAG, "onmeasure--widthmode-->" + Widthmode);
   Switch (widthmode) {case measurespec.exactly://break;
   Case MeasureSpec.AT_MOST:break;
  Case MeasureSpec.UNSPECIFIED:break;
  LOG.E (TAG, "onmeasure--widthsize-->" + widthsize);
  LOG.E (TAG, "onmeasure--heightmode-->" + Heightmode);
  LOG.E (TAG, "onmeasure--heightsize-->" + heightsize);
  int with = GetWidth ();
  int height = getheight ();
  LOG.E (TAG, "onDraw---->" + with + "*" + height);
  CenterX = WITH/2;
  CenterY = WITH/2;
    Switch (Gravity) {Case Left:centerx = radius + getpaddingleft ();
   Break
    Case top:centery = radius + getpaddingtop ();
   Break
   Case Center:break;
    Case Right:centerx = With-radius-getpaddingright ();
   Break Case bottom:centery = Height-radius-getpadDingbottom ();
  Break
  float left = Centerx-radius;
  float top = Centery-radius;
  float right = CenterX + radius;
  Float Bottom = centery + radius;
 Rectf.set (left, top, right, bottom); @Override protected void OnLayout (Boolean changed, int left, int. top, int right, int bottom) {super.onlayout (Chang
  Ed, left, top, right, bottom);
 LOG.E (TAG, "onlayout");
  } @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);
  Mpaint.setcolor (BackgroundColor);
  Fill fill, STROKE stroke, fill_and_stroke fill and Stroke Mpaint.setstyle (Paint.Style.FILL_AND_STROKE);
  Canvas.drawcircle (CenterX, CenterY, radius, mpaint);

  Mpaint.setcolor (Progresscolor);
  Double percent = progress * 1.0/100;
  int angle = (int) (Percent * 360); Canvas.drawarc (RECTF, 270, Angle, true, mpaint);

 Draw Arc} According to progress

Run Result:
Two effects that are displayed according to different configurations

Summary:
A custom control can be achieved through custom properties and can be configured like a native control. But in actual project development, this custom control, as described in this article, is not used with the highest frequency, the more frequently used is the reuse of layout files by customizing a combination of controls to reduce project maintenance costs and development costs, and the next article will highlight how to customize the control mix and click View.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.