Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)

  开始今天的主题,控件渲染Shade(也可以叫着色器)的使用,一直都有在关注这方面的东西,网上也有部分文章写得不错,但是还是觉得不过瘾,往往都是写一点点自己在工作中使用过的,有看到过很多人经典问这个边框那个边框的,呵呵,今天就总结下这方面的东西,希望对这块知识有兴趣的帅果、美驴们有所帮助或提高,也备自己不时之用,果断先看效果再一步步看代码!希望大家仔细看看我在XML及.java中添加的注释,相信你不会后悔花时间在这文章上的,今天的DEMO效果图如下:

Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)

  工程目录结构如下,由于太长的原因,部分已缩进:

Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)

  好了,效果看完了,下一步开始看代码吧,亲…….静下心….一步步来!!!     PS:模拟器与eclipse效果中

  预览的以下部分有点不一样,可能是eclipse与模拟器二者之前存在Bug吧…吼吼….

  首先,先做个小小的铺垫:

  Android提供的Shader类主要是渲染图像以及一些几何图形。

  Shader有几个直接子类:

  BitmapShader    : 主要用来渲染图像

  LinearGradient  :用来进行线性渲染

  RadialGradient  : 用来进行环形渲染

  SweepGradient   : 扫描渐变—围绕一个中心点扫描渐变就像电影里那种雷达扫描,用来梯度渲染。

  ComposeShader   : 组合渲染,可以和其他几个子类组合起来使用。

  小记:Android控件渲染Shade的实现方式有两种,(一、JAVA代码实现;二、XML配置来实现),

  自己比较偏向XML实现,原因很简单:

  1.你代码实现写得再经典,不跑起来效果看不到!

  2.跑一遍Android模拟器,思路可以断一大节!(我很笨,经常这样 T_T)!

  3.JAVA代码的每个函数参数你也得一个个去啃(老板管效率,不管怎么实现,等你啃完参数时,XML已经看到效果了 O_o  ……走起…..)!

  4.这是最主要的一点,Eclipse或者I/O大会刚推出的Android Studio,实时显示,我就特别喜欢 立竿见影 ^_^ !

  5.二者各有利弊,JAVA代码实现可以动态且灵活滴,XML配置的统一但不杂乱 @_@!!

  Now……..   Ladies and 乡亲们,看举一种JAVA代码excmple,其余类型的与之类似,亲们自己“度娘 、谷哥 ”:

  LinearGradient是线性渐变,用法如下:

  Gradient是基于Shader类,所以我们通过Paint的setShader方法来设置这个渐变,代码如下:

  Paint p=new Paint();

  LinearGradient lg=newLinearGradien(0,0,100,100,Color.RED,Color.BLUE,Shader.TileMode.MIRROR);

  Gradient是基于Shader类,所以我们通过Paint的setShader方法来设置这个渐变,代码如下:

  p.setShader(lg);

  canvas.drawCicle(0,0,200,p); //参数3为画圆的半径,类型为float型。

  先不说效果了,PS:看着上面的代码,有没有想哭的冲动啊 ? ? ?感觉乱乱的,不知道是什么,然后单词gradient不懂,一查如下(晕),看着挺牛,还是只是个渲染!不管了,继续往下看…

  再看XML布局文件代码:

  一:主布局文件代码如下(为了方便,布局是直接拖的,大家不用太关注):

