Android: Selector)

Preface

When developing an application, you must modify the component style, such as buttons and input boxes. Now let's take a look at how to use Seletor to customize styles. Let's take a look at the simple effect comparison.

Summary

First, write this Selector XML file, called button_selector, and put it in the drawable folder. The approximate content is as follows:

　　

1 <? Xml version = "1.0" encoding = "UTF-8"?> 2 <selector xmlns: android = "http://schemas.android.com/apk/res/android"> 3 4 <! -- Press status --> 5 <item android: state_pressed = "true"> 6 <shape> 7 <! -- Border color --> 8 <stroke android: width = "1dip" android: color = "#728ea3"/> 9 <! -- Background color --> 10 <solid android: color = "# FFFFcc"/> 11 </shape> 12 13 </item> 14 <! -- Default status --> 15 <item> 16 <shape> 17 <! -- Border color --> 18 <stroke android: width = "1dip" android: color = "#728ea3"/> 19 <! -- Background color --> 20 <solid android: color = "# FFFFFF"/> 21 </shape> 22 </item> 23 24 </selector>

Set the background attribute for the button: @ drawable/button_selector, as shown below:

　　

<Button android: id = "@ + id/btnSelector" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: background = "@ drawable/button_selector" android: text = "Selector Demo"/>

In this way, the custom style is successfully applied to this button.

Selector

Let's take a look at the official description:

You can describe the state list in an XML file. each graphic is represented by an <item> element inside a single <selector> element. each <item> uses varous attributes to describe the state in which it shocould be used as the graphic for the drawable.

You can use an XML file to describe the status list. Under a unique selector node, item is used to describe each State. Each item uses different attributes to identify which attribute is used.

Next, let's take a look at the specific attributes of the item.

Android: drawable: references a drawable resource.

Android: state_pressed: Boolean value. If it is set to true, it indicates that when the object is pressed

Android: state_focused: Boolean value. If it is set to true, it indicates that it is used when the object obtains the focus.

Android: state_hovered: Boolean value. If it is set to true, it indicates that it is used when the object is in the hover state.

Android: state_selected: Boolean value. If it is set to true, it indicates that it is used when an object is selected.

Android: state_checkable: Boolean value. If it is set to true, it indicates that it is used when the object is allowed to be selected.

Android: state_checked: Boolean value. If it is set to true, it indicates that it is used when the object is selected.

Android: state_enabled: Boolean value. If it is set to true, it indicates that it is used when the object is available (responding to touch or click events)

Android: state_activated: Boolean value. If it is set to true, it indicates that it is used when the object is activated.

Android: state_window_focused: Boolean value. If it is set to true, it indicates that it is used to obtain the focus of the form.

Through the above attributes, You can flexibly customize the expected results. This example only shows the effect of the android: state_pressed status. The Selector code is the button_selector mentioned above. The effect is as follows:

　　

Simple Analysis

Let's take a look at the content of the press item.

　　

<! -- Press status --> <item android: state_pressed = "true"> <shape> <! -- Border color --> <stroke android: width = "1dip" android: color = "#728ea3"/> <! -- Background color --> <solid android: color = "# FFFFcc"/> </shape> </item>

The effect shown in the following figure is achieved through the shape label. This label is used to specify the style of the background. Because we focus on the usage of Selector this time, the usage of Shape is not much explained, but the labels in the Code are briefly described.

Stroke: used to set the style of the background border. You can define its width, color, and whether it is displayed as a dotted line.

Color: used to set the background color.

 

Postscript

This article briefly introduces the general usage of Selector. The specific flexible use can create a very powerful display effect.

Address: http://www.cnblogs.com/luoaz/p/3764784.html

Complete Demo: https://github.com/xiaoai-opensource/Selector