Android-custom interface style and android interface style

Android-custom interface style and android interface style

A unified user interface makes applications more friendly. To unify the user interface, we must use style and theme ). The OPhone system provides many default system styles and themes, but in many cases, these cannot meet our needs. For example, we don't always want the background color to be defined by the system, and we don't want the font size to be the same. Of course, we can modify it in every space, but if we put it in the style, it is easier to unify the user interface. If you do not know what style is or what theme is, you can find a detailed explanation in the Dev Guide document of Andoird, this article describes how developers can customize their own styles and themes to meet developers' requirements and make the user interface easier to implement.
In this article, we will use a simple example to demonstrate how to customize the style gradually. It mainly uses a custom class TextView. By modifying the style set to TestView, you can learn how to customize the style step by step.

(1) Simple customization and application Style
When querying the Dev Guide document of OPhone, developers may find that the document introduces a simple style customization. This simple style customization can meet the needs of many users. For example, you only want to modify the background color or font size of the View. All the items you can modify are defined by the system. developers can change the value of items to achieve different effects. Example 1 is a simple customization. Create styles. xml in the values directory, and define the style name as Widget. TestView. Set the background color to white.
View plaincopy to clipboardprint?
<Resources>
<Style name = "Widget. TestView" parent = "android: Widget">
<Item name = "android: background"> # FFFFFFFF </item>
</Style>
</Resources> <span style = "font-style: italic; font-size: 10.5pt; font-family: 'times New Roman ';"> <br> </span>

Example 1
Example 1 shows how to customize the style. To apply the customized style to TestView In the example, you also need to specify this style when using TestView in the layout/testtheme. xml file. After this step is completed, run the sample program to see the white background effect. Example 2,
You can see that the statement style = "@ style/Widget. TestView" plays this role.
View plaincopy to clipboardprint?
<Com. android. mytest. TestView
Style = "@ style/Widget. TestView"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"/>

Example 2
(2) custom style entries
If the developer wants further development, he may find that only inheriting and modifying the entries defined by the system cannot meet his or her needs. For example, if a developer wants to display a colored circle on the customized TestView, it is clear that the entries defined by the system do not have information about the circle. So how to implement it? The simple customization described earlier cannot meet developers' needs.

For simplicity, we assume that TestView needs to understand the color and radius of the circle to draw a circle. Some people may disagree that we can simply write in the TestView code, and there is no problem in implementation. However, once modified, the user must modify the code, which may cause errors. It would be much easier if we put the information in our customized style. If you want to modify the color or size, you only need to modify the information of the xml file of the definition style without modifying the code.
Now, you have decided to add the circle information. First, add the circleColor and circleRadius entries in styles. xml and set their values. Example 3 shows how to add these two entries. Is that all right? If you compile it now, you will surely get the error message that the two entries do not exist. Why? The system does not define these two entries. We only use these two entries and do not define them. Of course, we do not know what the two entries are.
To let the system know that these two entries exist, we must first define them. Create an attrs. xml file under the values directory. Then add the circle radius and color.
In attrs. xml, you can define many types of items, such as integer, float, color, reference, and string. Here, only two types are defined: color and float. These types of information tell the OPhone Resource System how to interpret these fields,
For more information, see Example 4.
View plaincopy to clipboardprint?
<Resources>
<Style name = "Widget. TestView" parent = "android: Widget">
<Item name = "android: background"> # FFFFFFFF </item>
<Item name = "circleColor"> # FFFF0000 </item>
<Item name = "circleRadius"> 60 </item>
</Style>
</Resources>
Example 3
View plaincopy to clipboardprint?
<Resources>
<! -These are the attributes that make up customized theme.->
<Declare-styleable name = "TestView">
<! -Default TestView style.->
<Attr name = "testViewStyle" format = "reference"/>
<! -Color to use for the background of the Circle->
<Attr name = "circleColor" format = "color"/>
<Attr name = "circleRadius" format = "float"/>
</Declare-styleable>
</Resources>
Example 4
The definition is completed in attrs. xml and added in styles. xml. Now there should be no errors in compiling. The problem is how to let TestView know the information. These two entries are defined by ourselves, so we have to add some code to let TestView know about the information. The following example 5 shows how to find the two items from the total resource.
View plaincopy to clipboardprint?
Public TestView (Context context, AttributeSet attrs, int defStyle ){
Super (context, attrs, defStyle );
TypedArray a =
Context. obtainStyledAttributes (
Attrs, R. styleable. TestView, defStyle, 0 );
Int n = a. getIndexCount ();
For (int I = 0; I <n; I ++ ){
Int attr = a. getIndex (I );
Switch (attr ){
Case R. styleable. TestView_circleColor:
MCircleColor = a. getColor (attr, Color. RED );
Break;
Case R. styleable. TestView_circleRadius:
MCircleRadius = a. getFloat (attr, 40f );
Break;
}
}
}
Example 5
After obtaining the color and radius of the circle, TestView can use the information to draw the circle that the developer wants. For details about how to draw this colored circle, refer to the attachment code.
(3) set the default Style
As mentioned in the first part, if a developer wants to apply the TestView customized for you, the developer uses style = "@ style/Widget. TestView. If a developer uses TestView in his application, I think this is no big deal. However, if developers use TestView in many places, this method is a little troublesome. If you want to modify this style sometimes, it will be even worse. The following is a simple method to put your customized style into a custom topic. You have created a topic in the OPhone documentation. Careful readers may find that in example 4, in addition to the Circle information, there is another entry (testViewStyle), which is used here. In the development of this custom topic, set the value of this item to our customized style (Example 6). Remember that the style name is Widget. TestView? Now the customized style is the default style for this TestView.
View plaincopy to clipboardprint?
<Resources>
<Style name = "Theme. OMS" parent = "android: Theme">
<Item name = "testViewStyle"> @ style/Widget. TestView </item>
</Style>
</Resources>

Example 6
Then, the theme customized by the application is applied to the design application. The simple way is to add the statement android: Theme = "@ style/theme. OMS"> In AndroidManifest. xml. Now you can see the effect of your customized style. Compile and run it.
This article first describes how to customize a simple style, which can meet some requirements but cannot be further customized. For in-depth customization, developers must define their own entries and parse the entries. Finally, we will introduce how to make the custom style a default style of a View.