Android-style development: Layer-list

How does the tab background effect, and the shaded rounded rectangle, be implemented? Most people will let the artist cut the chart, with a point nine to do the background. But what if we only provide one picture? For example, the middle of the tab background red bottom of the pixel height of 4px, then, the display on the MDPI device will meet the expectations, on the HDPI device will be a little bit thinner, display on the XHDPI device will be more fine, the xxhdpi on the display is fine, It is thinner when displayed on the xxxhdpi. Because on the xxxhdpi, 1dp=4px, so, 4px figure, on the xxxhdpi device display, only 1DP is left. Therefore, in order to fit a variety of resolutions, we must provide a number of corresponding sets of pictures. If you go to see the Android res source, you will also find, like this tab of the background point nine graph, also according to different resolution size to provide different sizes of point nine images.

However, in this demo, do not use any actual picture resources, are used shape, selector, and this article to explain the Layer-list completed.

Using Layer-list, you can cascade multiple drawable together in order, like tab in a red layer and a white stack to display the result, and the rounded rectangle of the shadow is overlaid by a gray rounded rectangle with a white rounded rectangle. First look at the code, the following is the tab background code:

<?xml version= "1.0" encoding= "Utf-8"?><selectorXmlns:android="Http://schemas.android.com/apk/res/android"><!--first load mode--<!--<item android:drawable= "@drawable/bg_tab_selected" android:state_checked= "true"/>--><!--second load mode--<itemAndroid:state_checked="True"><layer-list><!--red background--<item><colorAndroid:color="#E4007F"/></item><!--white background--<itemandroid:bottom= "4DP" android:drawable= "@ Android:color/white "/> </layer-list> </item> Span class= "NT" ><item> <layer-list> <!--red background-- <item> <color android:color= "#E4007F "/> </item> <!--white background--< Item android:bottom= "1DP" android:drawable= "@ Android:color/white "/> </layer-list> </item>< Span class= "NT" ></SELECTOR>            

The following is a shaded rounded rectangle:

<?xml version= "1.0" encoding= "Utf-8"?><layer-listXmlns:android="Http://schemas.android.com/apk/res/android"><!--shades of gray--<itemandroid:left="2DP"android:top="4DP"><shape><solidandroid:color= "@android: Color/darker_gray" /> <corners android:radius= "10DP" /> </shape> </item> <!--white foreground--< Item android:bottom= "4DP" android:right= "2DP" Span class= "NT" >> <shape> <solid android:color=< Span class= "s" > "#FFFFFF" /> <corners android:radius= "10DP" /> </shape> </item> </LAYER-LIST>             

As you can see from the example code above, Layer-list can be either the root node or the child node of item in selector. Layer-list can add more than one item child node, each item child node corresponding to a drawable resource, in the order of item from top to bottom, and then by setting the offset of each item can see the effect of shadow and so on. The layer-list item can be offset by the following four properties:

• Offset at top of Android:top
• Offset at bottom of android:bottom
• Android:left offset to the left
• Offset to the right of the Android:right

These four offsets are almost the same as the margin settings for the control, and are the effects of the outer spacing. If you don't set an offset, the front layer completely blocks the back layer, so you don't see the layer effect behind it. For example above, the white background in the tab background is set to Android:bottom to see a little red background. So what happens if the offset is set to a negative value? After verification, the offset beyond the part will be truncated and can not see, do not believe that it is possible to try. Sometimes this is useful, like when I want to show a semicircle.

Also, for the use of item, make a summary:

1. The root node is not the same, the properties can be set will be different, such as selector, you can set some state properties, and under Layer-list, you can set the offset;
2. Even if the parent node is also selector, the properties that are available in the drawable directory and in the color directory will be different, such as the properties available in the drawable directory are android:drawable, and the properties available in the color directory are android: Color
3. The child node of item can be any type of drawable class label, except for shape, color, layer-list in the example above, or selector, as well as other bitmap, clip, scale, inset, Transition, rotate, animated-rotate, lever-list and so on.

End

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

Android-style development: Layer-list