XML/HTML代码
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="@drawable/background"  
  6.     android:paddingBottom="@dimen/activity_vertical_margin"  
  7.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  8.     android:paddingRight="@dimen/activity_horizontal_margin"  
  9.     android:paddingTop="@dimen/activity_vertical_margin"  
  10.     tools:context=".MainActivity" >  
  11.    
  12.     <com.xiaoma.shadedemo.TextViewBorder  
  13.         android:id="@+id/textView1"  
  14.         android:layout_width="wrap_content"  
  15.         android:layout_height="wrap_content"  
  16.         android:layout_alignParentLeft="true"  
  17.         android:layout_alignParentTop="true"  
  18.         android:layout_marginLeft="22dp"  
  19.         android:layout_marginTop="20dp"  
  20.         android:text=" JAVA实现带四条边框"  
  21.         android:textColor="@android:color/white"  
  22.         android:textSize="25sp" />  
  23.    
  24.     <com.xiaoma.shadedemo.TextViewBorderLeftRight  
  25.         android:id="@+id/TextViewBorder01"  
  26.         android:layout_width="wrap_content"  
  27.         android:layout_height="wrap_content"  
  28.         android:textColor="@android:color/white"  
  29.         android:layout_alignLeft="@+id/textView1"  
  30.         android:layout_below="@+id/textView1"  
  31.         android:layout_marginTop="20dp"  
  32.         android:text="JAVA实现带左右边框"  
  33.         android:textSize="25sp" />  
  34.    
  35.     <com.xiaoma.shadedemo.TextViewBorderUnder  
  36.         android:id="@+id/TextViewBorder02"  
  37.         android:layout_width="wrap_content"  
  38.         android:layout_height="wrap_content"  
  39.         android:layout_alignLeft="@+id/TextViewBorder01"  
  40.         android:textColor="@android:color/white"  
  41.         android:layout_below="@+id/TextViewBorder01"  
  42.         android:layout_marginTop="33dp"  
  43.         android:text="JAVA代码实现下边框"  
  44.         android:textSize="25sp" />  
  45.    
  46.     <TextView  
  47.         android:id="@+id/TextViewBorderUnder01"  
  48.         android:layout_width="wrap_content"  
  49.         android:layout_height="wrap_content"  
  50.         android:layout_alignLeft="@+id/button1"  
  51.         android:layout_below="@+id/TextViewBorder02"  
  52.         android:layout_marginTop="20dp"  
  53.         android:text="Shape XML实现边框"  
  54.         android:background="@drawable/shape_test"  
  55.         android:textColor="@android:color/white"  
  56.         android:textSize="25sp" />  
  57.    
  58.     <Button  
  59.         android:id="@+id/button1"  
  60.         android:layout_width="wrap_content"  
  61.         android:layout_height="wrap_content"  
  62.         android:layout_alignLeft="@+id/TextViewBorder02"  
  63.         android:layout_below="@+id/TextViewBorderUnder01"  
  64.         android:layout_marginTop="29dp"  
  65.         android:background="@drawable/shape_selector"  
  66.         android:text="Selector与Shape混用按钮"  
  67.         android:textColor="@android:color/black" />  
  68.    
  69. </RelativeLayout>  

  二:上面布局中使用的自定义控件代码及Shape渲染代码分别如下:

  2.1:JAVA实现带四条边框(自定义TextView JAVA代码一)

