Android学习之合理利用标签美化UI

最新推荐文章于 2021-12-22 10:45:31 发布

ThanksForAndroid

最新推荐文章于 2021-12-22 10:45:31 发布

阅读量400

点赞数

分类专栏： Android 文章标签： android ui美化 drawable图片

本文链接：https://blog.csdn.net/thanksforandroid/article/details/58031297

版权

Android 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

简介

表示的是一种图像的概念，但是又不全是图片，更可以通过颜色也可以构造出各种各样的图片效果。
一般通过XML来定义，在Android设计中，Drawable是一个抽象的类，具体如下图：
Drawable的内部宽/高这两个参数比较重要，可以通过getIntrinsicWidth 和 getIntrinsicHeight两种方式
获取，但是并不是所有的Drawable都有内部宽/高，比如，一张图片的Drawable，就有，但是颜色所形成的就没有
它其实没有宽高概念，当用作View的背景时，Drawable会被拉伸到View的同等大小。

这里写图片描述

这里主要是介绍了：
ClipDrawable
InsetDrawable
LayerDrawable
LevelListDrawable
ShapeDrawable
TransitionDrawable
RotateDrawable
ScaleDrawable

ClipDrawable介绍

简介
ClipDrawable对应于< clip >标签，它可以根据自己当前的等级(level)来裁剪另一个Drawable。
效果描述
可以用clip标签对一张图片进行修饰，然后可以设定某一level值可以截取原图上相应的部分进行展示。比如设置level为1000，那么只能展示图片的十分之一，如果为9000则能展示图片的十分之九。这里的level可以理解为范围，展示原来图片多大范围内的内容。
代码一

先在drawable资源目录下面建立clip标签为根标签的文件，里面代码内容如下：
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@drawable/ss"
    android:gravity="center"
    />
    /**上述代码中：clipOrientation表示裁剪方向，可以选择水平或者竖直方向
     drawable表示针对哪一张图片进行操作
     gravity表示裁剪是从哪里入手，初始时候操作哪里，比如center表示开始根据level从中间裁剪
     需要注意一点，如果你是竖直方向，但是你gravity设置的left,这样两个方向是冲突的，
     就会实现不了*/

代码二

就是在布局文件中使用，如下：
 <ImageView
        android:id="@+id/imageView_myclip"
        android:src="@drawable/myclip"
        android:layout_centerInParent="true"
        android:layout_width="200dp"
        android:layout_height="200dp" />

代码三

只是上述部分还不能完成展示，还需要手动的设置level值，一张图片一般会被分成1000层，
0表示一点也不显示：
 int lev = clipImageView.getDrawable().getLevel();
 //上述方法可以得到当前图片的level值
 clipImageView.getDrawable().setLevel(minlevel);
  //上述代码可以设置当前图片的level值

代码四

常常利用clip标签修饰来完成一个动态加载出本张图片的效果(从无到有),如：
clipImageView = (ImageView) findViewById(R.id.imageView_myclip);
clipImageView.post(cliping);
//上述只是粘贴的主要代码
private Runnable cliping = new Runnable() {
        @Override
        public void run() {
            if (minlevel<10000){
                minlevel += 200;
                clipImageView.getDrawable().setLevel(minlevel);
                clipImageView.postDelayed(cliping,200);
            }
        }
    };
    /**clipImageView.post()表示使用view里面自带的handler这是运行在主线程中的。
       clipImageView.postDelayed()表示在200ms之后在重新设置图片的level
       这样就实现了一张图片动态加载出来的过程，类似与网页上图片加载类似，一点点出来。
    */

InsetDrawable

介绍
它一般是在要求图片比背景要小的时候用，类似与padding属性，但是又有所不同。
padding 指的是View里面内容区域和View的边界的距离，如果padding的值足够大，
那么内容区域就会变的不可见，但是inset不同，它是相当于将一个drawable嵌入进另
一个View中(按照其指定的距离来决定),
代码一

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="30dp"
    android:insetLeft="40dp"
    android:insetRight="10dp"
    android:insetTop="50dp"
    android:drawable="@drawable/ss"
    >
    /**使用较为简单，还可以直接设定android:inset属性，但是这个效果只有5.0才有效果     
    还可以设定android:visibl设置是否可见*/

代码二

 <ImageView
        android:background="#ea8585"
        android:id="@+id/imageView_myclip"
        android:src="@drawable/myinsert"
        android:layout_centerInParent="true"
        android:layout_width="300dp"
        android:layout_height="300dp" />

效果图
这里写图片描述

