Android 图像绘制之 Drawable

最新推荐文章于 2024-05-01 18:59:07 发布
最新推荐文章于 2024-05-01 18:59:07 发布
阅读量769 收藏 3
点赞数 2
分类专栏： Android 文章标签： Drawable xml文件定义图像效果

转载自：https://www.jianshu.com/p/4cd87e3c43d6，作者：不惜留恋_ (简书)

不要冲动去自定义 View

绘制简单的图形，以及显示静态的图片，可以用 Drawable，而不用自定义 View。例如显示一张圆形图片，其实可以用 RoundBitmapDrawable，这个后面我们会看到

Drawable是什么

查了下官方文档，Drawable 是一个抽象的概念，“something that can be drawn”，就我的理解话，Drawable 是一种媒介，它可以把内容绘制到 Canvas 上。
如果你还没理解，举个例子，BitmapDrawable 包装了一个 Bitmap，如果你还不了解 Bitmap，请看我的文章 Android 图像绘制之 Bitmap。其实 BitmapDrawable 最终也是调用了 Canvas 的 drawBitmap() 方法来把 Bitmap 绘制图像到 View 中的。
Drawable的实现类
查了下 Drawable 的实现类，如ShapeDrawable,BitmapDrawable,ClipDrawable，RoundBitmapDrawable,StateListDrawableRoateDrawable。从类的名子来看，大致可以猜到这些类是干嘛的吧，是不是有种相见恨晚的感觉，那么本篇文章就是介绍这些类。当然网上很多文章都有写过，本篇文章不注重抠每个细节，但是会让你感受到这个类到底实际中有何用。
GradientDrawable
一个创建图形的 Drawable，图形包括直线（line）, 椭圆（oval），圆形（oval，当椭圆的宽高相等的时候就是圆形），矩形（rectangle），圆环（ring）。不过在这之前，我需要你对 Paint 有所了解，目前我还没有写关于 Paint 的文章，我希望你能从其他文章了解下，这样能更好理解 GradientDrawable 。

GradientDrawable 它在 XML 文件中对应的根节点为 ，但是它生成的不是 ShapeDrawable，而是 GradientDrawable，但是又达到了 ShapeDrawable 的效果， 我查了下官方文档，没有错，这 TM 就有点搞事了。如果有人知道，可以告诉我为什么。

直线

<?xml version="1.0" encoding="utf-8"?>
<shape    
    xmlns:android="http://schemas.android.com/apk/res/android"    
    android:shape="line">    
    <stroke android:width="5dp" android:color="#ffff0000"/>
</shape>

在这里插入图片描述

椭圆或者圆形

<?xml version="1.0" encoding="utf-8"?>
<shape    xmlns:android="http://schemas.android.com/apk/res/android"    
android:shape="oval">    
<stroke android:width="5dp" android:color="#ffff0000"/>    
</shape>

在这里插入图片描述

如果把定义宽和高相等的话就是圆形

<?xml version="1.0" encoding="utf-8"?>
<shape    xmlns:android="http://schemas.android.com/apk/res/android"    
android:shape="oval">    
    <stroke android:width="1dp" android:color="#ffff0000"/>    
    <size android:width="100dp" android:height="100dp"/>    
</shape>

在这里插入图片描述

如果不用 Stroke( 描边，对应 Paint.STROKE )，而用Solid （填充，对应 Paint.FILL），会出现实心圆形
在这里插入图片描述

填充的颜色也可以搞个渐变色

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"    
    android:shape="oval">    
<gradient        
    android:startColor="@color/colorAccent"    
    android:endColor="@color/colorPrimary"/>    
<size 
    android:width="100dp" 
    android:height="100dp"/>
</shape>

在这里插入图片描述

矩形

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"    
    android:shape="rectangle">    
<corners 
    android:radius="10dp"/>    

<stroke 
    android:width="1dp" 
    android:color="@color/colorAccent"/>    
<size        
    android:width="100dp"        
    android:height="100dp"/>
</shape>

在这里插入图片描述
圆环

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

在这里插入图片描述

这里要说下这个 useLevel， 只有在 LevelListDrawable 中才设置 true，这里要设置 false，否则显示不出来。

