Chapter 3 UI cornerstone-UI layout (5) and ui cornerstone

Chapter 3 UI cornerstone-UI layout (5) and ui cornerstone
3.3 Use of styles and Theme 3.3.1 Use of styles

Whether it is application development or game development, most of the products we develop need to be used by more people. Therefore, in addition to functional improvement, reasonable and beautiful layout is also a problem we need to consider. The Design of Style and Theme is one of the keys to improve user experience.

Style and Theme are both used to change the Style, but they are slightly different:

1) The Style is for the form Element Level and changes the Style of the specified control or Layout.

2) Theme is for the form level and changes the form style.

They are flexible to use and can be used to add all attributes of components contained in the system.

Next, let's take a look at how they are used.

First, create the styles. xml file under the values directory, open it, and add the previous style:

<? Xml version = "1.0" encoding = "UTF-8"?> <Resources> <Style name = "TextView"> <Item name = "android: textSize"> 18sp </item> <Item name = "android: textColor"> # fff </item> <Item name = "android: shadowColor"> # FF5151 </item> <Item name = "android: shadowRadius"> 3.0 </item> </Style> <Style name = "TextView_Style2"> <Item name = "android: textSize"> 24sp </item> <Item name = "android: textColor"> # FF60AF </item> <Item name = "android: shadowColor"> # E6CAFF </item> <Item name = "android: shadowRadius"> 3.0 </item> </Style> </Resources>

 

Android: shadowColor indicates the color of the text shadow, and android: shadowRadius indicates the radius of the shadow. If it is set to 0.1, it becomes the font color. Generally, it is better to set it to 3.0.

Then, we add two text boxes to the layout file to apply these two styles to them:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout Xmlns: android = "http://schemas.android.com/apk/res/android" Android: orientation = "vertical" Android: layout_width = "match_parent" Android: layout_height = "match_parent"> <TextView Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Style = "@ style/TextView_Style1" Android: text = "I am style 1"/> <TextView Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Style = "@ style/TextView_Style2" Android: text = "I am style 2"/> </LinearLayout>

 

3-10.

Figure 3-10 Style

 

As you can see, the two text boxes apply different styles, so different effects are displayed.

3.3.2 use of Theme

After finishing the style, let's talk about Theme. Theme is similar to style. It is the same from the code perspective, but it is different in concept. Theme is applied in Application or Activity, while Style is applied in a View. Let's take an example to see how Theme is used.

First, create the themes. xml file in the values directory. (Of course, you can also add it directly in the previous styles. xml file) and then add the previous style:

<? Xml version = "1.0" encoding = "UTF-8"?> <Resources> <Style parent = "@ android: style/Theme" name = "MyTheme"> <Item name = "android: windowNoTitle"> true </item> <Item name = "android: windowBackground"> @ drawable/ball </item> </Style> </resources>

Here, we have written a Theme that inherits from the default Theme of the system. There are two attributes in it. The first attribute is to set no title, and the second attribute is to set the background image. Then, we apply this topic to the AndroidManifest. xml file:

<? Xml version = "1.0" encoding = "UTF-8"?> <Manifest xmlns: android = "http://schemas.android.com/apk/res/android" Package = "com. chapter2" Android: versionCode = "1" Android: versionName = "1.0" type = "codeph" text = "/codeph"> <Uses-sdk android: minSdkVersion = "8"/> <Application android: icon = "@ drawable/icon" android: label = "@ string/app_name" Android: theme = "@ style/MyTheme"> <Activity android: name = ". Chapter2Activity" Android: label = "@ string/app_name"> <Intent-filter> <Action android: name = "android. intent. action. MAIN"/> <Category android: name = "android. intent. category. LAUNCHER"/> </Intent-filter> </Activity> </Application> </manifest>

The running effect is shown in Figure 3-11.

Figure 3-11 theme usage

 

We can see that the theme of our application has taken effect. The title bar is set to invisible, and a background image is also set.

We can set those views with the same display effect to the same style or topic to improve our development efficiency and code readability.