Android代码绘制虚线、圆角、渐变和阴影效果图

2016-04-09 13:00 阅读 13,615 次 评论 2 条

一 摘要

drawable文件夹放置动画/形状/选择器等属性文件，唯一的drawable文件名，不允许写错和拼错，否则运行报错。drawable文件夹底下的xml文件可以包括的标签共18个：animation-list bitmap clip color corners gradient inset item(item) layout-list nine-patch padding rotate scale selector shape size solid stroke，18个标签中只有4个标签可以作为根标签：item（item） layout-list selector shape，比如：

set-anim-demo

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <corners android:radius="5dp" />  
  5.   
  6.     <stroke  
  7.         android:dashGap="3dp"  
  8.         android:dashWidth="3dp"  
  9.         android:width="1dp"  
  10.         android:color="#DC143C" />  
  11.   
  12.     <size  
  13.         android:height="20dp"  
  14.         android:width="20dp" />  
  15.   
  16. </shape>  

二 4个根标签说明

drawable文件夹的18个标签在同一个xml文件中多个结合使用，比如上面的例子，一个shape根标签中，可以添加corners stroke size标签，非根标签只能在4个根标签中使用。

shape标签

shape根标签绘制圆角矩形 虚线椭圆 渐变背景，具体代码如下：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- 圆角矩形：rectangle绘制矩形，oval绘制椭圆，line绘制直线，ring绘制波浪线-->  
  3. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:shape="rectangle" android:tint="#DC143C">  
  5.     <!-- corners绘制圆角度数 -->  
  6.     <corners android:radius="5dp" />  
  7.    <!--solid填充颜色  -->  
  8.     <solid android:color="#DC143C"/>  
  9.   
  10. </shape>  

round-rectangle

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- 绘制椭圆 -->  
  3. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:shape="oval" >  
  5.   
  6.     <solid android:color="#DC143C" />  
  7.   
  8. </shape>  

oval

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- 绘制渐变背景 -->  
  3. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:shape="rectangle" >  
  5.   
  6.     <!-- corners绘制圆角度数 -->  
  7.     <corners android:radius="5dp" />  
  8.     <!-- gradient绘制渐变：angle逆时针开始，0从左向右渐变，90从下向上渐变，180从右向左渐变，270从上向下渐变 -->  
  9.     <gradient  
  10.         android:angle="270"  
  11.         android:endColor="#3CB371"  
  12.         android:startColor="#00FF7F" />  
  13.   
  14. </shape>  

gradient-rectangle

selector标签

selector标签实现文字按下效果 背景按下效果，具体代码：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--TextView默认android:clickable="false"，true后selector属性才生效 -->  
  3. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
  4.     <item android:state_pressed="true" android:drawable="@drawable/news_main_pressed" />  
  5.     <item android:state_pressed="false" android:drawable="@drawable/news_main"/>  
  6. </selector>  

selector-color-demo

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- 设置TextView文字按下效果：创建res/color，放置当前文件 -->  
  3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  4.   
  5.     <item android:state_pressed="true" android:color="#FF1493"/>  
  6.     <item android:state_pressed="false" android:color="#C71585"/>  
  7.   
  8. </selector>  

layer-list标签

layer-list标签实现背景阴影效果，具体代码如下：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- layer-list设置图层效果：每一个item是一张图层，从下往上叠放 -->  
  3. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  4.   
  5.     <!-- 阴影部分 -->  
  6.     <!-- 个人觉得更形象的表达：top代表下边的阴影高度，left代表右边的阴影宽度。其实也就是相对应的offset，solid中的颜色是阴影的颜色，也可以设置角度等等 -->  
  7.     <item  
  8.         android:left="2dp"  
  9.         android:top="2dp">  
  10.         <shape android:shape="rectangle" >  
  11.             <gradient  
  12.                 android:angle="270"  
  13.                 android:endColor="#0F000000"  
  14.                 android:startColor="#0F000000" />  
  15.   
  16.             <corners  
  17.                 android:bottomLeftRadius="6dip"  
  18.                 android:bottomRightRadius="6dip"  
  19.                 android:topLeftRadius="6dip"  
  20.                 android:topRightRadius="6dip" />  
  21.         </shape>  
  22.     </item>  
  23.   
  24.     <!-- 背景部分 -->  
  25.     <!-- 形象的表达：bottom代表背景部分在上边缘超出阴影的高度，right代表背景部分在左边超出阴影的宽度（相对应的offset） -->  
  26.     <item  
  27.         android:bottom="3dp"  
  28.         android:right="3dp">  
  29.         <shape android:shape="rectangle" >  
  30.             <gradient  
  31.                 android:angle="270"  
  32.                 android:endColor="#FFFFFF"  
  33.                 android:startColor="#FFFFFF" />  
  34.   
  35.             <corners  
  36.                 android:bottomLeftRadius="6dip"  
  37.                 android:bottomRightRadius="6dip"  
  38.                 android:topLeftRadius="6dip"  
  39.                 android:topRightRadius="6dip" />  
  40.         </shape>  
  41.     </item>  
  42.   
  43. </layer-list>  

