Drawable

1.基本的概念

1）Drawable分为两种： 一种是我们普通的图片资源，在Android Studio中我们一般放到res/mipmap目录下， 和以前的Eclipse不一样哦！另外我们如果把工程切换成Android项目模式，我们直接 往mipmap目录下丢图片即可，AS会自动分hdpi，xhdpi...！ 另一种是我们编写的XML形式的Drawable资源，我们一般把他们放到res/drawable目录 下，比如最常见的按钮点击背景切换的Selctor！

2）在xml文件中我们通过@mipmap或者@drawable设置Drawable即可。

3）在Java代码中我们可以通过Resource的getDrawable(R.mipmap.xxx)可以获得drawable资源

4） 如果是为某个控件设置背景，比如ImageView，我们可以直接调用控件.getDrawale()同样 可以获得drawable对象。

5）drawable资源名称有限制，必须是[a-z0-9_.]，且不可以以数字开头还有只能是小写。

 

2.利用资源文件的drawable类型

 

 

3.ColorDrawable

1）介绍，其就是在画布上绘制出一个单色的区域。

2）使用的方式：在java中，xml中，color.xml中，使用系统定义好的color，使用静态方法argb来设置颜色。

 

4.NiewPatchDrawable

1）介绍，其是.9图

2）注意点：

  • 1.点9图不能放在mipmap目录下，而需要放在drawable目录下！
  • 2.AS中的.9图，必须要有黑线，不然编译都不会通过、

 

5.ShapeDrawable

1）介绍：其是有形状的Drawable，我们自定义其给我们的属性值来确定形状。

2）具体属性值介绍：

  • ① <shape>:
  • ~ visible:设置是否可见
  • ~ shape:形状,可选:rectangle(矩形,包括正方形),oval(椭圆,包括圆),line(线段),ring(环形)
  • ~ innerRadiusRatio:当shape为ring才有效,表示环内半径所占半径的比率,如果设置了innerRadius, 他会被忽略
  • ~ innerRadius:当shape为ring才有效,表示环的内半径的尺寸
  • ~ thicknessRatio:当shape为ring才有效,表环厚度占半径的比率
  • ~ thickness:当shape为ring才有效,表示环的厚度,即外半径与内半径的差
  • ~ useLevel:当shape为ring才有效,表示是否允许根据level来显示环的一部分
  • ②<size>:
  • ~ width:图形形状宽度
  • ~ height:图形形状高度
  • ③<gradient>：后面GradientDrawable再讲~
  • ④<solid>
  • ~ color:背景填充色,设置solid后会覆盖gradient设置的所有效果!!!!!!
  • ⑤<stroke>
  • ~ width:边框的宽度
  • ~ color:边框的颜色
  • ~ dashWidth:边框虚线段的长度
  • ~ dashGap:边框的虚线段的间距
  • ⑥<conner>
  • ~ radius:圆角半径,适用于上下左右四个角
  • ~ topLeftRadius,topRightRadius,BottomLeftRadius,tBottomRightRadius: 依次是左上,右上,左下,右下的圆角值,按自己需要设置!
  • ⑦<padding>
  • left,top,right,bottm:依次是左上右下方向上的边距!

3）案例：http://www.runoob.com/w3cnote/android-tutorial-textview.html

 

6.GradientDrawable

1）介绍：其是一个渐变区域的Drawable，实现其效果的核心节点是 <gradient/>，有如下可选属性：

  • startColor:渐变的起始颜色
  • centerColor:渐变的中间颜色
  • endColor:渐变的结束颜色
  • type:渐变类型,可选(linear,radial,sweep), 线性渐变(可设置渐变角度),发散渐变(中间向四周发散),平铺渐变
  • centerX:渐变中间亚瑟的x坐标,取值范围为:0~1
  • centerY:渐变中间颜色的Y坐标,取值范围为:0~1
  • angle:只有linear类型的渐变才有效,表示渐变角度,必须为45的倍数哦
  • gradientRadius:只有radial和sweep类型的渐变才有效,radial必须设置,表示渐变效果的半径
  • useLevel:判断是否根据level绘制渐变效果

