其他分享
首页 > 其他分享> > Android Drawablw

Android Drawablw

作者：互联网

Android 几个常用Drawable的基本用法

引言

在大作业项目开发中，我想要实现一个类似下图的Botton背景转态变化，
通过查找资料得知要使用StateListDrawable的资源文件，
所以在这里总结一下StateListDrawable的基本用法，
并对其他几个常用drawable的进行简单介绍。

在这里插入图片描述

在讲StateListDrawable之前我们要先搞清楚什么是Drawable资源

Drawable资源

Drawable是Android应用中使用最广泛的资源，也是Android应用中最灵活的资源；
通俗点说就是我们在开发Android中需要用到的图片、背景、颜色、状态等等的资源文件
主要分为两种:
1.直接使用已有现成的图片资源，我们将这些放在AS的res/mipmap目录下
2.自己用XML编写的Drawable资源，我们将这种形式的Drawable放在res/drawable目录下，如下图所示，它Drawable有多个子类，用来实现不同的功能。

基本使用方法
1.在XML使用@drawable或者@mipmap来设置Drawable资源
2.在Java代码中则通过Resources提供的getDrawable（int id）的方法来获得Drawable资源

在这里插入图片描述

了解完Drawable，下面具体谈谈StateListDrawable的使用

StateListDrawable使用

基本描述：

StateListDrawable的作用就是使所显示的Drawable对象能够随着目标组件状态的改变而自动切换。

要定义StateListDrawable对象时，我们会使用<selector…/>标签作为根元素，在其中包含<item…/>用来表示状态属性

##简单示例
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed=["true"|"false"] 			android:drawable="@drawable/botton_pressed"/>
    <item android:drawable="@drawable/botton_normal"/>
</selector>
可支持的状态属性：
state_focused:						是否处于已得到获得焦点状态
state_window_focused:				窗口是否处于已得到焦点状态
state_enabled:						是否处于可用状态
state_checkable:					是否处于可勾选状态
state_checked:						是否处于以勾选状态
state_selected:						是否处于已被选中状态
state_pressed:						是否处于已被按下状态
state_active:						是否处于激活状态,
state_first:						是否处于开始状态
state_middle:					    是否处于中间状态
state_last:							是否处于结束状态
代码示例

我们就根据最开始的示例图，做一个按钮的背景状态切换

首先我们先做两个不同颜色的圆形背景图

1.在drawable目录下创建一个shape_btn_pressed.xml文件,写入下面的代码

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ccf"/>
    <corners android:radius="5dp"/>
    <padding android:top="2dp" android:bottom="2dp"/>

</shape>

2.再创建一个shape_btn_none.xml的文件，复制上面的代码，将颜色更改为另一种颜色，好显示两种颜色状态。

3.在drawable目录下创建一个selector_btn.xml文件，写入下面的代码，设置按钮被按下时的drawable属性，即可看到按钮的状态变化。

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false" android:drawable="@drawable/shape_btn_pressed"/>

    <item android:state_pressed="true" android:drawable="@drawable/shape_btn_none"/>


</selector>
效果展示

在这里插入图片描述

讲完StateListDrawable，我们再来看一看ClipDrawable

ClipDrawable 资源

ClipDrawable就是从位图上剪下一个部分的图片片段，在XML文件中的根节点为

先看一下ClipDrawable的三个属性

ClipDrawable 对象可以调用setLevel（int level）方法来设置截取的区域大小 ，level可取0-10000之间，level为0，图片为空；level为10000时，图片全部截取。因此我们可以通过改变level值得方式，实现我们常见的进度条的效果。

代码示例

step1：先绘制一个进度条的图形资源progress_bar.xml,设置为一个矩形，添加圆角弧度

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:width="500dp"
        android:height="25dp" />
    <solid android:color="#00ff00" />
    <corners android:radius="20dp" />
</shape>

step2：在drawable目录下新建一个clip标签的文件，设置gravity为left，使进度条从左至右加载

<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@drawable/progress_bar"
    android:gravity="left">

