Android Drawable图解

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>

二、带边框的圆角按钮

<?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>

三、单个边框的按钮

<?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>

四、渐变按钮

<?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>

五、带点击反馈的按钮

<?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>

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

<?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>

七、带阴影的按钮

<?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>

八、带虚线边框的文本

<?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>

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

<?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>

十、带点击动画的按钮

<?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>

十一、着色

将以下图片渲染为红色

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

十二、图片渐变切换

<?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);
            }
        });

十三、圆环

<?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>

十四、红色圆点

<?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>

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

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

我的GitHub主页:leavesC

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

CSS3-canvas绘制线性渐变

2635
来自专栏九彩拼盘的叨叨叨

SVG 直线路径写法示例

大写字母表示到后面值为绝对值,小写字母表示后面值为相对当前点的值 画一条起点是(10, 10)终点点是 (20, 30) 的线

744
来自专栏HTML5学堂

让元素呈现出“七十二变”的效果,就是这么简单

HTML5学堂:作为前端开发者,总会在设计图上看到各种各样奇怪的图形,想用图片解决又怕觉得很low,想用其它方法又一下子反应不过来。不管现在的你有没有面对过这样...

3175
来自专栏HTML5学堂

CSS3 -webkit-filter 滤镜

HTML5学堂:在早期网页要实现图片的色相旋转、灰色度的变化,只能用ie的滤镜来实现。直到CSS3出来之后,可以用filter来实现了,接下来详细的了解filt...

3335
来自专栏林冠宏的技术文章

高阶自定义View --- 粒子变幻、隧道散列、组合文字

跟随早前开源的 XView (https://github.com/af913337456/XView) 项目,本次在原基础上添加了 粒子变幻 自定义View。...

702
来自专栏分享达人秀

最简单最常用的LinearLayout线性布局

良好的布局设计对于UI界面至关重要,在前面也简单介绍过,目前Android中的布局主要有6种,创建的布局文件默认为RelativeLayout相对布局,...

2428
来自专栏lzj_learn_note

Android ImageSpan与TextView同一行图片居中

在开发中常常会遇到标签(图片)+文字的需求,实现方式一般采用SpannableString的方式来实现。 这时候会遇到图片ImageSpan没有办法居中的问题。...

892
来自专栏小巫技术博客

A015-布局之Linearlayout

744
来自专栏分享达人秀

如何正确使用padding和margin

前面两期我们学习了LinearLayout线性布局的方向、填充模型、权重和对齐,那么本期我们来学习LinearLayout线性布局的内边距和外边距。 ...

20610
来自专栏Android中高级开发

Android开发之漫漫长途 XVII——动画

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索...

661

扫码关注云+社区