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

2016-04-09 13:00 评论 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

当前文章价值8.07元,扫一扫支付后添加微信提供帮助!(如不能解决您的问题,可以申请退款)

你可能感兴趣的文章

来源:每日教程每日一例,深入学习实用技术教程,关注公众号TeachCourse
转载请注明出处: https://www.teachcourse.cn/1635.html ,谢谢支持!

资源分享

三步帮你快速集成友盟消息推送功能 三步帮你快速集成友盟消息推送功
Android事件分发流程分析证明(1) Android事件分发流程分析证明(
如何使用手机支付给羊城通充值 如何使用手机支付给羊城通充值
IntentService,你了解的多少? IntentService,你了解的多少?