Java代码
  1. package com.xiaoma.shadedemo;  
  2.    
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.graphics.Color;  
  6. import android.graphics.Paint;  
  7. import android.util.AttributeSet;  
  8. import android.widget.TextView;  
  9.    
  10. public class TextViewBorder extends TextView  
  11. {  
  12.    
  13.     /** 
  14.      * 下面两个方法在构造时需注意: 一:如果是XML文件加载的方式使用自定义控件到布局中是用以下方式, 二:如果是用纯代码的方式加载自定义的控制到而已中时用第二种方式 
  15.      */  
  16.    
  17.     // 方式一:  
  18.     public TextViewBorder(Context context, AttributeSet attrs)  
  19.     {  
  20.         super(context, attrs);  
  21.     }  
  22.    
  23.     // 方式二:  
  24.     /* 
  25.      * public TextViewBorder(Context context) { // TODO Auto-generated constructor stub super(context); } 
  26.      */  
  27.    
  28.     /** 
  29.      * 1. Rect对象 一个区域对象Rect(left, top, right, bottom) , 是一个左闭右开的区域, 即是说使用 Rect.contains(left, top)为true, 
  30.      * Rect.contains(right, bottom)为false 2. drawLine方法 drawLine(float startX, float startY, float stopX, float stopY, 
  31.      * Paint paint) 也是一个左闭右开的区间,只会绘制到stopX-1,stopY-1 3. drawRect(Rect r, Paint paint) 当绘制空心矩形时,绘制的是一个左闭右闭的区域 
  32.      * 验证方法:下面就是可以验证左闭右开的区间方法,现在知道为什么要-1 了 
  33.      */  
  34.    
  35.     @Override  
  36.     protected void onDraw(Canvas canvas)  
  37.     {  
  38.         super.onDraw(canvas);  
  39.    
  40.         Paint paint = new Paint();  
  41.    
  42.         paint.setAntiAlias(true);  
  43.    
  44.         paint.setColor(Color.GREEN);  
  45.    
  46.         canvas.drawLine(00this.getWidth() – 10, paint);// 绘制上边框  
  47.    
  48.         canvas.drawLine(000this.getHeight() – 1, paint); // 绘制左边框  
  49.    
  50.         canvas.drawLine(this.getWidth() – 10this.getWidth() – 1this.getHeight() – 1, paint); // 绘制右边框  
  51.    
  52.         canvas.drawLine(0this.getHeight() – 1this.getWidth() – 1this.getHeight() – 1, paint);// 绘制下边框  
  53.    
  54.     }  
  55.    
  56.     /* 
  57.      * 1. Rect对象 
  58.      *  
  59.      * 一个区域对象Rect(left, top, right, bottom) , 是一个左闭右开的区域,即是说使用 Rect.contains(left, top)为true, Rect.contains(right, 
  60.      * bottom)为false 
  61.      *  
  62.      * 2.drawLine方法 
  63.      *  
  64.      * drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 也是一个左闭右开的区间,只会绘制到stopX-1,stopY-1 
  65.      *  
  66.      * 验证方法: 
  67.      *  
  68.      * Canvas c = canvas; paint.setColor(Color.RED); c.drawLine(x, y, x+c.getWidth()-1, y, paint); c.drawLine(x, 
  69.      * y+height-1, x+c.getWidth(), y+height-1, paint); paint.setColor(Color.BLUE); c.drawPoint(x+c.getWidth()-1, y, 
  70.      * paint); 说明drawLine是没有绘制到右边最后一个点的 
  71.      *  
  72.      * 3.drawRect(Rect r, Paint paint) 
  73.      *  
  74.      * 当绘制空心矩形时,绘制的是一个左闭右闭的区域 
  75.      *  
  76.      * 验证方法: 
  77.      *  
  78.      * rect.set(x, y, x+width, y+height); paint.setStyle(Style.STROKE); paint.setColor(Color.BLUE); c.drawRect(rect, 
  79.      * paint); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x, y+height, x+width, 
  80.      * y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width, y+height, paint); 
  81.      * 当绘制实心矩形时,绘制的是一个左闭右开的区域 
  82.      *  
  83.      * 验证方法: 
  84.      *  
  85.      * rect.set(x, y, x+width, y+height); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x, 
  86.      * y+height, x+width, y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width, 
  87.      * y+height, paint); paint.setStyle(Style.FILL); paint.setColor(Color.BLUE); c.drawRect(rect, paint); 
  88.      * 这个规则跟j2me也是一样的,在j2me里,drawRect长宽会多画出1px。SDK的说明是: 
  89.      *  
  90.      * The resulting rectangle will cover an area (width + 1) pixels wide by (height + 1) pixels tall. If either width 
  91.      * or height is less than zero, nothing is drawn. 
  92.      *  
  93.      * 例如drawRect(10,10,100,1)绘制,结果是一个2px高的矩形,用fillRect(10,10,100,1),结果是一个1px高的矩形 
  94.      *  
  95.      * 以上就是对Android绘图的具体介绍。 
  96.      */  
  97.    
  98. }  
  99.    
  100. /** 
  101.  * 在布局文件中引用 这样引用就行了..吼吼 <com.xiaoma.shadedemo.TextViewBorder android:id="@+id/a02_txtKSSJ" android:textColor="#000000" 
  102.  * android:layout_marginLeft="10dip" android:layout_width="100dip" android:layout_height="wrap_content" /> 
  103.  */  

  2.2:JAVA实现带左右边框(自定义TextView JAVA代码二)

