Android-Custom Controls

Maybe it's because I have been developing rich Web clients all the time. After I got in touch with Android, I found that its controls were terrible (I don't know if I was too radical ), what I mean is not to say that the controls are ugly. Android controls are very beautiful, which is recognized by our company. But the biggest drawback is that the control functions are very weak. A weak Radio can only put one text, but no value (key) can be stored. This is why I say it is terrible.

However, this cannot be blamed on google. After all, it has just developed. Android provides only the most basic control implementation, rather than a complete and powerful implementation. Fortunately, Android provides the implementation of custom controls. With the custom control, we can implement the functions we want on the basic control of Android. After a day of exploration, I finally realized my first custom combination control-RadioButton and RadioGroup!

Next I will show you the world of Android custom controls. If you think my article can help you, please leave some of your words. Because your messages are the source of my experience! Thank you!

1. Set custom controls: the Android-provided RadioButton can only store text, which does not meet our needs. We need a key value that can store the key-value at the same time. Therefore, we need to write a custom control that can store key-value.

Design Concept: Create a class named org. kandy. view. RadioButton, inherit from android. wedget. RadioButton, and override all construction methods of the parent class. In this way, we implement a control similar to the parent class. Add the required function: add an attribute value to store the key of RadioButton.

The Code is as follows:

 

Public class RadioButton extends android. widget. RadioButton {

Private String mValue;

Public RadioButton (Context context, AttributeSet attrs, int defStyle ){
Super (context, attrs, defStyle );
}
 
Public String getValue (){
Return this. mValue;
}

Public void setValue (String value ){
This. mValue = value;
}
Public RadioButton (Context context, AttributeSet attrs ){
Super (context, attrs );
Try {
/**
* Bind the property defined in values/attrs. xml
*/
TypedArray a = context. obtainStyledAttributes (attrs,
R. styleable. RadioButton );
This. mValue = a. getString (R. styleable. RadioButton_value );
A. recycle ();
} Catch (Exception e ){
E. printStackTrace ();
}
 
}

Public RadioButton (Context context ){
Super (context );
}

 
}

 

You can skip the red code first. First, let's look at the newly added attribute value. Because the Android customary attribute name starts with m. Therefore, the custom control is written according to this rule. However, for the setter and getter methods, m is not required. As shown in the preceding figure: property name mValue, setter: setValue (), getter: getValue (). Of course, you may not follow the Android naming conventions.

In this way, we can use this custom control. You can also set a value for it and add the text attribute of the parent class. We can add the key-value to RadioButton. Of course, the key corresponds to the value attribute of the control, and value is the text attribute of the control. Finished? No. The custom control is just getting started.

 

2. Reference custom controls in XML

Adding custom controls to XML is actually very easy. You only need to add the package name before the control name. As follows:

 

<Org. kandy. view. RadioButton android: id = "@ id/isPayDepositTrue" fsms: value = "true"
Android: layout_width = "wrap_content" android: layout_height = "wrap_content"
Android: text = "@ string/yes" android: textSize = "18sp">
</Org. kandy. view. RadioButton>
 

Similarly, you can ignore the red part and do not need to add it to the code. An error is returned when you add it.

 

3. Define attrs. xml attributes.

In our thinking, since I added a new property to the custom control, I should be able to reference it in xml and assign an initial value to it. I thought so too. However, it cannot be started. That's it. It took me one afternoon.

Positive Solution: Define attributes in res/values/attrs. xml. Obtain the attributes in the custom control and bind them with the attributes of the custom control.

If attrs. xml does not exist, create a new one. Here, only the attributes required by the custom control are stored. In my opinion, this file is an intermediary responsible for setting layout/xx. the reference to this variable in xml is bound to the attributes in the custom control.

The complete attrs. xml Code is as follows:

 

<? Xml version = "1.0" encoding = "UTF-8"?>
<Resources>
<Declare-styleable name = "RadioButton"> <! -- Control name -->
<Attr name = "value" format = "string"/> <! -- Property name, type -->
</Declare-styleable>
</Resources>
 

If there is no error in res, the id of these resources should be generated in R. In this way, we can reference them in the custom control.

 

4. Bind The control property to the XML definition.

Now we are back to writing custom controls. Let's take a look at the red font section we mentioned at the first point. This part is the code that binds the control property to the XML definition.

 

/**
* Bind the property defined in values/attrs. xml
*/
TypedArray a = context. obtainStyledAttributes (attrs,
R. styleable. RadioButton );
This. mValue = a. getString (R. styleable. RadioButton_value );
A. recycle ();
 

 

TypedArray is actually an Array that stores resources. First, we get the resource Array of the R. styleable. RadioButton attribute resource from the context. Attrs is passed in by the constructor, which corresponds to the attrs. xml file. A. getString (R. styleable. radioButton_value); the Code is to get attrs. the property defined in xml, and pass the value of this property to the mValue of the control. finally, a signal indicating the end of the binding is returned to the Resource:. recycle (); the binding ends.

 

5. assign an initial value to the control in xml.

Please refer to. After binding, you can assign values where the initial value needs to be assigned.

 

<ScrollView android: layout_width = "fill_parent"
Android: layout_height = "fill_parent" xmlns: android = "http://schemas.android.com/apk/res/android"
Xmlns: fsms = http://schemas.android.com/apk/res/org.kandy>

<Org. kandy. view. RadioButton android: id = "@ id/isPayDepositTrue" fsms: value = "true"
Android: layout_width = "wrap_content" android: layout_height = "wrap_content"
Android: text = "@ string/yes" android: textSize = "18sp">
</Org. kandy. view. RadioButton>

</ScrollView>

 

The red part first declares the namespace. The namespace is fsms. The path is callback. Then, you can use fsms: value = "true" in the xml Description of the custom control ". In this way, the initialization value assignment of the custom control is realized.

 

6. Implementation of RadioGroup and RadioButton control combinations

The preceding figure shows the implementation of custom controls. The following describes the implementation of composite controls. RadioGroup and RadioButton are the most frequently used components in a combination control. The implementation of RadioButton has been introduced above. The following describes the custom controls and function extensions of RadioGroup:

The Code is as follows:

 

Public class RadioGroup extends android. widget. RadioGroup {

Private String mValue;
 
Public RadioGroup (Context context, AttributeSet attrs ){
Super (context, attrs );
}

Public RadioGroup (Context context ){
Super (context );
}
// Set the sub-Control Value
Public void setChildValue (){
Int n = this. getChildCount ();
For (int I = 0; I <n; I ++ ){
Final RadioButton radio = (RadioButton) this. getChildAt (I );
If (radio. getValue (). equals (this. mValue )){
Radio. setChecked (true );
} Else {
Radio. setChecked (false );
}
}
}
// Obtain the subclass Value
Public void getChildValue (){
Int n = this. getChildCount ();
For (int I = 0; I <n; I ++ ){
RadioButton radio = (RadioButton) this. getChildAt (I );
If (radio. isChecked ()){
This. mValue = radio. getValue ();
}
}
}
 
Public void setValue (String value ){
This. mValue = value;
SetChildValue ();
}
 
Public String getValue (){
GetChildValue ();
Return this. mValue;
}
}

 

RadioGroup only performs two tasks: obtain the value selected by the Child control (RadioButton) and set the value to be selected by the Child control.

The method is very simple. The loop or RadioGroup sub-control checks which control is checked, and then getValue assigns this value to the extended attribute value of RadioGroup. I will not talk about it here. I believe everyone can understand it.

Author: "zhujianjia"