shadow-effect

item标签

item标签结合其它标签一起使用，实现：selector标签文字按下效果 背景按下效果（参考上文） ，layer-list标签背景阴影效果（参考上文），animation-list标签多图动画效果，具体代码：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- animation-list设置多张图动画效果： -->  
  3. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:oneshot="false" >  
  5.   
  6.     <item  
  7.         android:drawable="@drawable/img001"  
  8.         android:duration="60">  
  9.     </item>  
  10.     <item  
  11.         android:drawable="@drawable/img002"  
  12.         android:duration="60">  
  13.     </item>  
  14.     <item  
  15.         android:drawable="@drawable/img003"  
  16.         android:duration="60">  
  17.     </item>  
  18.     <item  
  19.         android:drawable="@drawable/img004"  
  20.         android:duration="60">  
  21.     </item>  
  22.     <item  
  23.         android:drawable="@drawable/img005"  
  24.         android:duration="60">  
  25.     </item>  
  26.     <item  
  27.         android:drawable="@drawable/img006"  
  28.         android:duration="60">  
  29.     </item>  
  30.   
  31. </animation-list>   
  1. <TextView  
  2.         android:id="@+id/zhaolinit_anim_tv"  
  3.         android:layout_width="match_parent"  
  4.         android:layout_height="40dp"  
  5.         android:background="@drawable/item_two"/>  
  1. //设置动画  
  2. AnimationDrawable anim=(AnimationDrawable) mTextView.getBackground();  
  3. //默认启动  
  4. anim.start();  

三 anim文件夹下的xml

anim文件夹和drawable文件夹一样，名称唯一，不允许写错或拼错，该文件夹下的xml文件实现渐变动画 缩放动画 平移动画 旋转动画 多图动画效果，对应的根标签分别：alpha scale translate rotate animation-list

alpha标签

android:interpolator=""设置平滑的动画效果；android:repeatCount="infinite"设置无限循环，默认执行一次，具体代码：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <alpha xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:duration="2000"  
  4.     android:fromAlpha="0"  
  5.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
  6.     android:repeatCount="infinite"  
  7.     android:toAlpha="1" >  
  8.   
  9. </alpha>  
  1. private void startAlphaAnim() {  
  2.         Animation anim=AnimationUtils.loadAnimation(this, R.anim.alpha_anim);  
  3.         mTextView.startAnimation(anim);  
  4.     }  

alpha-anim-demo

scale标签

android:fromXScale=""设置X缩放之前值，取值float/dimension/fraction； android:toXScale=""设置X缩放之后值，取值float/dimension/fraction；同理，android:fromYScale=""设置Y缩放之前值，取值float/dimension/fraction； android:toYScale=""设置Y缩放之后值，取值float/dimension/fraction

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <scale xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:duration="2000"  
  4.     android:fromXScale="50%"  
  5.     android:fromYScale="1"  
  6.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
  7.     android:repeatCount="infinite"  
  8.     android:toXScale="100%"  
  9.     android:toYScale="2" >  
  10.   
  11. </scale>  
  1. private void startScaleAnim() {  
  2.         Animation anim=AnimationUtils.loadAnimation(this, R.anim.scale_anim);  
  3.         mTextView.startAnimation(anim);  
  4.     }  

scale-anim-demo

translate标签

android:fromXDelta=""设置X轴平移之前值，取值float/fraction； android:toXDelta=""设置X轴平移之后值，取值float/fraction；android:repeatMode=""设置动画反转，取值reverse restart，默认restart

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <translate xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:duration="2000"  
  4.     android:fromXDelta="0"  
  5.     android:fromYDelta="0"  
  6.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
  7.     android:repeatCount="infinite"  
  8.     android:repeatMode="reverse"  
  9.     android:toXDelta="320"  
  10.     android:toYDelta="0" >  
  11.   
  12. </translate>  
  1. private void startTranslateAnim() {  
  2.         Animation anim=AnimationUtils.loadAnimation(this, R.anim.translate_anim);  
  3.         mTextView.startAnimation(anim);  
  4.           
  5.     }  

translate-anim-demo

rotate标签

