Android学习之layer-list

layer-list

layer是层，list是列表，那么layer-list是层列表的意思。其实layer-list是用来创建LayerDrawablede，LayerDrawable是DrawableResource的一种，所以layer-list创建出来的是图层列表，也就是一个drawable图形

作用：

layer-list是用来创建图层列表，通过它能创建出一些特殊的drawable。
比如：

下图的AlertDialog中，我们只需要设置button的顶部边线，以及左侧button的右边线，这种时候我们无法直接使用shape，因为直接使用shape绘制出来的是四个边框，如果让美工切图也可以，但是不灵活，而且会增加App的体积。这种情况下，layer-list是最佳选择。

原理
layer-list的大致原理类似RelativeLayout（或者FrameLayout），也是一层层的叠加，后添加的会覆盖先添加的。在layer-list中可以通过控制后添加的图层距离最底部图层额上下左右的四个边距等属性，得到不同的效果

上面实例图中，AlertDialog 底部的 ok按钮 的背景就是用layer-list实现的。该layer-list 中，底层使用一个填充色为蓝色 的shape，上层使用一个填充色为白色的shape ，然后控制上层距离最底层的顶部边距为1dp , 这样在视觉上就形成了一个 具有蓝色顶部边线的白色背景。具体代码继续往下看。

例子：
因 layer-list 创建出来的也是 drawable 资源，所以，同 shape selector 一样，都是定义在 res 中的 drawable 文件夹中，也是一个 xml 文件。使用的时候，同shape selector , 布局文件中使用 @drawable/ xxx 引用, 代码中使用 R.drawable.xxx 引用。

layer-list 中不同的图层使用 item 节点来定义。

（1）单一边线：

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <shape>            <solid android:color="#02a0ef"/>        </shape>    </item>    <item android:top="1dp">        <shape>            <solid android:color="#fff"/>        </shape>    </item></layer-list> <TextView        android:layout_width="match_parent"        android:layout_height="40dp"        android:text="Hello World!"        android:background="@drawable/singleline"        android:gravity="center"        />

效果：

（2）双边线：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <shape>            <solid android:color="#02a0ef"/>        </shape>    </item>    <item android:top="1dp"        android:bottom="1dp"        >        <shape>            <solid android:color="#fff"/>        </shape>    </item></layer-list>

效果：

（3）阴影：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <!--底层的左边距离上层左边3dp, 底层的顶部，距离上层的顶部6dp -->   <item  android:left="3dp"          android:top="6dp"       >       <shape>            <solid   android:color="#b4b5b6"/>       </shape>   </item>    <item android:bottom="6dp"        android:right="3dp"        >        <shape>            <solid android:color="#fff"/>        </shape>    </item></layer-list> <TextView        android:layout_width="match_parent"        android:layout_height="70dp"        android:text="Hello World!"        android:layout_marginTop="10dp"        android:background="@drawable/yinying"        android:gravity="center"

效果：

（4）图片层叠：
图片层叠的时候，有两种效果，一种是缩放后层叠，一种是不缩放的层叠。默认是缩放效果
1.带缩放的：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <bitmap android:src="@drawable/angrybirds"/>    </item>    <item android:left="35dp"        android:top="35dp">        <bitmap android:src="@drawable/angrybirds"/>    </item>    <item android:left="70dp"        android:top="70dp"        >        <bitmap android:src="@drawable/angrybirds"/>    </item></layer-list>或者：<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <!--这种方式拿到的是带有缩放的效果，即便给item 设置了gravity 并且从模拟器上看到的效果是不缩放的，但是真机上依旧是缩放的效果-->    <item>        <bitmap android:src="@drawable/angrybirds"/>    </item>    <item android:left="35dp"        android:top="35dp">        <bitmap android:src="@drawable/angrybirds"/>    </item>    <item android:left="70dp"        android:top="70dp"        >        <bitmap android:src="@drawable/angrybirds"/>    </item></layer-list> <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/suofang2"        />

效果：

2.不带缩放的：

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <bitmap android:src="@drawable/angrybirds"            android:gravity="center"            />    </item>    <item  android:left="35dp"        android:top="35dp"        >        <bitmap android:src="@drawable/angrybirds"            android:gravity="center"            />    </item>    <item android:left="70dp"        android:top="70dp">        <bitmap android:src="@drawable/angrybirds"            android:gravity="center"            />    </item></layer-list>

效果：

注意：
A. 不缩放的时候，必须在 item 节点中使用 bitmap 节点，并给 bitmap 设置 gravity=center ;
B. 虽然在实现缩放效果的时候，可以直接使用 item 中的 drawable属性，但实现不缩放的效果时，如果还用drawable 属性，即便给item 设置了gravity =center ，在真机上的效果依旧是缩放的。（但模拟器是不缩放的）

（5）叠加旋转：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <rotate android:fromDegrees="-20"            android:pivotX="0"            android:pivotY="0">            <bitmap android:src="@drawable/kapian"/>        </rotate>    </item>    <item>        <rotate android:fromDegrees="20"            android:pivotY="0"            android:pivotX="0">            <bitmap android:src="@drawable/kapian"/>        </rotate>    </item>    <item>        <rotate            android:fromDegrees="40"            android:pivotX="0"            android:pivotY="0"            >            <bitmap android:src="@drawable/kapian"/>        </rotate>    </item></layer-list>

效果：

旋转的时候，只需要给出 起始的角度（ fromdegress ）即可。

layer-list的扩展使用

现实选择器的效果：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="true">        <layer-list>            <item>                <shape>                    <solid android:color="#f00"/>                </shape>            </item>            <item android:bottom="4dp">            <shape>                <solid android:color="#fff"/>            </shape>            </item>        </layer-list>    </item>    <item>        <layer-list>            <item>                <shape>                    <solid android:color="#f00"/>                </shape>            </item>            <item android:bottom="2dp">                <shape>                    <solid android:color="#fff"/>                </shape>            </item>        </layer-list>    </item></selector> <RadioGroup        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:id="@+id/rg"        >        <RadioButton            android:layout_width="0dp"            android:id="@+id/rg1"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/selcet"            android:checked="true"            android:gravity="center"            android:padding="10dp"            android:text="第一个"            android:button="@null"            />        <RadioButton            android:layout_width="0dp"            android:layout_height="wrap_content"            android:id="@+id/rg2"            android:layout_weight="1"            android:background="@drawable/selcet"            android:checked="true"            android:gravity="center"            android:padding="10dp"            android:text="第二个"            android:button="@null"            />        <RadioButton            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:id="@+id/rg3"            android:background="@drawable/selcet"            android:checked="true"            android:gravity="center"            android:padding="10dp"            android:text="第三个"            android:button="@null"            />    </RadioGroup>

效果:

注意：
在 RadioGroup 中，是通过 RadioButton 的 id 来控制是否选中。
所以，如果需要设置某一个 RadioButton 为默认选中，就必须给该 RadioButton 设置 id ；
如果不设置 id ，导致的结果就是该 RadioButton 会一直处于选中状态！！！