Java代码
  1. package com.xiaoma.shadedemo;  
  2.    
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.graphics.Color;  
  6. import android.graphics.Paint;  
  7. import android.util.AttributeSet;  
  8. import android.widget.TextView;  
  9.    
  10. public class TextViewBorderLeftRight extends TextView  
  11. {  
  12.    
  13.     /** 
  14.      * 下面两个方法在构造时需注意: 一:如果是XML文件加载的方式使用自定义控件到布局中是用以下方式, 二:如果是用纯代码的方式加载自定义的控制到而已中时用第二种方式 
  15.      */  
  16.    
  17.     // 方式一:  
  18.     public TextViewBorderLeftRight(Context context, AttributeSet attrs)  
  19.     {  
  20.         super(context, attrs);  
  21.     }  
  22.    
  23.     // 方式二:  
  24.     /* 
  25.      * public TextViewBorder(Context context) { // TODO Auto-generated constructor stub super(context); } 
  26.      */  
  27.    
  28.     /** 
  29.      * 1. Rect对象 一个区域对象Rect(left, top, right, bottom) , 是一个左闭右开的区域, 即是说使用 Rect.contains(left, top)为true, 
  30.      * Rect.contains(right, bottom)为false 2. drawLine方法 drawLine(float startX, float startY, float stopX, float stopY, 
  31.      * Paint paint) 也是一个左闭右开的区间,只会绘制到stopX-1,stopY-1 3. drawRect(Rect r, Paint paint) 当绘制空心矩形时,绘制的是一个左闭右闭的区域 
  32.      * 验证方法:下面就是可以验证左闭右开的区间方法,现在知道为什么要-1 了 
  33.      */  
  34.    
  35.     @Override  
  36.     protected void onDraw(Canvas canvas)  
  37.     {  
  38.         super.onDraw(canvas);  
  39.    
  40.         Paint paint = new Paint();  
  41.    
  42.         paint.setAntiAlias(true);  
  43.    
  44.         paint.setColor(Color.GREEN);  
  45.    
  46.         canvas.drawLine(000, getHeight(), paint);  
  47.    
  48.         // canvas.drawLine(getWidth(), 0, getWidth() – 1, getHeight() – 1, paint);  
  49.         canvas.drawLine(this.getWidth() – 10this.getWidth() – 1this.getHeight() – 1, paint);  
  50.    
  51.         // canvas.drawLine(0, 0, 0, this.getHeight() – 1, paint);  
  52.    
  53.         // canvas.drawLine(this.getWidth() – 1, 0, this.getWidth() – 1, this.getHeight() – 1, paint);  
  54.    
  55.         // canvas.drawLine(0, this.getHeight() – 1, this.getWidth() – 1, this.getHeight() – 1, paint);  
  56.    
  57.     }  
  58.     /* 
  59.      * 1. Rect对象 
  60.      *  
  61.      * 一个区域对象Rect(left, top, right, bottom) , 是一个左闭右开的区域,即是说使用 Rect.contains(left, top)为true, Rect.contains(right, 
  62.      * bottom)为false 
  63.      *  
  64.      * 2.drawLine方法 
  65.      *  
  66.      * drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 也是一个左闭右开的区间,只会绘制到stopX-1,stopY-1 
  67.      *  
  68.      * 验证方法: 
  69.      *  
  70.      * Canvas c = canvas; paint.setColor(Color.RED); c.drawLine(x, y, x+c.getWidth()-1, y, paint); c.drawLine(x, 
  71.      * y+height-1, x+c.getWidth(), y+height-1, paint); paint.setColor(Color.BLUE); c.drawPoint(x+c.getWidth()-1, y, 
  72.      * paint); 说明drawLine是没有绘制到右边最后一个点的 
  73.      *  
  74.      * 3.drawRect(Rect r, Paint paint) 
  75.      *  
  76.      * 当绘制空心矩形时,绘制的是一个左闭右闭的区域 
  77.      *  
  78.      * 验证方法: 
  79.      *  
  80.      * rect.set(x, y, x+width, y+height); paint.setStyle(Style.STROKE); paint.setColor(Color.BLUE); c.drawRect(rect, 
  81.      * paint); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x, y+height, x+width, 
  82.      * y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width, y+height, paint); 
  83.      * 当绘制实心矩形时,绘制的是一个左闭右开的区域 
  84.      *  
  85.      * 验证方法: 
  86.      *  
  87.      * rect.set(x, y, x+width, y+height); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x, 
  88.      * y+height, x+width, y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width, 
  89.      * y+height, paint); paint.setStyle(Style.FILL); paint.setColor(Color.BLUE); c.drawRect(rect, paint); 
  90.      * 这个规则跟j2me也是一样的,在j2me里,drawRect长宽会多画出1px。SDK的说明是: 
  91.      *  
  92.      * The resulting rectangle will cover an area (width + 1) pixels wide by (height + 1) pixels tall. If either width 
  93.      * or height is less than zero, nothing is drawn. 
  94.      *  
  95.      * 例如drawRect(10,10,100,1)绘制,结果是一个2px高的矩形,用fillRect(10,10,100,1),结果是一个1px高的矩形 
  96.      *  
  97.      * 以上就是对Android绘图的具体介绍。 
  98.      */  
  99.    
  100. }  
  101.    
  102. /** 
  103.  * 在布局文件中引用 这样引用就行了..吼吼 <com.xiaoma.shadedemo.TextViewBorder android:id="@+id/a02_txtKSSJ" android:textColor="#000000" 
  104.  * android:layout_marginLeft="10dip" android:layout_width="100dip" android:layout_height="wrap_content" /> 
  105.  */  

  2.3:JAVA代码实现下边框(自定义TextView JAVA代码三)