LayerDrawable

介绍
可以完成将多张图片进行叠加，其实使用layer_list标签可以看成是生成了一个空间(容器)，然后你可以往这个容器中添加图片，进行展示。
代码一

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <bitmap android:src="@drawable/ss"
            android:gravity="center" />
    </item>
    <item android:top="100dp" android:left="100dp">
        <bitmap android:src="@drawable/ss"
            android:gravity="center" />
    </item>
    <item android:top="200dp" android:left="200dp">
        <bitmap android:src="@drawable/ss"
            android:gravity="center" />
    </item>
</layer-list>
/**android:top之类的属性可以认为是相距layer_list边界的距离*/

代码二

<ImageView
        android:src="@drawable/mylayerlist"
        android:id="@+id/imageView_myclip"
        android:layout_centerInParent="true"
        android:layout_width="200dp"
        android:layout_height="200dp"
        />

代码三

这样操作之后就可以显示了，如下：

这里写图片描述

LevelListDrawable

介绍
可以管理一组可以进行切换的图片，给每一张图片设置上level值，然后代码可以控制level水平，那么系统就会自动匹配相应的图片。如果要是没有响应水平对应的图片的话，就会显示空白。另外需要注意的是，item的放置前后顺序需要注意，系统会自上往下匹配，如果查找到item符合当前的状态，就不会向下去查找其他item，需要注意的是，图片切换时候没有过渡过程。
代码一

<level-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_launcher"
        android:maxLevel="10"
        android:minLevel="0"/>

    <item android:drawable="@drawable/ss"
        android:maxLevel="60"
        android:minLevel="40"
        />

</level-list>

代码二

<ImageView
        android:id="@+id/imageView_myclip"
        android:src="@drawable/mylevel_list"
        android:layout_centerInParent="true"
        android:layout_width="300dp"
        android:layout_height="300dp" />

代码三

依旧需要代码中动态设置level水平值。
如果你是用作的背景，那么：
imageViwe.getBackgroud().setlevel();
如果你是用的图片，那么：
imageView.setImageLevel();
//需要注意的一点是，如果在相对应的level水平中没有相对应的图，那么就会显示空白的

ShapeDrawable**

更像是画出自己需要的样式出来，在使用的时候，可以当做是drawable类型的图片去使用就可以。使用起来比较灵活，一些控件完全不需要自定义，直接画出来就好了。
属性介绍

在shape的根标签中：
android:shape=" "可以选择： 
  rectangle 矩形 
  oval 椭圆
  line 水平直线
  ring 环形
  /**先确定想要绘制的是什么样式的drawable*/

<gradient> 渐变子标签 ，可以实现颜色的渐变，里面的属性有：
  android:startColor  起始颜色
  android:centerColor 中间颜色
  android:endColor  结束颜色
  android:angle  渐变角度，0从左到右，90表示从下到上，数值为 45的整数倍数，默认为0
  android:type  渐变的样式 liner线性渐变  radial环形渐变  sweep 扫视渐变
  /***这是可选子标签之一，可以确定渐变的颜色，其中，angle表示角度，可以理解为决定了矢量，渐变的主要方向。/

<solid>  填充颜色子标签，填充的是背景颜色,是shape的背景颜色。
    android:color  填充的颜色

<stroke> 描边子标签,针对于边界线进行介绍。
    ndroid:width 边界线的宽度
    android:color 边界线的颜色
    android:dashWidth 表示'-' 破折号的宽度。代表的是虚线
    android:dashGap 表示'-' 破折号之间的距离
    /**Android 4.0之后要想出现虚线效果，需要在这里面单独配置layerType属性才可以*/

<corners> 圆角子标签,可以使当前的shape有圆角效果。
    android:radius  圆角的半径 值越大角越圆
    android:topRightRadius  右上圆角半径
    android:bottomLeftRadius 右下圆角角半径
    android:topLeftRadius 左上圆角半径
    android:bottomRightRadius 左下圆角半径
    /**针对与四个角的一些设置*/

size标签
<size
        android:width="20dp"
        android:height="20dp" />
        其实就这两个属性，表示的是shape的大小，但并不是没有意义的，比如你选择的是椭圆，然后这里在设置尺寸的时候，设置成一样的，那么就会变成圆了。

TransitionDrawable

介绍
只能管理两层drawable，另外提供了两层drawable之间切换的方法，切换时还会有淡入淡出的动画效果。
代码一

<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_launcher" />
    <item
        android:drawable="@drawable/ss"
        android:top="100dp"
        >
    </item>