</clip>

step3：在布局文件中添加一个ImageView，同时要在src属性中设置我们step2中的文件，

一定要在src中，如果是blackground的话会报空指针的！

<ImageView
        android:layout_margin="10dp"
        android:background="#e6e6e6"
 
        android:id="@+id/iv_image_clip_left"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"     
        android:src="@drawable/clip_left_01"/>

step4：在java文件中动态设置level的值，达到进度条变化的效果

public class MainActivity extends AppCompatActivity {

    private ImageView mClipLeftImageView;


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

        mClipLeftImageView = (ImageView) findViewById(R.id.iv_image_clip_left);
        mClipLeftImageView.setImageLevel(10000);

        handler.postDelayed(runnable,2000);
    }
    private int number = 0;
    private Handler handler = new Handler();
    Runnable runnable = new Runnable() {
        @Override
        public void run() {
            if (number<=10000){
                mClipLeftImageView.getDrawable().setLevel(number);
                handler.postDelayed(runnable,20);
                number+=100;
            }
        }
    };
}
效果展示

在这里插入图片描述

这样我们就实现了一个简单的进度条效果，并且如果我们想要其他效果的进度条（比如从中间向两边，垂直的，等等)都可以通过修改gravity，clipOrientation的属性得到

看完上面两个drawable的例子，一定会发现我们都有用的标签的xml文件，其实这个就是shapeDrawable 资源，最后我们就再简单介绍一下shapeDrawable 资源

shapeDrawable 资源

shapeDrawable 资源比较简单，它就是用来定义一个基本的几何图形 ，根节点为，创建方法在上面的两个例子中已经提过

android：shape=["rectangel"|"oval"|"line"|"ring"] //指定定义哪种类型的图形（矩形，椭圆，线条等）

其次它包含多个子标签定义不同属性

1

corners子标签 ：定几何图形四个角的弧度，仅适用于rectangle
	 android:radius="10dp" 圆角半径
     android:bottomLeftRadius="10dp" 左下半角的圆角半径
     android:bottomRightRadius="10dp"右下半角的圆角半径
     android:topLeftRadius="10dp"左上半角的圆角半径
     android:topRightRadius="20dp"右上半角的圆角半径

2

gradient子标签：定义使用渐变色填充

android:type 渐变的类型 分为下面三种
		linear 线性渐变，默认的渐变类型
		radial 放射渐变，设置该项时，android:gradientRadius也必须设置
		sweep 扫描性渐变
		
android:startColor 渐变开始的颜色
android:endColor 渐变结束的颜色
android:centerColor 渐变中间的颜色
android:angle 渐变的角度，线性渐变时才有效，必须是45的倍数，0表示从左到右，90表示从下到上
android:centerX 渐变中心的相对X坐标，在0.0到1.0之间，默认为0.5，表示在正中间
android:centerY 渐变中心的相对X坐标，在0.0到1.0之间，默认为0.5，表示在正中间
android:gradientRadius 渐变的半径，只有渐变类型为radial时才使用
android:userLevel 如果为true,则可在LevelListDrawable中使用

3

padding子标签：定义几何形状的内边距
android:left  左边距
android:right  右边距
android:top   上边距
android:botton  下边距

4

size子标签：定义大小

5

solid子标签：定义使用单种颜色填充
只有一个color属性

6

stroke子标签：绘制边框

android:color 描边的颜色
android:width 描边的宽度
android:dashWidth 设置虚线时的横线长度
android:dashGap 设置虚线时的横线之间的距离
代码演示

shapeDrawable比较简单，我就演示一个放射填充的效果

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:gradientRadius="120dp"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#4169E1"
        android:endColor="#00FF7F"
        android:startColor="#7FFF00"
        android:type="radial"/>

</shape>
效果截图

在这里插入图片描述

作者：郑智强

原文链接

标签：Drawablw,渐变,gravity,state,设置,Android,Drawable,android
来源： https://blog.csdn.net/fjnu_se/article/details/112230744