The custom interface style of Android development learning

A unified user interface can make the application more friendly. In order to unify the user interface, we have to use style and theme (theme). The OPhone System offers a number of system default styles and themes, but in many cases these do not meet our needs. For example, we cannot always hope that the background color is the system, and we do not want the font size to be fixed. Of course we can make changes in each space, but if you put it in style, you can make it easier to unify the user interface. If a friend is not sure what style is a theme, you can find a detailed explanation in Andoird's Dev Guide document, which describes how developers can customize their style and theme to meet the requirements of developers, making the user interface easier to implement.

In this article, we use a simple example to gradually show how to customize the style. The main use of a custom class TextView. By modifying the style set to testview, we let you know step-by-step how to customize the style.

(a) Simple customization and application style

When developers query OPhone's Dev guide documentation, they may have found that the documentation describes a simple style customization. This simple style customization can meet the needs of many users. For example, you just want to change the background color of the view, or the font size. All the items you can modify are already defined by the system, and developers can change the value of the entries to achieve different results. Example one is such a simple customization. Create a styles.xml in the values directory and define the name of the style as Widget.testview. sets 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 One

Example one shows how to customize the style, to apply the custom style to the TestView in the example, and to specify this style when the Layout/testtheme.xml file uses TestView. Finish this step and then run the sample program to see the white background effect. In Example Two,
You can see the statement style= "@style/widget.testview", which is what it does.

View Plaincopy to Clipboardprint?

<com.android.mytest.testview

style= "@style/widget.testview"

Android:layout_width= "Wrap_content"

android:layout_height= "Wrap_content"/>

Example Two

(ii) Custom style articles

If the developer wants to develop further, he may find that simply inheriting and modifying a system-defined entry does not meet his needs. For example, a developer wants to display a colored circle on a custom TestView, apparently the system-defined entry has no information about the circle. How does that come true? The simple customizations described earlier will not meet the needs of the developer.

For simplicity, let's assume that TestView needs to know the color and radius of the circle to draw a circle. Some people may disagree that we can write directly in the code of TestView, it is no problem to realize it. However, once the user modifies the code, it is possible to make an error. If we put this information into our own custom style, it would be a lot easier. If the user wants to modify the color or size, you only need to modify the information that defines the style XML file, without modifying the code.

OK, decide to add the circle information, first in Styles.xml, add Circlecolor and Circleradius two entries, and set their corresponding values, example three shows how to add these two entries. Is that the way it is? If you compile now , you will definitely get the error message that the two entries do not exist. Why is it? Let's think about it, the system doesn't define these two entries, we just use the two entries, we don't define them, and of course we don't know what the two entries are.

If you want to let the system know that there are two entries, we will first define them. Create a Attrs.xml file under the values directory. Then add the radius and color of the circle.
In Attrs.xml, you can define many types of entries (item), such as Integer, float, color, reference, string, and so on. Only two of these are defined by color, and one is to define the radius with float. These types of information tell the OPhone resource (Resource) system How to interpret these fields,
See example four for details.

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 Three

View Plaincopy to Clipboardprint?

<resources>

<!–these is the attributes that make up customized theme. –>

<declare-styleable name= "TestView" >

<!–default TestView style. –>

<attr name= "Testviewstyle" format= "Reference"/>

<!–color to the background of the circle–>

<attr name= "Circlecolor" format= "Color"/>

<attr name= "Circleradius" format= "float"/>

</declare-styleable>

</resources>

Example Four

In the attrs.xml inside the definition is finished, in the Styles.xml also added, now you go to compile should not have what error. The question is how to get TestView to know this information. These two items are defined by ourselves, so we have to add some code to let TestView know about it. The following example five shows how to find the total value of the two entries we added from the 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 Five

Once the TestView gets the color and radius information for the circle, you can use this information to draw the circle the developer wants. See the attachment code for how to draw this colored circle, not what we want to describe here.

(iii) Set default style

In the first part, if developers want to apply your custom style to your custom TestView, developers use style= "@style/widget.testview" approach. If the developer used a testview in his application, I think it's no big deal. But if developers use a lot of testview, it's a bit of a hassle, and in case you change the style sometimes it's even worse. Here's an easy way to put your custom style into one of your own custom themes. About creating a theme that is already in the ophone documentation. The attentive reader may find that in example four, in addition to the circle information there is another entry (Testviewstyle), its role is to use here. In the development of this custom theme, set the value of this entry to our custom style (example VI), remember the style of the name: Widget.testview it? Now our custom 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 Six

Then there is the application of the custom theme to the design of the application, a simple way is to add a statement in Androidmanifest.xml android:theme= "@style/theme.oms" >. Now you can see the effect of the style you have customized. Go to compile and run it quickly.

This article first describes how to make a simple custom style, a simple customization that satisfies a subset of requirements but cannot be customized in depth. For deep customization, the developer must define the entry and parse the entry. Finally, how to make the user-customized style become the default style of a view.