2）案例：

(线性渐变)gradient_linear.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <gradient
        android:angle="90"
        android:centerColor="#FFEB82"
        android:endColor="#35B2DE"
        android:startColor="#DEACAB" />

    <stroke
        android:dashGap="5dip"
        android:dashWidth="4dip"
        android:width="3dip"
        android:color="#fff" />
</shape>

(发散渐变)gradient_radial.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dip"
    android:shape="ring"
    android:thickness="70dip"
    android:useLevel="false" >

    <gradient
        android:centerColor="#FFEB82"
        android:endColor="#35B2DE"
        android:gradientRadius="70"
        android:startColor="#DEACAB"
        android:type="radial"
        android:useLevel="false" />

</shape>

(平铺渐变)gradient_sweep.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="8"
    android:shape="ring"
    android:thicknessRatio="3"
    android:useLevel="false" >

    <gradient
        android:centerColor="#FFEB82"
        android:endColor="#35B2DE"
        android:startColor="#DEACAB"
        android:type="sweep"
        android:useLevel="false" />

</shape>

调用三个drawable的activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txtShow1"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:background="@drawable/gradient_linear" />

    <TextView
        android:id="@+id/txtShow2"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/gradient_radial" />

    <TextView
        android:id="@+id/txtShow3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/gradient_sweep" />

</LinearLayout>




7.BitmapDrawable

1）介绍:其是对bitmap的一种封装，可以设置它包装的bitmap在BitmapDrawable区域中的绘制方式,有: 平铺填充,拉伸填或保持图片原始大小!以<bitmap>为根节点! 可选属性如下：
  • src:图片资源~
  • antialias:是否支持抗锯齿
  • filter:是否支持位图过滤,支持的话可以是图批判显示时比较光滑
  • dither:是否对位图进行抖动处理
  • gravity:若位图比容器小,可以设置位图在容器中的相对位置
  • tileMode:指定图片平铺填充容器的模式,设置这个的话,gravity属性会被忽略,有以下可选值: disabled(整个图案拉伸平铺),clamp(原图大小), repeat(平铺),mirror(镜像平铺)

对应的效果图：

 

2）实现：可以在xml也可以使用Java

 

8.InsetDrawable

1）介绍：表示把一个Drawable嵌入到另外一个Drawable的内部，并且在内部留一些间距。相关属性如下：

  • 1.drawable:引用的Drawable,如果为空,必须有一个Drawable类型的子节点!
  • 2.visible:设置Drawable是否额空间
  • 3.insetLeft,insetRight,insetTop,insetBottm:设置左右上下的边距

2）案例：

①XML中使用:

<?xml version="1.0" encoding="utf-8"?>  
<inset xmlns:android="http://schemas.android.com/apk/res/android"  
    android:drawable="@drawable/test1"  
    android:insetBottom="10dp"  
    android:insetLeft="10dp"  
    android:insetRight="10dp"  
    android:insetTop="10dp" />

在Java代码中使用：

InsetDrawable insetDrawable = new InsetDrawable(getResources()  
        .getDrawable(R.drawable.test1), 10, 10, 10, 10);

 

9.ClipDrawable

1）介绍：其是让一个图以剪切的形式显示。显示的怎么样，取决于你给他剪切的比例的多少，而比例取决于level值。相关属性如下：

  • clipOrietntion:设置剪切的方向,可以设置水平和竖直2个方向
  • gravity:从那个位置开始裁剪
  • drawable:引用的drawable资源,为空的话需要有一个Drawable类型的子节点 ps:这个Drawable类型的子节点:就是在<clip里>加上这样的语句: 这样...

 

2）实例：

①定义一个ClipDrawable的资源xml:

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@mipmap/ic_bg_meizi"
    android:gravity="left" />

②在activity_main主布局文件中设置一个ImageView,将src设置为clipDrawable! 记住是src哦,如果你写成了blackground的话可是会报空指针的哦!!!!

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img_show"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/clip_bg" />

