Chapter Three the cornerstone of UI-ui layout (5)

3.3 Styles (style) and themes (Theme) use of the 3.3.1 style (style)

Whether it is application development or game development, we have developed products, most of the time is to let more people to use. Therefore, in addition to the functional improvement, the layout of reasonable and beautiful is also a problem we need to consider. The design of style and theme is one of the keys to improving the user experience.

Style and theme are meant to change styles, but they are slightly different:

1 The style is for the form element level, changing the styles of the specified control or layout.

2 ) Theme is for the form level, change the form style.

They are very flexible to use and can add all the properties of the components in the system.

Let's take a look at how they are used, respectively.

First, we create the Styles.xml file under the values directory, and then we 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>

Where Android:shadowcolor is the color of the specified text shadow, Android:shadowradius is the radius that sets the shadow. Set to 0.1 to become the color of the font, generally set to 3.0 effect is better.

Next, we add two text boxes to the layout file, giving them each of these two styles:

<?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>

As shown in 3-10 .

Figure 3-10style the use of styles

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

Use of the 3.3.2 theme (Theme)

After saying the style, let's talk about theme. Theme is similar to style, from the point of view of the code is the same, but conceptually different. Theme is applied to the application or activity, and the style is applied to a particular view. Let's look at the use of theme as an example.

We first create the Themes.xml file under the values directory, and (of course, we can add it directly in the previous Styles.xml file) and add the previous style after opening:

<?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 write a theme theme that inherits from the system default, there are 2 properties, the first property is set untitled, and the second property is the setting of the background map. We then apply the topic in 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" > <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>

Run as shown in effect 3-11.

Figure 3-11theme Use of the theme

As you can see, the theme we applied is already in effect. The title bar is set to not be visible and the background image is also set.

We can set the view with the same effect as the same style or theme, improve the efficiency of our development and the readability of the code.

Chapter III The cornerstone of UI-ui layout (5)