其实 GradientDrawable 或者说是 ShapeDrawable 的绘制原理就是利用 Canvas.drawCircle() ，Canvas.drawRect() 等等方法

**

BitmapDrawable

**

BitmapDrawable 主要是用于图片的平铺( tileMode )显示，我们先看看没有设置 tileMode 的 BitmapDrawable

<?xml version="1.0" encoding="utf-8"?>
<bitmap 
    xmlns:android="http://schemas.android.com/apk/res/android"            
    android:antialias="true"        
    android:dither="true"        
    android:filter="true"       
    android:mipMap="true"         
    android:src="@drawable/sample_1">
</bitmap>

antialias：抗锯齿
dither：抗抖动，当位图的像素配置与屏幕不同时（例如 ARGB_8888 的位图和 RGB_565 的屏幕）
filter：过滤。当位图收缩或者拉伸，为了使外观平滑使用过滤
mipMap：一种图像处理技术 ，主要用于在图片缩小时，还要获得高质量图片。
在这里插入图片描述

BitmapDrawable 的侧重功能属性在于 android:tileMode=[“disabled” | “clamp” | “repeat” | “mirror”]

disable：不解释，默认不平铺
clamp：当位图小于实际显示区域的时候，边缘的颜色拉伸
repeat：当位图小于实际显示区域的时候，水平和垂直方向，重复显示图片
mirror：当位图小于实际显示区域的时候，水平和垂直方向，以镜像的方式（或者说对称的方式）重复显示图片

为了说明 tileMode ，先看一张原图

在这里插入图片描述

repeat：
在这里插入图片描述
mirror：
在这里插入图片描述

Clamp

这个就有点意思了，我看到了一个实际用法（参考博客http://blog.csdn.net/u012702547/article/details/51594131）

不会 PS 是硬伤，只能借用下别人的图了。但是我们主要学习这个实际中怎么应用。

原图是这样
在这里插入图片描述
clamp 平铺后
在这里插入图片描述

把它应用到 TextView 背景后

<TextView    
    android:id="@+id/image_view"        
    android:layout_width="match_parent"     
    android:layout_height="match_parent"    
    android:background="@drawable/bitmapfile"      
    android:padding="40dp"    
    android:text="@string/bitmap_clamp_text"    
    android:textSize="20sp"/>

在这里插入图片描述

LayerListDrawable

图层列表，就像我们平时把一张照片放在另外一张照片上，最后的照片在最上面。 LayerListDrawable 就是这样设计的。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    
<item>        
    <shape android:shape="oval">            
        <solid android:color="@color/colorAccent"/>        
    </shape>    
</item>    
    <item android:width="64dp" android:height="64dp">        
        <bitmap           
            android:gravity="center"            
            android:src="@android:drawable/ic_input_add"/>      
    </item>
</layer-list>

在这里插入图片描述

这个是不是有点像 FloatingActionButton，把这个设置为 Button 的背景，然后设置 android:elevation，是不是就 perfect了。

使用注意事项：

我们用 控制显示的大小和位置，而用 的子节点控制显示区域，如 ，， 等等 Drawable
不用显示图片因为图片会根据显示区域缩放，如果我们将图片放在子节点中，例如 ，就算图片小于显示区域也不会放大。

StateListDrawable
在 MD 设计之前，大家应该有个印象，在点击像 ListView 的 Item 的时候，是没有波纹效果的，我们往往会自己设计一个简单的效果，就是点击 Item 的时候，背景切换个颜色。而这个就是用 StateListDrawable。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
  <item android:state_pressed="true">        
    <shape>            
        <corners android:radius="10dp"/>            
        <solid android:color="@color/colorAccent"/>              
    </shape>    
  </item>    

  <item>        
    <shape>            
        <corners android:radius="10dp"/>            
        <stroke 
            android:width="1dp"   
            android:color="#685252"/>        
    </shape>    
  </item>
</selector>

设置为 Button 的 background 后效果如下
在这里插入图片描述

LevelListDrawable

