Android中的Drawable(三)

文章收藏的好句子:一个人也许无法改变外界,但可以改变自己。

目录

1、TransitionDrawable

2、InsetDrawable

3、ScaleDrawable

1、TransitionDrawable

我们基于Android中的Drawable(二)这篇文章再继续分析其他常用的 Drawable;TransitionDrawable 在 xml 文件中对应的标签是 transition,它实现的是2个 Drawable 之间的淡入淡出效果,为了更好的理解它,我们也先写一个 demo;

(1)在 drawable 文件夹下新建一个 my_transition.xml 文件;

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

现在 img_3 的图片如下所示;

c823bbcaf77569aa580bcf997b3e0879.jpeg

img_4 的图片如下所示;

1a862d10010da783c2880531d9123fb3.jpeg

(2)Activity 的布局文件 activity_transition.xml 如下所示;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout


    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/my_transition"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv"
        android:onClick="onClick"
        android:text="按钮"/>
</RelativeLayout>

名称为 TransitionActivity 的 Activity 的处理逻辑如下所示;

public class TransitionActivity extends AppCompatActivity {
    ImageView mIv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        mIv = findViewById(R.id.iv);
    }


    public void onClick(View v) {
        TransitionDrawable transitionDrawable = (TransitionDrawable) mIv.getDrawable();
        transitionDrawable.startTransition(3000);
    }
}

app 一开始运行的效果图如下所示;

42fe1aeddb6ad315248e325e857c28d2.jpeg

当我们点击 “按钮” 后,3s 后就变成了如下的效果图;

15a886a8c44b7570cbaf21db69980dc5.jpeg

在 my_transition.xml 文件中,transition 标签下的 item 标签其实就是一种 Drawable;一般我们用 TransitionDrawable 作为 ImageView 的前景图,或者用作 View 的背景图,我们可通过 TransitionDrawable 的 startTransition 和 reverseTransition 方法来实现淡入淡出的效果以及它的逆过程。

2、InsetDrawable

InsetDrawable 在 xml 布局文件中对应的标签是 inset;如果要实现一个 View 的背景比 View 本身还要小,可以使用 InsetDrawable 来实现,类似与 Drawable 的 padding 属性;InsetDrawable 还可以实现将其他 Drawable 内嵌到自己当中,并可以在四周留出一定的间距;好,为了更好的理解,我们也写一个 demo ;

(1)在 drawable 文件夹下新建一个 my_inset_drawable.xml 文件;

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

(2)Activity 的 activity_inset_drawable.xml 文件如下所示;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.a86188.myapplication.InsetDrawableActivity">
    <ImageView
        android:layout_width="match_parent"
        android:src="@drawable/my_inset_drawable"
        android:background="#FF0000"
        android:layout_height="200px" />
</RelativeLayout>

app 的运行结果如下所示;

319f4d15f2398a9ceb4193f7aa92302c.png

首先看一下,我们的 ImageView 的区域是红色背景的这一块对不对?ImageView 的前景就是我们看到的图片对不对?很明显,图片距离 ImageView 顶部 30 dp,图片距离 ImageView 底部 30 dp;好,我们对开发中常见的 inset 标签的属性进行说明一下;

android:insetBottom  :  View 的背景或者前景在 View 实际区域的底部内边距。

android:insetTop  :  View 的背景或者前景在 View 实际区域的顶部内边距。

android:insetRight  :  View 的背景或者前景在 View 实际区域的右边内边距。

android:insetLeft  :  View 的背景或者前景在 View 实际区域的左边内边距。

3、ScaleDrawable 

ScaleDrawable 在 xml 文件中对应于 scale 标签,它可以根据自己的等级将指定的 Drawable 缩放到一定比例,为了更好的理解,我们也先写一个 demo 出来;

(1)在 drawable 文件夹下新建一个 scale_drawable.xml 文件;

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

(2)Activity 的布局文件 activity_scale_drawable.xml 如下所示;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@drawable/scale_drawable"
       />
</RelativeLayout>

(3)Activity 的子类 ScaleDrawableActivity 对 ScaleDrawable 进行处理;

public class ScaleDrawableActivity extends AppCompatActivity {
    ImageView iv;
    private ScaleDrawable scaleDrawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scale_drawable);
        iv = (ImageView)findViewById(R.id.iv);
        scaleDrawable = (ScaleDrawable)iv.getBackground();
        scaleDrawable.setLevel(1);
    }
}

app运行的结果如下所示;

dc5cf5bcef4a494cf427fa0a9b14a670.jpeg

好,我们现在将 ScaleDrawableActivity 中的 scaleDrawable.setLevel(1) 这行代码改为 scaleDrawable.setLevel(1000),然后再运行一下app,效果图如下所示;

69acc4a93bc63156cf48b10f6261950c.jpeg

看到没有,图片明显变大了,看 ScaleDrawable 中的 setLevel 方法中的参数,参数的取值范围是1-10000,在取值范围内,参数越大,内部的 Drawable 就看起来越大;ScaleDrawable 的默认等级为 0,那么 ScaleDrawable 将无法显示出来。我们可以将 Drawable 的等级设置为大于10000 的值,比如10050,虽然也能正常工作,但是不推荐这么做,有可能会出现其他的问题。

刚刚说了,如果 ScaleDrawable 的为0,那么 ScaleDrawable 就无法显示出来,这是不是真的呢?我们看一下 ScaleDrawable 的 draw(Canvas canvas)方法;

269c4a33c9d21247d3418bf9c1b03796.png

看到了没,当等级不为0的时候才调用 Drawable 的 draw 方法;好,我们再看看 scale 标签的属性;

android:scaleGravity:  等同于 shape 的 android:gravity 属性。

android:scaleHeight  :表示 Drawable 的高的缩放比例,值越大,内部 Drawable 的高度显示得越小,  例如 android:scaleHeight=70%”,那么显示时 Drawable 的高度只有原来的30%。

android:scaleWidth  :  表示 Drawable 的宽的缩放比例,值越大,内部 Drawable 的宽显示得越小,例如 android:scaleWidth=70%”,那么显示时 Drawable 的宽度只有原来的30%。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AndroidDrawable是一种可绘制的图像对象,可以用于绘制各种形状的图像,如位图、矢量图等。下面是使用Drawable图片的教程: 1. 创建Drawable资源文件 在Android Studio,可在res/drawable目录下创建Drawable资源文件,支持的文件格式包括PNG、JPG、GIF等。例如,创建一个名为ic_launcher的PNG图片文件,可在drawable目录下创建ic_launcher.png文件。 2. 在布局文件引用Drawable资源 在布局文件,可通过ImageView控件引用Drawable资源,例如: ``` <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher"/> ``` 其,@drawable/ic_launcher表示引用名为ic_launcher的Drawable资源。 3. 在代码引用Drawable资源 在代码,可通过Context的getDrawable()方法获取Drawable资源,例如: ``` Drawable drawable = context.getDrawable(R.drawable.ic_launcher); ``` 其,R.drawable.ic_launcher表示引用名为ic_launcher的Drawable资源的ID。 4. 设置Drawable图片的属性 Drawable图片可以设置不同的属性,例如透明度、边框、大小等。可通过代码方式设置Drawable图片的属性,例如: ``` Drawable drawable = context.getDrawable(R.drawable.ic_launcher); // 设置透明度为50% drawable.setAlpha(128); // 设置边框为红色,宽度为2dp drawable.setStroke(2, Color.RED); // 设置大小为50dp * 50dp drawable.setBounds(0, 0, 50, 50); ``` 以上是使用Drawable图片的教程,希望对您有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值