Drawable detailed description of shape and selector and layer-list

In Android development,,<shape>,<selector> and <layer-list> are indispensable drawable for any control-related special effects problem. But found that some colleagues do not understand or the system remembers some common features, often do not know on the search, use up and forget ... This is a special summary of the few today.

　　<shape> --the effect shape that sets the control's own properties, which do not change due to state changes, such as round, rounded corners, border effects, and so on.

　　<selector> --As the name implies is the selector, so using selector settings are related to the effect of the State, such as when clicked, when the focus, when selected, and so on the effect of the control displayed.

　　<layer-list> --cascade for control effects. Each item can have an independent effect, such as a shape or selector, or even a layer-list in the item.

With the general concept, we hit analyze the usage formats for each drawable:

　　A,<shape> property

<?XML version= "1.0" encoding= "Utf-8"?><Shapexmlns:android= "Http://schemas.android.com/apk/res/android"Android:shape= "Rectangle">    <SolidAndroid:color= "@android: Color/holo_purple" />    <CornersAndroid:radius= "20DP" />    <GradientAndroid:centercolor= "@android: Color/holo_purple"Android:endcolor= "@android: Color/holo_blue_dark"Android:startcolor= "@android: Color/holo_blue_light" /></Shape>

<shape> the setting of the property is quite good, there is nothing special to say, as long as you follow the property set the rules to go on the line.

<shape> Common properties are as follows:

<shape> android:shape=["Rectangle" | "Oval" | "Line" | "Ring"] where rectagle rectangle, oval oval, line horizontal straight, Ring ring
<shape> Common Properties of neutron nodes:
<gradient> Set Gradients
android:startcolor Start Color
Android:endcolor End Color
android:angle Gradient angle, 0 from left to right, 90 for bottom to top, number 45 for integer, default to 0;
Android:type gradient Style liner linear gradient radial ring gradient sweep
<solid > Setting up fills
Android:color The color of the fill
<stroke > Strokes
android:width width of stroke
android:color color of strokes
android:dashwidth = width of '-' horizontal line
Android:dashgap means the distance between the '-' horizontal lines
<corners > Rounded Corners
Android:radius The radius of the fillet is larger, the more rounded the corner
Android:toprightradius Right upper corner radius
Android:bottomleftradius Corner radius of right bottom corner
Android:topleftradius left upper corner radius
Android:bottomrightradius left lower corner radius

<padding > Filling
Android:bottom= "1.0dip" bottom fill
Android:left= "1.0dip" left padding
android:right= "1.0dip" right padding
android:top= "0.0dip" above fill

Two,<selector> properties

<?XML version= "1.0" encoding= "Utf-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <Itemandroid:state_pressed= "true">        <transitionandroid:opacity= "Transparent"Android:paddingbottom= "30DP"Android:paddingleft= "10DP">            <Itemandroid:drawable= "@android:d rawable/ic_delete" />        </transition>    </Item>    <Itemandroid:state_selected= "false">        <animated-rotateandroid:drawable= "@android:d rawable/dark_header"Android:pivotx= "30%"Android:pivoty= "70%"android:visible= "true" />    </Item></selector>

As shown above, selector each item will have a status setting, if no setting is the default state. Each item contains an effect on the status of the item. For example, the above transition is a click on the background display ic_delete pictures, and do not click on the time, it is a flip animation, very interesting.

Because the item setting is more flexible, you can learn it directly in the XML of the editor by setting the side. The main thing is to focus on the various state property settings of the shape tag, which are the values that set the status of the effect.

Three,<layer-list> Properties

<?XML version= "1.0" encoding= "Utf-8"?><layer-listxmlns:android= "Http://schemas.android.com/apk/res/android">    <Item>        <Shape>            <SolidAndroid:color= "@android: Color/holo_red_light" />        </Shape>    </Item>    <ItemAndroid:bottom= "5DP"Android:left= "5DP"Android:right= "5DP"Android:top= "5DP">        <ShapeAndroid:shape= "Rectangle">            <SolidAndroid:color= "@android: Color/background_light" />        </Shape>    </Item>    <Item>        <selector>            <Itemandroid:state_pressed= "true">                <transitionandroid:opacity= "Transparent"Android:paddingbottom= "30DP"Android:paddingleft= "10DP">                    <Itemandroid:drawable= "@android:d rawable/ic_delete" />                </transition>            </Item>            <Itemandroid:state_selected= "false">                <animated-rotateandroid:drawable= "@android:d rawable/dark_header"Android:pivotx= "30%"Android:pivoty= "70%"android:visible= "true" />            </Item>        </selector>    </Item></layer-list>

Layer-list is more flexible, each item is independent, can be independently, and item can contain any of the above-mentioned effect settings! Of course also includes layer-list himself. The property of the item itself has a variety of left,gravity,width and other properties that we usually use in the layout file is a meaning, but this time the object is those drawable layer. The last note is that because of the cascading effect, the back is always covered in the front. As in the example above, if you move the Selector property to the front, the animation will be blocked.

Concluding remarks: The paper came to the end of light, I know this matter to preach ~

Drawable detailed description of shape and selector and layer-list