Android Drawable图解

  1. 云栖社区>
  2. 博客>
  3. 正文

Android Drawable图解

叶应是叶 2018-03-28 20:17:00 浏览468
展开阅读全文

Drawable 分为两种,一种是普通的图片资源,另一种是 xml 形式的 Drawable 资源,这里针对第二种形式的 Drawable 资源展示其几种表现效果

一、圆角按钮

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#f42791fa" />
    <corners android:radius="20dp" />
</shape>
img_3d27d07ca6e263aa1b3669f2620d9dc0.png

二、带边框的圆角按钮

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#f42791fa" />
    <corners android:radius="20dp" />
    <stroke
        android:width="2dp"
        android:color="#ec8989" />
</shape>
img_b330c146ca82883b4c5a07564b35bbc0.png

三、单个边框的按钮

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#f42791fa" />
        </shape>
    </item>
    <item
        android:left="4dp"
        android:right="4dp">
        <shape>
            <solid android:color="#cef1bd45" />
        </shape>
    </item>
</layer-list>
img_75e0a8686e5415d28693c3b15ea92e31.png

四、渐变按钮

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="#f4f55d58"
        android:gradientRadius="45"
        android:startColor="#ee13d6fc"
        android:type="linear"/>
</shape>
img_e6a8b862e3dbe968a99ee02604bcce6a.png

五、带点击反馈的按钮

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#61aaf4" />
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#ed635c" />
        </shape>
    </item>
</selector>
img_3a982a4ee535999ec089b90169644f5f.gif

六、带点击反馈的圆角按钮

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

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#f8ec6141"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>

    <item android:state_pressed="false">
        <shape>
            <solid android:color="#50b4f2"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>

</selector>
img_dabb0a72a8778094ec96cfc2873457b4.gif

七、带阴影的按钮

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/darker_gray"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <solid android:color="#f92aa4f5"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>
</layer-list>
img_a362256afba96f25385842754135aa2e.gif

八、带虚线边框的文本

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#00ffffff" />
    <stroke
        android:width="1dp"
        android:color="#272133"
        android:dashGap="5dp"
        android:dashWidth="6dp" />
    <size android:height="1dp" />
    <corners android:radius="36dp" />
</shape>
img_bb29818ce63e005b4088d2f2d41021fe.png

九、带虚线边框和点击反馈的按钮

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

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#00ffffff" />
            <!--每条线的宽度是:dashWidth 线之间的宽度是:dashGap-->
            <stroke android:width="1dp" android:color="#272133" android:dashGap="10dp" android:dashWidth="10dp" />
            <size android:height="1dp" />
            <corners android:radius="30dp" />
        </shape>
    </item>

    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <solid android:color="#00ffffff" />
            <!--每条线的宽度是:dashWidth 线之间的宽度是:dashGap-->
            <stroke android:width="1dp" android:color="#e45d5d" android:dashGap="10dp" android:dashWidth="10dp" />
            <size android:height="1dp" />
            <corners android:radius="30dp" />
        </shape>
    </item>

</selector>
img_119ef2f17f90af61fe7820391441d665.gif

十、带点击动画的按钮

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

    <item android:state_pressed="true">
        <set>
            <objectAnimator
                android:duration="600"
                android:interpolator="@android:anim/accelerate_interpolator"
                android:propertyName="scaleX"
                android:repeatCount="1"
                android:valueFrom="1"
                android:valueTo="0.85"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="600"
                android:interpolator="@android:anim/accelerate_interpolator"
                android:propertyName="scaleY"
                android:valueFrom="1"
                android:valueTo="0.85"
                android:valueType="floatType" />
        </set>
    </item>

    <item android:state_pressed="false">
        <set>
            <objectAnimator
                android:duration="200"
                android:interpolator="@android:anim/accelerate_interpolator"
                android:propertyName="scaleX"
                android:valueFrom="1"
                android:valueTo="0.85"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="200"
                android:interpolator="@android:anim/accelerate_interpolator"
                android:propertyName="scaleY"
                android:valueFrom="1"
                android:valueTo="0.85"
                android:valueType="floatType" />
        </set>
    </item>

</selector>
img_d02836114a9751109c8d1862e0e09975.gif

十一、着色

将以下图片渲染为红色


img_46cb12fe452fae4230fbc906815ab4be.png
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/image3"
        android:tint="#f9552c"/>
img_ab1d5403360b4d98b8e2bcada354abc7.png

十二、图片渐变切换

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

将以上 drawable 设为 ImageView 的背景,再用代码控制图片渐变切换

        final ImageView imageView = findViewById(R.id.image);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TransitionDrawable drawable = (TransitionDrawable) imageView.getBackground();
                drawable.startTransition(3000);
            }
        });
img_62103b5c5c56d845bdcabd4aa2c00760.gif

十三、圆环

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

    <gradient
        android:angle="0"
        android:centerColor="#9f36f588"
        android:endColor="#4192f5"
        android:startColor="#d8f7583c"
        android:type="sweep"
        android:useLevel="false"/>
</shape>
img_462252c053cfbdf81488d676c504ef3a.png

十四、红色圆点

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

以上示例代码放在了我的一个开源库内,专门用来收集 Android 开发中的工具类,项目地址:AndroidUtils

关于 AndroidUtils 的介绍可以看这里:AndroidUtils

我的GitHub主页:leavesC

网友评论

登录后评论
0/500
评论
叶应是叶
+ 关注