自定义layer-list在图层布局中的使用

layer-list就是将多个图片或两种效果按照顺序层叠在一起显示,默认情况下所有item中定义的图层都会自动根据它附上View的大小而进行缩放,其中的item是按照顺序从下往上进行叠加的,即先定义的item在最下面,后面添加的item依次往上面叠放。

先上显示效果图:

自定义layer-list在图层布局中的使用_第1张图片

如上图示你们会如何实现?

第一种效果:使用文本View加分割线View来实现。
第二种效果:使用UI切图来实现。

先不说上面实现方式实现效果如何,遇到问题我们可以多找几种实现方案,选一种相对较好的方式来实现。

下面来说一下使用layer-list是如何实现这样的效果的,当然大家如果有其它好的实现方式欢迎提出。

首先来看下layer-list是如何定义的,在res/drawable包下定义layout_line.xml和layout_foul_line.xml文件。

第一种效果实现方式layout_line.xml:


<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/green" />
        shape>
    item>

    <item android:bottom="@dimen/dip1">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        shape>
    item>
layer-list>

第一种效果实现方式layout_foul_line.xml:


<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/green" />
        shape>
    item>

    <item android:bottom="@dimen/dip8">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        shape>
    item>

    <item
        android:bottom="@dimen/dip1"
        android:left="@dimen/dip1"
        android:right="@dimen/dip1">
        <shape android:shape="rectangle">
            <padding
                android:left="@dimen/dip15"
                android:right="@dimen/dip15" />
            <solid android:color="@color/white" />
        shape>
    item>
layer-list>

Shape各个子标签的作用想必大家都比较熟悉就不介绍了,这里简单介绍下Shape本身的属性,它有四个属性分别是rectangle、oval、line、ring,用来定义当前Shape的形状。

Shape的形状默认为矩形,当然也可以根据需要自定义设置为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring)。

下面的属性只有在android:shape=”ring”时可用:
android:innerRadius // 尺寸,内环的半径
android:innerRadiusRatio // 浮点型,以环的宽度比率来表示内环的半径
android:thickness // 尺寸,环的厚度
android:thicknessRatio // 浮点型,以环的宽度比率来表示环的厚度
android:useLevel // boolean值,如果当做是LevelListDrawable使用时值为true,否则为false

在布局文件中使用:

 "match_parent"
    android:layout_height="@dimen/dip45"
    android:background="@drawable/layout_line"
    android:gravity="center_vertical"
    android:paddingLeft="@dimen/dip15"
    android:paddingRight="@dimen/dip15"
    android:text="世界杯!!!"
    android:textColor="@color/red_fa"
    android:textSize="@dimen/font_small" />

"match_parent"
    android:layout_height="@dimen/dip45"
    android:layout_marginTop="@dimen/dip20"
    android:background="@drawable/layout_foul_line"
    android:text="世界杯!!!"
    android:textColor="@color/red_fa"
    android:textSize="@dimen/font_small" />

使用方式也比较简单,希望能给有需要的道友一点小小的帮助。

你可能感兴趣的:(自定义View)