Android-style development: Selector

Source: Internet
Author: User

The previous article, detailing the use of shape, explains how to use shape to customize rectangles, circles, lines, and loops, and where to look. However, shape can only define a single shape, and in practice, many places, such as buttons, tabs, ListItem, and so on, have different presentation shapes in different states. For example, the background of a button, which is a shape by default, is a shape when pressed, and another shape when it is not operable. Sometimes, the change in different states is not only the background, pictures, etc., the text color will also change accordingly. And to deal with these different states to show what the problem, it is necessary to use selector to achieve.

Selector tags, you can add one or more item sub-labels, and the corresponding status is defined in the item tag. The XML file that you define can be used as two resources: drawable and color. When used as a drawable resource, typically placed in the drawable directory as shape, item must specify the android:drawable property, and when used as a color resource, it is placed in the color directory, item must specify the Android:color property.

So, let's see what states can be set up:

  • android:state_enabled: Sets whether touch or click events are available, typically set only when false to indicate an unavailable state
  • android:state_pressed: Sets whether to press the state, usually sets the property when True, indicates the pressed state, default to False
  • android:state_selected: Sets whether the state is selected, True indicates checked, false indicates unchecked
  • android:state_checked: Set check status, mainly used for checkbox and radiobutton,true indication has been checked, false means not checked
  • android:state_checkable: Set tick if available status, similar to state_enabled, just state_enabled will affect touch or click events, and state_checkable affect tick events
  • android:state_focused: Sets whether to get the focus state, true to get focus, default to False to indicate no focus
  • android:state_window_focused: Sets whether the current window receives the focus state, True indicates the focus, false indicates that there is no focus, such as pulling down the notification bar or Popup dialog box, the current interface loses focus; The ListItem of the ListView also triggers the true state when it gets focus, which can be understood as the current window is the ListItem itself
  • android:state_activated: The setting is activated, True indicates that it is active, false means inactive, API level 11 and above are supported, and the control's setactivated can be called through code ( Boolean) method to set whether the control is activated
  • android:state_hovered: Sets whether the mouse is sliding above the state, true indicates that the mouse is sliding above, the default is False,api level 14 and above to support

Next, look at the sample code, the following is the code for the Bg_btn_selector.xml, for the background of the button:

<?xml version= "1.0" encoding= "Utf-8"?><selectorXmlns:android="Http://schemas.android.com/apk/res/android"><!--the current window loses focus--<itemandroid:drawable="@drawable/bg_btn_lost_window_focused"Android:state_window_focused="False"/><!--unavailable--<itemandroid:drawable="@drawable/bg_btn_disable"Android:state_enabled="False"/><!--compressions--<itemandroid:drawable= "@drawable/bg_btn_pressed" android:state_ Pressed= "true" /> <!--selected--<item android:drawable= "@drawable/bg_btn_selected" android:state_ Selected= "true" /> <!--is activated--< Item android:drawable= "@drawable/bg_btn_activated" android: State_activated= "true" /> <!--Default-- <item android:drawable= "@drawable/bg_btn_normal" /></SELECTOR>            

The following is the Text_btn_selector.xml code, which is used for the text color of the button:

<?xml version= "1.0" encoding= "Utf-8"?><selectorXmlns:android="Http://schemas.android.com/apk/res/android"><!--the current window loses focus--<itemAndroid:color="@android: Color/black"Android:state_window_focused="False"/><!--unavailable--<itemAndroid:color="@android: Color/background_light"Android:state_enabled="False"/><!--compressions--<itemandroid:color= "@android: Color/holo_blue_light" android:state_ Pressed= "true" /> <!--selected--<item android:color= "@android: Color/holo_green_dark" android:state_ Selected= "true" /> <!--is activated--< Item android:color= "@android: Color/holo_green_light" android: State_activated= "true" /> <!--Default-- <item android:color= "@android: Color/white" /> </SELECTOR>             

Finally, it is a reference in the control:

<button     android:id="@+id/btn_default"    android:layout_width="match_parent    " android:layout_height=android:layout_margin=android:background=android:text=android: textcolor=/>         

So, in the process of use, there are a few points that need to be noted and understood:

    1. Selector as a drawable resource, the item specifies the android:drawable attribute and is placed in the drawable directory;
    2. Selector as a color resource, item specifies the Android:color attribute and is placed in the color directory;
    3. Color resources can also be placed in the drawable directory, referenced by @drawable to refer to, but it is not recommended to do so, drawable resources and color resources are best or separate;
    4. The android:drawable property can also reference @color color values in addition to referencing @drawable resources, but Android:color can only refer to @ Color;
    5. Item is matched from top to bottom, and if it matches to an item then it will take this item instead of the best match rule; so set the default state, be sure to write at the end, if written in front, then all the item will not work.

In addition, the selector tag has two more useful properties to say, after the addition of the following two properties, it will appear when the state changes fade effect, but must be at the API level 11 and above to support:

    • The fade-in time, in milliseconds, when the new state is displayed when the android:enterfadeduration state changes
    • The fade-out time, in milliseconds, when the old state disappears when the android:exitfadeduration state changes

Finally, there are two ways to set the ListItem style of the ListView, one is to set the Android:listselector property in the ListView tab, and the other is to set the ListItem layout Android:background. However, the results of these two settings are different. At the same time, there are other areas to note when using the ListView, as summarized below:

  1. android:listselector Set ListItem default background is transparent, no matter how you set in the selector can not change its background. Therefore, if you want to change the default background of ListItem, only in the second way, in the layout of listitem layouts android:backgroundset.
  2. When touch ListItem is clicked, the first setting,state_pressed,state_focused , and state_window_focused set to True will trigger , and the second setting means that only state_pressed will trigger.
  3. When a control such as a button or a checkbox is in the ListItem, the focus of the ListItem itself is preempted, causing the touch-click event of the ListItem itself to be invalid. So, to solve this problem, there are three kinds of solutions:

    • Change a button or checkbox to a control such as TextView or ImageView
    • Set the focusable property to False for control settings such as button or checkbox
    • Set ListItem root Layout properties android:descendantfocusability= "Blocksdescendants"

    The third is the most convenient and recommended way to set all child controls under the ListItem root layout to not get the focus. There are three values for the android:descendantfocusability property, where ViewGroup refers to the view that sets the property, in this case the root layout of ListItem:

    • beforedescendants: ViewGroup takes precedence over its subclass control and gets to focus
    • afterdescendants: ViewGroup gets focus only if its subclass control does not need to get focus
    • blocksdescendants: ViewGroup overrides the subclass control and gets the focus directly

End

Selector is here, and the sample code has been updated on GitHub, address:
Https://github.com/keeganlee/kstyle.git

Android-style development: Selector

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.