Android中的Drawable（二）

最新推荐文章于 2023-07-16 10:00:00 发布

原创最新推荐文章于 2023-07-16 10:00:00 发布 · 834 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android #java #app #安卓 #javascript

文章收藏的好句子：层次越高的人，越会彼此欣赏，互相成全。

1、LayerDrawable

2、StateListDrawable

3、LevelListDrawable

1、LayerDrawable

本篇文章是基于Android中的Drawable（一）这篇文章来继续写的，LayerDrawable 对应的 xml 文件的标签是 layer-list，它是一种层次化的 Drawable 集合，通过将不同的 Drawable 放置在不同的层上面从而达到一种叠加后的效果，我们先写一个 demo，然后再对 layer-list 标签里面的属性或者子标签的属性进行说明。

（1）在 drawable 文件夹下创建一个 my_layer_list.xml 文件；

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


    <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>
        <color android:color="#FF0000"/>
    </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>

（2）Activity 的布局文件 activity_main.xml ；

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:layout_width="500px"
        android:background="@drawable/my_layer_list"
        android:layout_height="500px" />
</RelativeLayout>

运行结果如下所示；

看我们的 demo，my_layer_list.xml 文件里面有一个 layer-list 标签，layer-list 标签下面会有 item 标签，一个 item 标签其实就是一个 Drawable；layer-list 是有层次的概念，后面的 item 会覆盖前面的 item，通过使用多个 item 可以实现层层叠加的效果。

item 标签的属性也挺多的，我们列举一些我们开发中常用到的吧；

1）android:top ：相对于 View 的顶部内部偏移量。

2）android:bottom : 相对于 View 的底部内部偏移量。

3）android:left ：相对于 View 的左边内部偏移量。

4）android:right : 相对于 View 的右边内部偏移量。

5）android:drawable ：引用一个已有的 Drawable。

2、StateListDrawable

StateListDrawable 在 xml 布局文件中对应的是 selector 标签，它是表示 Drawable 集合，每个 Drawable 都对应着 View 的一种状态，系统会根据 View 的状态来选择合适的 Drawable，StateListDrawable主要用于设置可单击的View的背景。

为了更好的理解，我们先写一个 demo；

（1）在 drawable 文件夹下新建一个 my_selector.xml 文件；

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image2" android:state_pressed="true" />
    <item android:drawable="@drawable/image" />
</selector>

（2）在 Activity 的布局文件 activity_main.xml 引用 my_selector.xml 文件；

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:layout_width="match_parent"
        android:background="@drawable/my_selector"
        android:text="请点击这个按钮"
        android:onClick="onClick"
        android:layout_height="300px" />
</RelativeLayout>

（3）在名叫 MainActivity 的 Activity 上做点击事件处理；

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


    public void onClick(View v) {


    }
}

程序一开始运行的结果如下所示；

点击 “请点击这个按钮” 这个按钮后的效果图如下所示；

从上面的 demo 我们就明白了，如果我们不点击 “请点击这个按钮” 这个按钮，那么就默认选用 image 来做这个按钮的背景图片对不对？如果我们点击了这个按钮，那么就用 image2 做按钮的背景图片对不对，到这里我们也明白了 selector 标签下的子标签 item 也是一种 Drawable。

2、1） selector 标签的属性

android:constantSize ：这里表示的是 StateListDrawable的固有大小是否不随着其状态的改变而改变的，它有2个值，一个是 true，一个是 false，默认值为false；true 表示 StateListDrawable 的固有大小保持不变，这时它的固有大小是内部所有 Drawable 的固有大小的最大值，false则会随着状态的改变而改变。

android:dither ：是否开启抖动效果，在Android中的Drawable（一）这篇文章也有讲到过。

android:variablePadding ：StateListDrawable 的 padding 表示是否随着其状态的改变而改变，true 表示会随着状态的改变而改变，false 表示 StateListDrawable 的 padding 是内部所有Drawable的 padding的最大值。

2、2）selector 标签的子标签 item 的属性

android:drawable ：表示一个已有 Drawable 的资源 id。

android:state_pressed ：表示按下状态，比如 View 被按下后仍没有松开时的状态。

android:state_focused ：表示 View 已经获取了焦点。

android:state_selected ：表示选择了 View 。

android:state_checked ：选中了 View 。

android:state_enabled ： View 处于可用状态，也就是可以点击的状态。

3、LevelListDrawable

LevelListDrawable 在 xml 文件中对应的标签是 level-list，它同样表示一个 Drawable 集合，集合中的每个 Drawable 都有一个等级的概念，根据不同的等级，LevelListDrawable 会切换为对应的 Drawable。

好了，为了方便好理解，同样我也先写一个 demo 演示一下；

（1）在 drawable 文件夹下新建一个 my_level_list.xml 文件；

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 1到 5显示这个图片-->
    <item android:drawable="@drawable/img_1" android:minLevel="1" android:maxLevel="5"></item>


    <!-- 6到 10显示这个图片-->
    <item android:drawable="@drawable/img_2" android:minLevel="6" android:maxLevel="10"></item>


    <!-- 11到 15显示这个图片-->
    <item android:drawable="@drawable/img_3" android:minLevel="11" android:maxLevel="15"></item>


    <!-- 16到20显示这个图片-->
    <item android:drawable="@drawable/img_4" android:minLevel="16" android:maxLevel="20"></item>
</level-list>

（2）在 Activity 的 xml 布局文件 activity_main.xml 加上 my_level_list.xml 的引用；

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:src="@drawable/my_level_list"
        android:layout_height="500px"
        />
    <EditText
        android:id="@+id/et"
        android:layout_below="@id/iv"
        android:layout_width="match_parent"
        android:hint="请输入1-20之间的一个数字"
        android:layout_height="wrap_content" />
    <Button
        android:layout_width="match_parent"
        android:text="确认"
        android:onClick="onClick"
        android:layout_below="@id/et"
        android:layout_height="wrap_content" />
</RelativeLayout>

（3）Activity 的子类 MainActivity对 my_level_list.xml 文件进行处理；

public class MainActivity extends AppCompatActivity {
    ImageView mIv;
    EditText mEt;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mIv = findViewById(R.id.iv);
        mEt = findViewById(R.id.et);
    }


    public void onClick(View v) {
        int iLevel = 0;
        String level = mEt.getText().toString();
        LevelListDrawable levelListDrawable = (LevelListDrawable) mIv.getDrawable();
        try {
            iLevel = Integer.valueOf(level);
        } catch (Exception e) {
            iLevel = 0;
        }
        levelListDrawable.setLevel(iLevel);
    }


}

我们先不急着运行程序，我们先看 img_3 的图片长什么样子（如下所示）；

程序一开始运行的时候如下所示；

在文本框输入13，然后点击 “确认” 按钮，显示效果如下所示；

看上面的 my_level_list.xml 文件，当它的最小等级为10，最大等级为15时，我们输入13就会显示img_3 的图片；如果我们在文本框输入4，那么就会显示img_1 这张图片，因为引用img_1 的 Drawable 的最小等级是1，最大等级是5，而输入的4刚好在1-5之间。

在 my_level_list.xml 文件中，上面的语法中，每个 item 表示一个 Drawable，并且有对应的等级范围，由 android:minLevel 和 android:maxLevel 属性来指定，在最小值和最大值之间的等级会对应此 item 中的 Drawable；Drawable 的等级是有范围的，它的等级范围是 0-10000，默认值是0也是最小等级，最大等级是10000；如果将 View 作为背景时，可以通过 Drawable 的 setLevel 方法来设置不同的等级从而切换具体的 Drawable 。