</transition>
/**上述代码所示，可以实现从ic_launcher到ss图片的变化，但是，这里不同的是多了一种过渡的效果。
不在是单纯的直接就变化了，有一层朦胧感觉其中android:top="100dp"正常逻辑是转换完成后原来的看不见了，但是加上top之后，在转换完成后以前的图片依旧可以看见100dp的部分。*/

代码二

<ImageView
        android:src="@drawable/mytransition"
        android:id="@+id/imageView_myclip"
        android:layout_centerInParent="true"
        android:layout_width="300dp"
        android:layout_height="300dp"
        />

代码三

 private TransitionDrawable ts;
 clipImageView = (ImageView) findViewById(R.id.imageView_myclip);
 ts = (TransitionDrawable) clipImageView.getDrawable();
 //这两个是控制变化效果的关键代码
 ts.startTransition(1000);//表示，由一到了二，在变化时候，会出现过渡效果，但依旧是二图片
 ts.reverseTransition(2000);//表示，由一变到二，在变化时候，是从二变到一

RotateDrawable

介绍
首先这不是动画，直观的效果就是可以让图片旋转某个角度，一般图片都是平放置的，而这个标签，可以使得图片进行旋转一定角度放置。
代码一

需要在res/drawable文件夹下面建立以rotate为根标签的XML文件：
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ss"
    android:fromDegrees="180"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360"
    >
</rotate>
/**fromDegrees:表示从哪个角度(位置)开始，toDegrees:表示到那个角度(位置)结束
 pivotX：表示X轴的重心，pivotY:表示y轴的重心*/

代码二

在布局文件XML中使用：
    <ImageView
        android:src="@drawable/myrotate"
        android:id="@+id/imageView_myclip"
        android:layout_centerInParent="true"
        android:layout_width="30dp"
        android:layout_height="30dp"
        />

代码三

还有一个重要的属性，就是level，rotate标签将整个fromDegress 到 toDegress过程
分为了10000份，所以还需要手动设置level水平，系统可以根据你的水平，从过程中扣出相
匹配的图来
clipImageView.getDrawable().setLevel(minlevel);
//上述代码就是动态设置水平的关键代码。

代码四

完全可以模仿成动画的效果，那种旋转效果：
  clipImageView = (ImageView) findViewById(R.id.imageView_myclip);
  clipImageView.post(cliping);
  //上述代码一般是在onCreate()方法里面完成。
  private Runnable cliping = new Runnable() {
        @Override
        public void run() {
            if (minlevel<10000){
                minlevel += 200;
                clipImageView.getDrawable().setLevel(minlevel);
            }
        }
    };

ScaleDrawable

介绍
字面解释就是缩放，就是将一张图片进行缩小/放大。
代码一

在res/drawable文件夹下面：
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_launcher"
    android:scaleGravity="center"
    android:scaleHeight="50%"
    android:scaleWidth="50%"
    >
</scale>
/**这里以scale为根标签scaleGravity:表示缩放重心，scaleHeight:表示缩放高度，
   scaleWidth:表示缩放宽度*/

代码二

 <ImageView
        android:src="@drawable/myscale"
        android:id="@+id/imageView_myclip"
        android:layout_centerInParent="true"
        android:layout_width="100dp"
        android:layout_height="100dp"
        />

代码三

 clipImageView.getDrawable().setLevel(minlevel);
 //此行代码是关键代码，和rotate一样，必须指定level水平，从完成上述过程中提取某一个部分出来，才会有效果图展示。

*代码四

可以模仿动画中的那种效果，关键代码如下：
clipImageView = (ImageView) findViewById(R.id.imageView_myclip);
clipImageView.post(cliping);
//上述一般是在onCreate()方法里面去完成。
private Runnable cliping = new Runnable() {
        @Override
        public void run() {
            if (minlevel<10000){
                minlevel += 500;
                clipImageView.getDrawable().setLevel(minlevel);
                clipImageView.postDelayed(cliping,200);
            }
        }
    };

总结

通过上面的整理，发现可以通过标签就可以完成许多效果图，比如：
clip标签、rotate标签、scale标签、level_list标签分别描述了剪切、旋转、缩放、都是描述了一个过程，然后代码中通过level水平来显示某一时刻对应的图，而且也能让其完整的展示出过程出来(前面参考代码四)
shape标签、transition标签、layer_list标签、inset标签等等测试在图片上进行了修饰，上面只是单纯的介绍了每个标签怎么使用，一般项目中都是多个标签相互嵌套去使用。