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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

仿uc下部弹出菜单

先说说我怎么会无聊到这种地步去弄这个代码呢,在今年2月份的时候公司本来要做个这种弹出的菜单的,有5个按钮每个都有一个菜单,记得网上有仿UC菜单的源码,就下下来看...

2248
来自专栏积累沉淀

Java SWT事件

什么是事件?点击鼠标是一个事件,按下一个按钮也一个事件,关闭一个窗口也是一个事件。 什么是监听器?监听器就是监听事件什么时候发生的,用来控制事件发生的具体动...

2815
来自专栏Android干货

Android项目实战(七):Dialog主题Activity实现自定义对话框效果

2346
来自专栏小巫技术博客

A010-menu资源

本节课讲Android中的菜单(menu)资源,这个也是我们在开发中可能经常用到的资源,它可以分为以下几种类型:

962
来自专栏向治洪

listview滑动删除

今天还是给大家带来自定义控件的编写,自定义一个ListView的左右滑动删除Item的效果,这个效果之前已经实现过了,有兴趣的可以看下Android 使用Scr...

2677
来自专栏郭霖

Android自定义View的实现方法,带你一步步深入了解View(四)

不知不觉中,带你一步步深入了解View系列的文章已经写到第四篇了,回顾一下,我们一共学习了LayoutInflater的原理分析、视图的绘制流程、视图的状态及重...

3079
来自专栏Android源码框架分析

三句代码创建全屏Dialog或者DialogFragment:带你从源码角度实现全屏Dialog

Dialog是APP开发中常用的控件,同Activity类似,拥有独立的Window窗口,但是Dialog跟Activity还是有一定区别的,最明显的就是:默认...

4064
来自专栏技术小黑屋

仿腾讯新闻样式的Toast

厌倦了网易新闻无处不在的喷子,尝试了一下腾讯新闻,果然顿时清净了很多,当然这不是重点。个人感觉腾讯新闻客户端的Toast比较不错,相对于系统默认的Toast,更...

1023
来自专栏Android干货

Android项目实战(三十二):圆角对话框Dialog

3856
来自专栏非著名程序员

教你步步为营掌握自定义ViewGroup

本篇是《教你步步为营掌握自定义View》一文的姊妹篇。自定义ViewGroup的文章很多,但都有一个缺点,没有回应用户关切,比如我在读那些文章时,就很想知道,自...

2246

扫码关注云+社区

领取腾讯云代金券