Java代码
  1. package com.xiaoma.shadedemo;  
  2.    
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.graphics.Color;  
  6. import android.graphics.Paint;  
  7. import android.util.AttributeSet;  
  8. import android.widget.TextView;  
  9.    
  10. public class TextViewBorderUnder extends TextView  
  11. {  
  12.    
  13.     /** 
  14.      * 下面两个方法在构造时需注意: 一:如果是XML文件加载的方式使用自定义控件到布局中是用以下方式, 二:如果是用纯代码的方式加载自定义的控制到而已中时用第二种方式 
  15.      */  
  16.    
  17.     // 方式一:  
  18.     public TextViewBorderUnder(Context context, AttributeSet attrs)  
  19.     {  
  20.         super(context, attrs);  
  21.     }  
  22.    
  23.     // 方式二:  
  24.     /* 
  25.      * public TextViewBorder(Context context) { // TODO Auto-generated constructor stub super(context); } 
  26.      */  
  27.    
  28.     /** 
  29.      * 1. Rect对象 一个区域对象Rect(left, top, right, bottom) , 是一个左闭右开的区域, 即是说使用 Rect.contains(left, top)为true, 
  30.      * Rect.contains(right, bottom)为false 2. drawLine方法 drawLine(float startX, float startY, float stopX, float stopY, 
  31.      * Paint paint) 也是一个左闭右开的区间,只会绘制到stopX-1,stopY-1 3. drawRect(Rect r, Paint paint) 当绘制空心矩形时,绘制的是一个左闭右闭的区域 
  32.      * 验证方法:下面就是可以验证左闭右开的区间方法,现在知道为什么要-1 了 
  33.      */  
  34.    
  35.     @Override  
  36.     protected void onDraw(Canvas canvas)  
  37.     {  
  38.         super.onDraw(canvas);  
  39.    
  40.         Paint paint = new Paint();  
  41.    
  42.         paint.setAntiAlias(true);  
  43.    
  44.         paint.setColor(Color.GREEN);  
  45.    
  46.         // canvas.drawLine(0, 0, this.getWidth() – 1, 0, paint);  
  47.    
  48.         // canvas.drawLine(0, getHeight(), getWidth() – 1, getHeight(), paint);  
  49.    
  50.         // canvas.drawLine(this.getWidth() – 1, 0, this.getWidth() – 1, this.getHeight() – 1, paint);  
  51.    
  52.         canvas.drawLine(0, getHeight() – 1, getWidth() – 1, getHeight() – 1, paint);  
  53.    
  54.     }  
  55.    
  56.     /* 
  57.      * 1. Rect对象 
  58.      *  
  59.      * 一个区域对象Rect(left, top, right, bottom) , 是一个左闭右开的区域,即是说使用 Rect.contains(left, top)为true, Rect.contains(right, 
  60.      * bottom)为false 
  61.      *  
  62.      * 2.drawLine方法 
  63.      *  
  64.      * drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 也是一个左闭右开的区间,只会绘制到stopX-1,stopY-1 
  65.      *  
  66.      * 验证方法: 
  67.      *  
  68.      * Canvas c = canvas; paint.setColor(Color.RED); c.drawLine(x, y, x+c.getWidth()-1, y, paint); c.drawLine(x, 
  69.      * y+height-1, x+c.getWidth(), y+height-1, paint); paint.setColor(Color.BLUE); c.drawPoint(x+c.getWidth()-1, y, 
  70.      * paint); 说明drawLine是没有绘制到右边最后一个点的 
  71.      *  
  72.      * 3.drawRect(Rect r, Paint paint) 
  73.      *  
  74.      * 当绘制空心矩形时,绘制的是一个左闭右闭的区域 
  75.      *  
  76.      * 验证方法: 
  77.      *  
  78.      * rect.set(x, y, x+width, y+height); paint.setStyle(Style.STROKE); paint.setColor(Color.BLUE); c.drawRect(rect, 
  79.      * paint); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x, y+height, x+width, 
  80.      * y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width, y+height, paint); 
  81.      * 当绘制实心矩形时,绘制的是一个左闭右开的区域 
  82.      *  
  83.      * 验证方法: 
  84.      *  
  85.      * rect.set(x, y, x+width, y+height); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x, 
  86.      * y+height, x+width, y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width, 
  87.      * y+height, paint); paint.setStyle(Style.FILL); paint.setColor(Color.BLUE); c.drawRect(rect, paint); 
  88.      * 这个规则跟j2me也是一样的,在j2me里,drawRect长宽会多画出1px。SDK的说明是: 
  89.      *  
  90.      * The resulting rectangle will cover an area (width + 1) pixels wide by (height + 1) pixels tall. If either width 
  91.      * or height is less than zero, nothing is drawn. 
  92.      *  
  93.      * 例如drawRect(10,10,100,1)绘制,结果是一个2px高的矩形,用fillRect(10,10,100,1),结果是一个1px高的矩形 
  94.      *  
  95.      * 以上就是对Android绘图的具体介绍。 
  96.      */  
  97.    
  98. }  
  99.    
  100. /** 
  101.  * 在布局文件中引用 这样引用就行了..吼吼 <com.xiaoma.shadedemo.TextViewBorder android:id="@+id/a02_txtKSSJ" android:textColor="#000000" 
  102.  * android:layout_marginLeft="10dip" android:layout_width="100dip" android:layout_height="wrap_content" /> 
  103.  */  

  2.4:Shape XML实现边框(XML代码)

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.    
  4.     <!– <solid  android:color="#cceeff"/>   直接写这个的话,可以给控制添加一个整体的背景哦 –>  
  5.     <stroke  
  6.         android:width="0.5dp"  
  7.         android:color="#22ccff" />  
  8.    
  9.     <padding  android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp"/>  
  10.    
  11.     <size  
  12.         android:height="0.5dp"  
  13.         android:width="5dp" />  
  14.  <!– 目前没有什么用,可删除,留在这个地方防止乱猜 –>  
  15.    
  16.     <corners android:radius="10dp" />  
  17.  <!– 这个radius里面的值需要个整型,单位用dp,用其它单位亦无影响 –>  
  18.    
  19. </shape>  

  2.5:Selector与Shape混用控件效果实现

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.    
  4.     <!– 今天主要讲的是shape渲染,shape主要类型分四种,效果如下,我们常用rectangle,也就是矩形渲染,其它的都太丑了!! –>  
  5.    
  6.     <item android:state_pressed="true"> <!–按钮按下时的渲染效果 –>  
  7.             <shape android:shape="oval">   
  8.    
  9.                 <corners android:radius="10dp" /> <!– 四个角的角度 –>  
  10.    
  11.                 <!–gradient就是梯度渲染,简单说就是颜色渐变,type为渐变方式,总共三种 linear sweep  ridial,常用linear–>  
  12.                 <gradient android:endColor="#eebbbb" android:startColor="#9900ee" android:type="linear" />  
  13.    
  14.                 <!– padding属性是指定内容与控件边距,这个地方小马专门将距左边距设置较大,方便观察 –>  
  15.                 <padding android:bottom="5dp" android:left="20dp" android:right="5dp" android:top="5dp" />  
  16.    
  17.                 <!– solid填充整个区域,颜色为FFDDFF,如果使用整个区域填充的话,上面的gradient梯度会失效,即:覆盖 –>  
  18.                 <!– <solid  android:color="#FFDDFF"/> –>  
  19.    
  20.                 <!– stroke为需要填充的边框,指定颜色及边框宽度  –>  
  21.                 <stroke android:width="3dp" android:color="#000000" />  
  22.             </shape>  
  23.    
  24.         <!– <clip android:clipOrientation="vertical" android:gravity="right" android:drawable="@drawable/ic_launcher" /> –><!– 试了下没用 –>  
  25.         <!– <color android:color="#223344"/> –>  
  26.         <!– <scale android:scaleWidth="15dp" android:scaleHeight=" 5dp" android:scaleGravity="center" /> –>  
  27.    
  28.      </item>  
  29.    
  30.     <item> <!– 默认 –>  
  31.             <shape android:shape="rectangle">   
  32.    
  33.                 <corners android:radius="10dp" /> <!– 四个角的角度 –>  
  34.    
  35.                 <!–gradient就是梯度渲染,简单说就是颜色渐变,type为渐变方式,总共三种 linear sweep  ridial,常用linear–>  
  36.                 <!– 这个地方一定注意,在使用gradient标签中使用android:type的前提是必须android:gradientRadius="20dp"已经设置,否则会报错 –>  
  37.                 <gradient android:endColor="#acefda" android:startColor="#0099ff" android:type="linear" />  
  38.    
  39.                 <!– padding属性是指定内容与控件边距,这个地方小马专门将距左边距设置较大,方便观察 –>  
  40.                 <padding android:bottom="5dp" android:left="20dp" android:right="5dp" android:top="5dp" />  
  41.    
  42.                 <!– solid填充整个区域,颜色为FFDDFF,如果使用整个区域填充的话,上面的gradient梯度会失效,即:覆盖 –>  
  43.                 <!– <solid  android:color="#FFDDFF"/> –>  
  44.    
  45.                 <!– stroke为需要填充的边框,指定颜色及边框宽度  –>  
  46.                 <stroke android:width="3dp" android:color="#000000" />  
  47.             </shape>  
  48.      </item>  
  49.    
  50. </selector>  

  怎么样?看着JAVA自定义TextView代码是不是觉得特别的繁琐?今天的主题就是来解决这个问题的….…^_^………下面着重来讲一下Selector与Shape混用控件效果Selector实现的细节,(请仔细看下XML里面的注释 O_O)

  每个Item过是由Shape来进行渲染生成最终的效果,首先来看根Shape节点的常用属性<shape android:shape=”rectangle”>:

  这个shape属性总共分三种 rectangle(矩形)、oval(椭圆) 、line(删除线)、ring(铃,这个存在不知道有什么意义),其效果分别如下:

  1.rectangle

Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)

  2.oval

Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)

  3.line

Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)

  4.ring

Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)

  其中,gradient标签中的type为渐变方式,总共三种 linear sweep  ridial,常用linear,其效果分别为(注意:ridial试了无任何效果 T_T)

  1.linear效果

Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)

  2.sweep效果

Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)

  好了,代码及整体效果已经分解完毕了,如果认真从头到尾的看一边的话,肯定有所收获的,对了,以上的Shape渲染写好了,可以在任意控件上使用…不限于TextView,上面的例子只是拿TextView来开刀用的…大家别误会,呵呵….^_^…. ,最后,希望在文章中有什么不清楚或不明白或有错误的地方,请大家直接指出…有错必改的….这个源码已经上传到http://mzh3344258.blog.51cto.com/1823534/1215749最下面附件中,有兴趣或有用的朋友可以直接下载来跑跑改改看,有批评才有进步,希望有什么不好的,直接指出….在此先谢谢大家啦….

  官网参考链接如下(只是没效果图,所以大家也懒得去看这个东西)

  http://developer.android.com/guide/topics/resources/drawable-resource.html

 


android开发学习网 » Android应用开发教程之二十八:Android Shape渲染的使用(经典,学习研究不后悔)