安卓学习笔记之-Drawable画图

最新推荐文章于 2024-04-19 14:16:14 发布

原创最新推荐文章于 2024-04-19 14:16:14 发布 · 685 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#安卓学习笔记之Drawable属性了解

笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Android中各种Drawable资源的使用方法，包括GradientDrawable、BitmapDrawable、LayerListDrawable、StateListDrawable等，涵盖了形状绘制、图片处理、状态切换及动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GradientDrawable

一个创建图形的 Drawable，图形包括直线（line）, 椭圆（oval），圆形（oval，当椭圆的宽高相等的时候就是圆形），矩形（rectangle），圆环（ring）。这边给一个圆形的示例代码：

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

下的一些属性：
solid：填充
android:color指定填充的颜色
gradient：渐变
android:startColor和android:endColor分别为起始和结束颜色，
android:angle是渐变角度，必须为45的整数倍。
另外渐变默认的模式为android:type=“linear”，即线性渐变，
可以指定渐变为径向渐变，android:type=“radial”，径向渐变需要指定半径android:gradientRadius=“50”。
stroke：描边
android:width=“2dp” 描边的宽度，android:color 描边的颜色。
我们还可以把描边弄成虚线的形式，设置方式为：
android:dashWidth=“5dp”
android:dashGap=“3dp”
其中android:dashWidth表示’-'这样一个横线的宽度，android:dashGap表示之间隔开的距离
corners：圆角
android:radius为角的弧度，值越大角越圆。
我们还可以把四个角设定成不同的角度，
同时设置五个属性，则Radius属性无效
android:Radius=“20dp” 设置四个角的半径
android:topLeftRadius=“20dp” 设置左上角的半径
android:topRightRadius=“20dp” 设置右上角的半径
android:bottomLeftRadius=“20dp” 设置右下角的半径
android:bottomRightRadius=“20dp” 设置左下角的半径
padding：间隔可以设置上下左右四个方向的间隔
注意的是在做圆环设置android: useLevel这个属性，只有在 LevelListDrawable 中才设置 true，这里要设置 false，否则显示不出来。

BitmapDrawable

它的属性有如下
antialias：抗锯齿
dither：抗抖动，当位图的像素配置与屏幕不同时（例如 ARGB_8888 的位图和 RGB_565 的屏幕）
filter：过滤。当位图收缩或者拉伸，为了使外观平滑使用过滤
mipMap：一种图像处理技术，主要用于在图片缩小时，还要获得高质量图片。
BitmapDrawable 的侧重功能属性在于 android:tileMode=[“disabled” | “clamp” | “repeat” | “mirror”]
disable：不解释，默认不平铺
clamp：当位图小于实际显示区域的时候，边缘的颜色拉伸
repeat：当位图小于实际显示区域的时候，水平和垂直方向，重复显示图片（就是重复这张图直到充满屏幕）
mirror：当位图小于实际显示区域的时候，水平和垂直方向，以镜像的方式（或者说对称的方式）重复显示图片（以对称的形式充满屏幕）示例代码：

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:antialias="true"
        android:src="@drawable/p2"
        android:dither="true"
        android:filter="true"
        android:gravity="top|left"
        android:tileMode="repeat"//这个属性就是设置对称平铺拉伸，重复充满屏幕效果的属性。
    >
</bitma>

上面是Drawable里面的XML然后再具体的Acticity的XML引用做背景墙就好了
详细介绍看博客：https://blog.youkuaiyun.com/u012702547/article/details/51594131

LayerListDrawable

图层列表，就像我们平时把一张照片放在另外一张照片上，最后的照片在最上面。 LayerListDrawable 就是这样设计的。
注意的是：
1。我们用控制显示的大小和位置，而用的子节点控制显示区域，如，，等等 Drawable
2.不用显示图片因为图片会根据显示区域缩放，如果我们将图片放在子节点中，例如，就算图片小于显示区域也不会放大。
实例代码：

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

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/colorPrimary"/>
    </shape>
</item>
    <item>
        <shape>
            <corners android:radius="10dp"/>
            <stroke android:width="1dp"
                android:color="#685252"/>
        </shape>
    </item>
</selector>

然后在你需要用到的控件地方设置他的背景就可以了。

LevelListDrawable

实例代码在https://www.jianshu.com/p/4cd87e3c43d6效果图如下：
在这里插入图片描述

TransitionDrawable

这个是在两个图片进行alpha进行渐变。
首配置一个TransitionDrawable的XML代码如下：

<?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
        android:id="@+id/transition"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/transition_drawable"
        android:onClick="onClickTransition"/>

这里写在你想实现替换的具体Image里面
最后实现Image点击事件代码如下：

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

这个属性是把一张图片直接贴在另外一张图片上面。

ScaleDrawable

这个相对复杂一点这是实现图片放大缩小的功能同理先设置一个drawable文件

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/img123"
    android:scaleGravity="center"
    android:scaleHeight="100%"
    android:scaleWidth="100%"
    />

接着布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.floatwindowrecycler.MainActivity">
    <ImageView
        android:id="@+id/scal_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_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

最后是做一个控制seekbar的代码实现控制图片放大缩小代码如下：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ImageView imageView=(ImageView)findViewById(R.id.scal_image);
        SeekBar seekBar=(SeekBar)findViewById(R.id.seekBar3);
        seekBar.setMax(10000);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener(){
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                imageView.getDrawable().setLevel(progress);
            }

            @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() 方法

RotateDrawable

这是一个可以旋转的Drawable我们来分析下这里面有些啥属性；比如代码

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="180"
    android:visible="true">

    <bitmap android:gravity="center"
            android:src="@drawable/sample_1"/>
</rotate>

其中pivotx,与pivoty表示旋转中心的坐标。代码中的50%表示横竖都是一半就是以屏幕中心为旋转点。
fromDegrees----toDegrees表示可旋转的角度代码中表示图片从0到180度旋转。这里也可以直接用android:drawable="@drawable/图片名"来放置图片，但是如果图片比屏幕小的时候不能控制图片位置所以用这个作为子节点来控制图片的初始位置实现的java代码于上面的放大缩小的代码一样。可以依葫芦画瓢只是用到的Drawable文件不一样。

RippleDrawable

制作按钮点击波纹效果的属性。比较简单不外乎就是设置一个drawable文件然后再BUTTON中引用如果想让这个按钮更美观一点可以再自定义一个背景图加载波纹哪个XML里面。这样就直接关联起来。如代码

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

    <item android:drawable="@drawable/ripple_shape_drawable"/>
</ripple>