根据等级（level）来显示图片。典型的应用就是 WIFI 信号。用 setLevel()来控制 level，根据 level 所在的范围显示相应的图片。

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:maxLevel="0" android:drawable="@drawable/ic_wifi_signal_1" />
    <item android:maxLevel="2" android:drawable="@drawable/ic_wifi_signal_2" />
    <item android:maxLevel="5" android:drawable="@drawable/ic_wifi_signal_3" />
    <item android:maxLevel="9" android:drawable="@drawable/ic_wifi_signal_4" />
</level-list>

maxLevel = 0 就是默认图片，看下默认效果：
在这里插入图片描述
现在给 ImageView 背景

<ImageView
        android:layout_centerInParent="true"
        android:id="@+id/wifi_image"
        android:onClick="onClickWifi"
        android:background="@drawable/level_list_drawable"
        android:layout_width="200dp"
        android:layout_height="200dp"/>

    private static int i = 1;
    public void onClickWifi(View view) {
        ImageView imageView = (ImageView) findViewById(R.id.wifi_image);
        imageView.getBackground().setLevel(i++ % 10);
    }

现在效果，每点击一次 ImageView，level 改变一次。第一次点击 ，level 是1，显示 maxLevel=“2” 图片，再点击一次，level 是2，还是显示 maxLevel=“2” 图片，依此类推，出现如下效果：
在这里插入图片描述

TransitionDrawable

在两个图像之间，通过改变 alpha 来交替显示。

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>

    <item>
        <bitmap android:src="@drawable/sample_1"/>
    </item>
</transition>

为 ImageView 设置这个背景

 <ImageView
        android:id="@+id/transition"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/transition_drawable"
        android:onClick="onClickTransition"/>

实现点击事件

private boolean isReverse;
    public void onClickTransition(View view) {
        ImageView imageView = (ImageView) findViewById(R.id.transition);
        TransitionDrawable drawable = (TransitionDrawable) imageView.getBackground();
        if (!isReverse) {
            drawable.startTransition(2000);
            isReverse = true;
        } else {
            drawable.reverseTransition(2000);
            isReverse = false;
        }
    }

在这里插入图片描述

InsetDrawable

看这个命名，意思是 插入式的 Drawable。也就是说，可以按照指定的位置（left,top,right,bottom）来显示图片

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

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@color/colorAccent"
        android:src="@drawable/inset_drawable"/>

在这里插入图片描述
可以看到 left , top , right 有明显的 padding

ClipDrawable

从名字上看，意思是可以裁减的 Drawable。

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

clipOrientation 控制裁减的方向
gravity 控制从哪里开始裁减

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <ImageView
        android:id="@+id/clip_image"
        android:background="@drawable/clip_drawable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar2"/>
</LinearLayout>

Java Code

 final ImageView imageView = (ImageView) findViewById(R.id.clip_image);
        SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar2);
        seekBar.setMax(10000);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                imageView.getBackground().setLevel(i);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
});

在这里插入图片描述

ScaleDrawable

意思是可缩放的 Drawable。不过用起来有点费劲。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">


    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="match_parent"
        android:layout_height="450dp"
        android:background="#FF4081"
        android:src="@drawable/scale_drawable"/>

    <SeekBar
        android:layout_alignParentBottom="true"
        android:id="@+id/seekBar3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>
</RelativeLayout>

scaleGravity 控制显示的位置

    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="match_parent"
        android:layout_height="450dp"
        android:background="#FF4081"
        android:src="@drawable/scale_drawable"/>

基本设置已经完毕，但是就是不显示，我们需要控制 ScaleDrawable 的 Level，我们加入一个 SeekBar 控制 Level

 final ImageView imageView = (ImageView) findViewById(R.id.scale_image);
        SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar3);
        seekBar.setMax(10000);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                imageView.getDrawable().setLevel(i);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
});

level 控制缩小的比例的，level 值是从 0 到 10000，0代表不显示，从1开始控制图片放大，10000就是原图，看下面效果演示
在这里插入图片描述

android:level 属性在 API 24 版本后，可以在 XML 文件中添加
android:useIntrinsicSizeAsMinimum=“true”，这个设置为 true 后，就会一直显示原图的大小。
如果你想知道为什么，可以探究源码 ScaleDrawable.java 的 onBoundsChange() 方法

