Android Style development: layer-list examples _android

How do you implement the background effect of the Chart tab and the rounded rectangle with a shaded corner? Most people will make the artwork cut, using the point nine diagram to do the background. But what if only one picture is provided? For example, the middle tab background red bottom of the pixel height of 4px, then, the display on the MDPI device will be expected, on the HDPI device will be a little bit thinner, on the XHDPI device on display will be a little more fine, on the xxhdpi show when the thin, It is even thinner when it is displayed on the xxxhdpi. Because on the xxxhdpi, 1dp=4px, so, 4px of the figure, on the xxxhdpi device display, there is only 1DP left. Therefore, in order to fit the various resolutions, must provide a corresponding set of pictures. If you go to the Android res source, you'll also find that a background point like this tab, nine, also offers different sizes of point nine images based on different resolution sizes.

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

Using Layer-list, you can cascade multiple drawable together in order, like the tab in the figure above, the result of a red layer with a white cascade, and a shaded rounded rectangle superimposed on a white rounded rectangle by a gray rounded rectangle. First look at the code, the following is the tab background code:

 <?xml version= "1.0" encoding= "Utf-8"?> <selector "xmlns:android=" Schemas.android.com/apk/res/android "> <!--the first loading mode--> <!--<item android:drawable=" @drawable/bg_tab_
    Selected "Android:state_checked=" true "/>--> <!--the second way to load--> <item android:state_checked=" true "> <layer-list> <!--red background--> <item> <color android:color= "#E4007F"/> &L
    T;/item> <!--white background--> <item android:bottom= "4DP" android:drawable= "@android: Color/white"/>
        </layer-list> </item> <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> </selector> 

The following are shaded rounded rectangles:

<?xml version= "1.0" encoding= "Utf-8"?> <layer-list xmlns:android=
"Http://schemas.android.com/apk/res" /android ">
  <!--Gray Shadow-->
  <item
    android:left=" 2DP "
    android:top=" 4DP ">
    < shape>
      <solid android:color= "@android: Color/darker_gray"/> <corners android:radius=
      "10DP"/ >
    </shape>
  </item>
  <!--white foreground-->
  <item
    android:bottom= "4DP"
    android:right= "2DP" >
    <shape>
      <solid android:color= "#FFFFFF"/>
      <corners android:radius= "10DP"/>
    </shape>
  </item>
</layer-list>

As you can see from the example code above, Layer-list can be either a root node or a child of item in selector. Layer-list can add multiple item child nodes, each item child node corresponding to a drawable resource, the item from top to bottom in the order of stacking together, and then by setting the offset of each item can see the effect of shadow. The Layer-list item can set an offset from the following four properties:

1. Offset at top of Android:top
2. Offset at bottom of android:bottom
3. Offset to the left of the Android:left
4. Offset to the right of the Android:right
   

These four offsets are about the same as the control's margin setting, which is the effect of outer spacing. How to do not set the offset, the previous layer is completely blocked behind the layer, so you can not see the subsequent layer effect. For example, the above example, the tab background in the white background set Android:bottom to see a little red background. So what happens if the offset is set to a negative value? After verification, the offset of the excess will be truncated to see, do not believe you can try it yourself. Sometimes it's useful, like when I want to show a semicircle.

In addition, on the use of the item, also do the following summary:

1. The root node is not the same, you can set the properties will be different, such as selector, you can set some state properties, and in Layer-list, you can set the offset;

2. Even if the parent node is also selector, placed in the drawable directory and placed in the color directory available in the properties will also be different, such as the drawable directory available under the Android:drawable, the properties available in the Color directory for Android : color;

3.item nodes can be any type of drawable tag, in addition to the above examples of shape, color, layer-list, can also be selector, there are other not mentioned bitmap, clip, scale, inset, Transition, rotate, animated-rotate, lever-list and so on.

End

Layer-list, the example code has been updated and put on GitHub, address:

Https://github.com/keeganlee/kstyle.git

Above is the Android Layer-list style sample collation, follow-up to continue to supplement the relevant information, thank you for your support for this site!