LayerDrawale学习

        LayerDrawable内部包含了一组Drawable，系统会按照这些Drawable对象的数组顺序来绘制他们，索引越大的Drawable将会被绘制的越上面。（简单一句话， 这些Drawable将会按顺序层叠在一起）。

    LayerDrawable对象的xml文件的根元素是<layer-list>， 该元素内部包含多个<item>。item标签内部可以指定drawable、id和位置相关属性。

<layer-list>
    
<item android:drawable="xxx" android:id="xxx" android:bottom|top|left|right="xxx"/>
<item android:drawable="xxx" android:id="xxx" android:bottom|top|left|right="xxx">
...
</layer-list>

        其中id属性是为该drawable对象指定一个标识。这里的用法可以去网上找下layerDrawable运用在SeekBar。

        重点来说下位置相关的属性。bottom|top|left|right用于指定一个长度指，指定该Drawable对象绘制到目标组件的指定位置。其实我在实际使用时，发现其实质上是给Drawable对象指定padding属性，bottom、top、left、right分别指定四个方向上的padding值。

        下面通过两个小demo来演示。

<layer-list>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#0000ff" />
        </shape>
    </item>

    <item
        android:bottom="25dp"
        android:left="25dp"
        android:right="25dp"
        android:top="25dp">
        <shape android:shape="rectangle">
            <solid android:color="#00ff00" />
        </shape>
    </item>

    <item
        android:bottom="50dp"
        android:left="50dp"
        android:right="50dp"
        android:top="50dp">
        <shape android:shape="rectangle">
            <solid android:color="#ff0000" />
        </shape>
    </item>

</layer-list>

效果为：

 在实际使用时，可以只指定某几个方向（不用四个方向都指定）的值。

<item>
    <shape android:shape="rectangle">
        <solid android:color="#0000ff" />
    </shape>
</item>

<item
    android:left="25dp"
    android:top="25dp">
    <shape android:shape="rectangle">
        <solid android:color="#00ff00" />
    </shape>
</item>

<item
    android:left="50dp"
    android:top="50dp">
    <shape android:shape="rectangle">
        <solid android:color="#ff0000" />
    </shape>
</item>

我们用实际的drawable来看效果：

<item>
    <bitmap
        android:src="@drawable/ic_launcher"
        android:gravity="center"
        />
</item>
<item android:left="25dp"
    android:top="25dp">
    <bitmap
        android:src="@drawable/ic_launcher"
        android:gravity="center"
        />
</item>
<item
    android:left="50dp"
    android:top="50dp">
    <bitmap
        android:src="@drawable/ic_launcher"
        android:gravity="center"
        />
</item>

效果为

上面第二张和第三张Drawable只指定了left和top属性，所以只会在这两个方向上有偏移。

个人理解：压在最下面这张图的左上角应该是原点位置， 其他层叠在之上的Drawable的位置偏移量都是基于此原点的距离。

下面再学习一个定制输入框的demo

<item>
    <shape android:shape="rectangle">
        <solid android:color="#0ac39e" />
    </shape>
</item>

<item android:bottom="16dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff" />
    </shape>
</item>

<item
    android:bottom="6dp"
    android:left="6dp"
    android:right="6dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff" />
    </shape>
</item>

UI效果图为

实际运用到EditText中的效果为：