</LinearLayout>

③MainActivity.java通过setLevel设置截取区域大小:

public class MainActivity extends AppCompatActivity {

    private ImageView img_show;
    private ClipDrawable cd;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0x123) {
                cd.setLevel(cd.getLevel() + 500);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        // 核心实现代码
        cd = (ClipDrawable) img_show.getDrawable();
        final Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(0x123);
                if (cd.getLevel() >= 10000) {
                    timer.cancel();
                }
            }
        }, 0, 300);
    }
}

10.RotateDrawable

1）介绍：用来对Drawable进行旋转,也是通过setLevel来控制旋转的,最大值也是:10000

相关属性如下：

  • fromDegrees:起始的角度,,对应最低的level值,默认为0
  • toDegrees:结束角度,对应最高的level值,默认360
  • pivotX:设置参照点的x坐标,取值为0~1,默认是50%,即0.5
  • pivotY:设置参照点的Y坐标,取值为0~1,默认是50%,即0.5 ps:如果出现旋转图片显示不完全的话可以修改上述两个值解决!
  • drawable:设置位图资源
  • visible:设置drawable是否可见!

 

2）实例

运行效果图：

代码实现：

在第三点的clipDrawable上做一点点修改即可!

①定义一个rotateDrawable资源文件:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@mipmap/ic_launcher"
    android:fromDegrees="-180"
    android:pivotX="50%"
    android:pivotY="50%" />

②activity_main.xml中修改下src指向上述drawable即可,MainActivity只需要把ClipDrawable 改成rotateDrawable即可!

public class MainActivity extends AppCompatActivity {

    private ImageView img_show;
    private RotateDrawable cd;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0x123) {
                if (cd.getLevel() >= 10000)
                    Toast.makeText(MainActivity.this, "转完了~",
                            Toast.LENGTH_LONG).show();
                cd.setLevel(cd.getLevel() + 400);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        // 核心实现代码
        cd = (RotateDrawable) img_show.getDrawable();
        final Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(0x123);
                if (cd.getLevel() >= 10000) {
                    timer.cancel();
                }
            }
        }, 0, 100);
    }
}


11.AnimationDrawable
1）介绍：AnimationDrawable是用来实现Android中帧动画的,就是把一系列的 Drawable，按照一定得顺序一帧帧地播放。
2）实现：

运行效果图：

代码实现：

①先定义一个AnimationDrawable的xml资源文件:

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

    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading01"
        android:duration="100" />

    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading02"
        android:duration="100" />
    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading03"
        android:duration="100" />
    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading04"
        android:duration="100" />
    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading05"
        android:duration="100" />
    <item
        android:drawable="@mipmap/ic_pull_to_refresh_loading06"
        android:duration="100" />

</animation-list>

②activity_main.xml设置下src,然后MainActivity中:

public class MainActivity extends AppCompatActivity {

    private ImageView img_show;
    private AnimationDrawable ad;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        // 核心实现代码
        ad = (AnimationDrawable) img_show.getDrawable();
        ad.start();
         
    }
} 


12.LayerDrawable
1）介绍：


13.TransitionDrawable
1）介绍：LayerDrawable的一个子类，TransitionDrawable只管理两层的Drawable！
两层！两层！ 并且提供了透明度变化的动画，可以控制一层Drawable过度到另一层Drawable的动画效果。 
根节点为<transition>，记住只有两个Item，多了也没用，属性和LayerDrawable差不多， 
我们需要调用startTransition方法才能启动两层间的切换动画； 也可以调用reverseTransition()方法反过来播放：


2）实例：

实现代码：

在res/drawable创建一个TransitionDrawable的xml文件

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@mipmap/ic_bg_meizi1"/>
    <item android:drawable="@mipmap/ic_bg_meizi2"/>
</transition>

然后布局文件里加个ImageView，然后把src设置成上面的这个drawable 然后MainActivity.java内容如下：

