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

2019-11-06 10:03:51

字体：大中小

来源：转载

供稿：网友

主要是介绍了： clip标签 insert标签 layer-list标签 level-list标签 Shape标签 trainsition标签 rotate标签 scale标签

clip标签介绍

效果描述 可以用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 这样就实现了一张图片动态加载出来的过程，类似与网页上图片加载类似，一点点出来。 */

inset标签学习

介绍它一般是在要求图片比背景要小的时候用，类似与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设置是否可见*/

代码二

效果图 这里写图片描述

layer_list标签

介绍可以完成将多张图片进行叠加，其实使用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边界的距离*/

代码二

代码三

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

这里写图片描述

level-list标签

介绍可以管理一组可以进行切换的图片，给每一张图片设置上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>

代码二

代码三

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

shape标签

介绍更像是画出自己需要的样式出来，在使用的时候，可以当做是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 左下圆角半径 /**针对与四个角的一些设置*/

transition标签

介绍只能管理两层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的部分。*/

代码二

代码三

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

rotate标签

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

需要在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); } } };

scale标签

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

在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:表示缩放宽度*/

代码二

代码三

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标签等等测试在图片上进行了修饰，上面只是单纯的介绍了每个标签怎么使用，一般项目中都是多个标签相互嵌套去使用。

上一篇：解决Android的button按钮默认自带阴影效果

下一篇：android车机调试的教程链接