android:fromDegrees=""设置动画旋转之前值，取值float；android:toDegrees=""设置动画旋转之后值，取值float； android:pivotX=""设置X轴轴心，取值float/fraction；android:pivotY=""设置Y轴轴心，取值float/fraction；

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:duration="2000"  
  4.     android:fromDegrees="0"  
  5.     android:interpolator="@android:anim/accelerate_interpolator"  
  6.     android:pivotX="50%"  
  7.     android:pivotY="50%"  
  8.     android:repeatCount="infinite"  
  9.     android:repeatMode="reverse"  
  10.     android:toDegrees="180" >  
  11.   
  12. </rotate>  
  1. private void startRotateAnim() {  
  2.         Animation anim=AnimationUtils.loadAnimation(this, R.anim.rotate_anim);  
  3.         mTextView.startAnimation(anim);  
  4.           
  5.     }  

rotate-anim-demo

animation-list标签

animation-list设置多张图动画效果，android:drawable=""设置图片资源；android:duration=""设置切换时间间隔

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:oneshot="false" >  
  4.   
  5.     <item  
  6.         android:drawable="@drawable/beautiful_girl_1"  
  7.         android:duration="4000">  
  8.     </item>  
  9.     <item  
  10.         android:drawable="@drawable/beautiful_girl_2"  
  11.         android:duration="4000">  
  12.     </item>  
  13.     <item  
  14.         android:drawable="@drawable/beautiful_girl_3"  
  15.         android:duration="4000">  
  16.     </item>  
  17. </animation-list>   
  1. private void startAnimList() {  
  2.         AnimationDrawable anim=(AnimationDrawable) mTextView.getBackground();  
  3.         anim.start();  
  4.     }  

anim-list-demo

set标签

set同时添加渐变动画/旋转动画或缩放动画/平移动画

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set>  
  3.   
  4.     <alpha  
  5.         xmlns:android="http://schemas.android.com/apk/res/android"  
  6.         android:duration="2000"  
  7.         android:fromAlpha="0"  
  8.         android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
  9.         android:repeatCount="infinite"  
  10.         android:toAlpha="1" >  
  11.     </alpha>  
  12.   
  13.     <translate  
  14.         xmlns:android="http://schemas.android.com/apk/res/android"  
  15.         android:duration="2000"  
  16.         android:fromXDelta="0"  
  17.         android:fromYDelta="0"  
  18.         android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
  19.         android:repeatCount="infinite"  
  20.         android:repeatMode="reverse"  
  21.         android:toXDelta="320"  
  22.         android:toYDelta="0" >  
  23.     </translate>  
  24.   
  25. </set>  
  1. private void startSetAnim() {  
  2.         Animation anim=AnimationUtils.loadAnimation(this, R.anim.set_anim);  
  3.         mTextView.startAnimation(anim);  
  4.     }  

set-anim-demo

四 color文件夹下的xml

color/anim/drawable这三个文件夹的名称唯一，不允许写错，否则编译不通过，color文件夹下的xml实现文字颜色切换效果（包括按下/点击/经过/选中等状态），包括的根标签有：item selector

item标签和selector标签

item标签和selector标签结合使用实现点击按钮背景/文字变化效果，具体代码如下：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--res/color/selector_item_color.xml-->  
  3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  4.   
  5.     <item android:state_pressed="false" android:color="#FF1493"/>  
  6.     <item android:state_pressed="true" android:color="#DC143C"/>  
  7.   
  8. </selector>  
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--res/drawable/selector_item_draw.xml-->  
  3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  4.   
  5.     <item android:drawable="@drawable/green_bg" android:state_pressed="true"/>  
  6.     <item android:drawable="@drawable/blue_bg" android:state_pressed="false"/>  
  7.   
  8. </selector>  
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--res/drawable/green_bg.xml-->  
  3. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
  4.   
  5.     <corners android:radius="5dp" />  
  6.   
  7.     <solid android:color="#32CD32" />  
  8.   
  9. </shape>  
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--res/drawable/blue_bg.xml-->  
  3. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:shape="rectangle" >  
  5.   
  6.     <corners android:radius="5dp" />  
  7.   
  8.     <solid android:color="#6495ED" />  
  9.   
  10. </shape>  

selector-item-demo

你可能感兴趣的文章

来源：TeachCourse， 每周一次，深入学习Android教程，关注（QQ158#9359$239或公众号TeachCourse）
转载请注明出处： https://www.teachcourse.cn/1635.html ，谢谢支持！

资源分享

分类：Android Studio, Android基础 标签：, , ,
性能优化实践二 性能优化实践二
十一种错误的避孕观念 十一种错误的避孕观念
Android Debug Bridge Android Debug Bridge
Android开发之枚举（Enum）在实际项目中的应用 Android开发之枚举（Enum）在实