public class MainActivity extends AppCompatActivity {
    private ImageView img_show;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        TransitionDrawable td = (TransitionDrawable) img_show.getDrawable();
        td.startTransition(3000);
        //你可以可以反过来播放，使用reverseTransition即可~
        //td.reverseTransition(3000);
    }
}



3）扩展：

如果你想实现：多张图片循环的淡入淡出的效果 可参考：Android Drawable Resource学习（七）、TransitionDrawable中的示例 很简单，核心原理就是：handler定时修改Transition中两个图片！

 

 

14.LevelListDrawable

1）介绍：

用来管理一组Drawable的,我们可以为里面的drawable设置不同的level， 当他们绘制的时候，会根据level属性值获取对应的drawable绘制到画布上，根节点 为:<level-list>他并没有可以设置的属性，我们能做的只是设置每个<item> 的属性！

item可供设置的属性如下：

  • drawable:引用的位图资源,如果为空徐璈有一个Drawable类型的子节点
  • minlevel:level对应的最小值
  • maxlevel:level对应的最大值

2）实例:

通过shapeDrawable画圆，一式五份，改下宽高即可：

shape_cir1.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#2C96ED"/>
    <size android:height="20dp" android:width="20dp"/>
</shape>

接着到LevelListDrawable，这里我们设置五层：

level_cir.xml：

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/shape_cir1" android:maxLevel="2000"/>
    <item android:drawable="@drawable/shape_cir2" android:maxLevel="4000"/>
    <item android:drawable="@drawable/shape_cir3" android:maxLevel="6000"/>
    <item android:drawable="@drawable/shape_cir4" android:maxLevel="8000"/>
    <item android:drawable="@drawable/shape_cir5" android:maxLevel="10000"/>
</level-list>

最后MainActivity写如下代码：

public class MainActivity extends AppCompatActivity {

    private ImageView img_show;

    private LevelListDrawable ld;
    private Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            if (msg.what == 0x123) {
                if (ld.getLevel() > 10000) ld.setLevel(0);
                img_show.setImageLevel(ld.getLevel() + 2000);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        ld = (LevelListDrawable) img_show.getDrawable();
        img_show.setImageLevel(0);
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(0x123);
            }
        }, 0, 100);
    }
}


15.

StateListDrawable

好了终于迎来了最后一个drawable：StateListDrawable，这个名字看上去模式，其实我们 以前就用到了，还记得为按钮设置不同状态的drawable的<selctor>吗？没错，用到的 就是这个StateListDrawable！

可供设置的属性如下：

  • drawable:引用的Drawable位图,我们可以把他放到最前面,就表示组件的正常状态~
  • state_focused:是否获得焦点
  • state_window_focused:是否获得窗口焦点
  • state_enabled:控件是否可用
  • state_checkable:控件可否被勾选,eg:checkbox
  • state_checked:控件是否被勾选
  • state_selected:控件是否被选择,针对有滚轮的情况
  • state_pressed:控件是否被按下
  • state_active:控件是否处于活动状态,eg:slidingTab
  • state_single:控件包含多个子控件时,确定是否只显示一个子控件
  • state_first:控件包含多个子控件时,确定第一个子控件是否处于显示状态
  • state_middle:控件包含多个子控件时,确定中间一个子控件是否处于显示状态
  • state_last:控件包含多个子控件时,确定最后一个子控件是否处于显示状态

 

 

2)实例：

代码实现：

那就先通过shapeDrawable来画两个圆角矩形，只是颜色不一样而已：

shape_btn_normal.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#DD788A"/>
    <corners android:radius="5dp"/>
    <padding android:top="2dp" android:bottom="2dp"/>
</shape>

接着我们来写个selctor：selctor_btn.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/shape_btn_pressed"/>
    <item android:drawable="@drawable/shape_btn_normal"/>
</selector>

然后按钮设置android:background="@drawable/selctor_btn"就可以了~ 你可以根据自己需求改成矩形或者椭圆，圆形等！

posted @ 2017-10-12 17:29  鹏达君  阅读(248)  评论(0)  编辑  收藏  举报