结束

通过本篇文章，我们要达到两点效果，一是 Drawable 是什么，二是为什么要用 Drawable。
由于篇幅原因，现在就介绍这么多，
如果大家有何疑问，可以正文评论，我会尽量解答，大家大同学习进步。

作者：不惜留恋_
链接：https://www.jianshu.com/p/4cd87e3c43d6
来源：简书

minus haha
关注
专栏目录
关于Android中图片大小、内存占用与drawable文件夹关系的研究与分析
赵凯强
11-11 2万+
从上一篇文章《Android屏幕适配全攻略》写完之后，经常会有朋友问我这个问题：“能不能一个App只提供一套切图适应所有的分辨率呢？”我觉得有必要写一篇文章来研究一下这个问题，所以就有了这篇文章。 研究内容 研究方法 测试环境 研究过程 结果分析 结论 另外一个难以解释的问题 研究内容 本篇内容主要探讨以下场景：同一张图片，放置在不同的drawable文件夹，在同一设备上
玩转Android drawable图片适配
热门推荐
指数渐近线
01-05 2万+
众所周知，Android机型众多，屏幕尺寸、分辨率各有不同。对于Android开发人员来说，如何提高APP中图片对各种机型的适配是基本技能之一。借着项目中遇到的图片适配问题，在总结项目时，就想着顺带把这部分好好捋一捋，作为一个记录，也为不是很清楚这部分的人提供一个参考。先说mipmap采用Android Studio开发Android APP，在项目的res目录下，会多出几个以mipmap开头的文件
Android画图Drawable
移动开发记录
12-04 299
转自：http://dev.10086.cn/cmdn/wiki/index.php?doc-view-3717.html AndroidSDK提供了一个强大的类Drawable，Drawable这个抽象类到底代表了什么，如何使用？Drawable是个很抽象的概念，通过简单的例子程 序来学习它，理解它。先看个简单的例子，使用Drawable的子类ShapeDrawable来画...
Android 中基本图像绘制
weixin_33973600的博客
11-08 127
看《Google Android 手机设计达人讲座》，觉得里面对绘图相关的几个类的描述很经典，怕忘记了就copy出来吧：              在Android中的绘图和现实中的绘图大同小异，View以及其子类充     当了画板的角色，Canvas充当了画笔的角色，Color充当了颜料的角色，     Paint等一些辅助绘制的类充当了绘图技巧的角色。               继...
Android Drawable (可绘制图像)
Luzhuo 的博客
02-12 1307
Drawable (可绘制图像) 本文由 Luzhuo 编写,转发请保留该信息. 原文: `` Drawable是可绘制图像, 它并不是某一具体类型的图像. 从图像资源创建 图片资源是指放在res/drawable下的图片, 现在一般都把图片放在res/mipmap下了. 文件的类型支持PNG、JPG、GIF，一般只使用PNG格式的图片, 其他图片格式不推荐. 1.使用代码的方式 AppC...
Android的Drawable
孙朝阳的博客
09-05 932
Drawable是一个抽象类,它有众多子类如ShapeDrawable BitmapDrawable等. 它有一个重要的参数是内部宽高,通过getIntrinsicWidth和getIntrinsicHeight获取! 内部大小不等于它的大小,一般来说Drawable没有大小,当其作为View的背景时,Drawable会被拉伸至View的同等大小! Drawable的分类及层次关系 ...
Android图像介绍-Drawable
05-02
在Android开发中，Drawable是图像资源的一个核心概念，它不仅限于普通的图片，还包括各种图形、状态列表、层叠图像等。本篇文章将深入探讨Android中的Drawable及其在图像处理中的应用。 首先，Drawable是一个接口，...
android中图形图像处理之drawable用法分析
09-03
在Android开发中，图形图像处理是一项重要的技能，而Drawable是Android系统中用于处理图形和图像的主要工具。本文将深入探讨Android中的Drawable用法，以及如何在应用程序中有效地使用它。 首先，我们需要理解如何...
Android开发使用Drawable绘制圆角与圆形图案功能示例
08-29
Android开发中，Drawable是一种非常重要的资源类型，用于描述图形、图像、颜色等视觉元素。在Android开发中，绘制圆角矩形和圆形图案是一种常见的需求，例如在设计应用程序的UI界面时，需要使用圆角矩形和圆形图案来...
Android-android-gif-drawable用于在Android上显示动画GIF
08-13
在Android应用开发中，有时我们需要在界面上展示动态GIF图像，这时`android-gif-drawable`库就显得非常实用。这个库是专门为在Android平台上高效、流畅地播放GIF动画而设计的。本文将深入探讨如何使用`android-gif-...
Android应用源码之android-gif-drawable 支持fig显示的view.zip
10-14
`android-gif-drawable`通过提供一个可绘制对象（Drawable）来解决这个问题，该对象能够处理GIF动画的每一帧，并按时间顺序进行显示。 该库的主要类是`GifDrawable`，它是`android.graphics.drawable.Drawable`的...
Android绘制图形
薄荷糖
04-24 833
Canvas（画布）定义各种绘制图形的方法类drawBitmap()画位图drawPath()沿着制定path画任意图形drawCirle()画圆drawRect（）画矩形drawOval（）画椭圆Paint（画笔）setColor（）,setStyle（），setStrokeWidth（）,setTextSize(）,setTextAlign（）设置文字对齐方式Bitmap（位图）Path类 m...
android 图片 drawable,在android中Drawable图片使用教程
weixin_36149595的博客
05-27 9904
在android项目的目录里面，res存放着各种资源，其中Drawable是android开发中使用最广泛的资源，它既可以直接用图片作为资源，也可以用xml文件。本文学习啦小编主要介绍在android中Drawable图片使用教程!在android中Drawable图片使用教程根据分辨率的高低，drawable分为好几个目录。它们的应用原则是：1) 如果drawable-hdpi、drawable...
Android UI绘制 -- Drawable
瑜艾
11-05 868
Drawable 功能 获取和设定可绘制区域 public final Rect getBounds() public void setBounds(int left, int top, int right, int bottom) public void setBounds(Rect bounds) //显示级别，从0到10000 public final boolean setLevel...
android 绘图 简书,Android 图画绘制
weixin_31309419的博客
06-02 601
安卓系统提供了一系列的2d图画绘制API。这使得我们可以在canvas上绘制我们自定义的图画，或者修改一个现有view来定制它。绘制2d图像通常有如下几种方式：使用view对象绘制图像或动画。这种方式，系统会处理图像的绘制，我们需要做的就是设置要绘制的图片;直接使用canvas对象绘制图像。这种方式，可以使用canvas的绘制方法来设置绘制操作，然后将canvas传递到对应类的onDraw(can...
Android 图像绘制之 Drawable(二)
chuyouyinghe的专栏
03-18 1320
Android 图像绘制系列文章Android图像绘制之BitmapAndroid 图像绘制之 DrawableAndroid 图像绘制之 Drawable(二) 在前一篇文章 Android 图像绘制之 Drawable，由于篇幅影响， 只介绍了一些基础的类。当然如果你还没有看上篇文章，我建议你先看下，它会让明白 Drawable 是什么，以及为什么要用 Drawable。 如果你已经看过，�那么今天 ，我们玩大点的。 ColorDrawable 这个就是绘制一个纯色背景，用 XML 太浪费 ，直接
Android图像介绍——Drawable
liuning1985622的博客
05-01 1048
Drawable都表示一种图像的概念，但又不全是图片，通过颜色也可以构造出各式各样的图像效果。在实际开发Drawable常被用来作为View的背景使用。Drawable一般通过XML来定义，我们也可以通过代码来创建具体的Drawable对象。在Android设计中，Drawable是一个抽象类，它是所有Drawable的基类。Drawable的内部宽高这个参数很重要，可以通过getIntrinsicWidth和getIntrinsicHeight获取。
基于微信小程序的新生报到系统设计与实现.docx
最新发布
09-13
基于微信小程序的新生报到系统设计与实现.docx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值