Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Android應用開發教程之二十八:Android Shape渲染的使用(經典,學習研究不後悔)

Android應用開發教程之二十八:Android Shape渲染的使用(經典,學習研究不後悔)

編輯:關於android開發

  開始今天的主題,控件渲染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(0, 0, this.getWidth() - 1, 0, paint);// 繪制上邊框  
  47.    
  48.         canvas.drawLine(0, 0, 0, this.getHeight() - 1, paint); // 繪制左邊框  
  49.    
  50.         canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint); // 繪制右邊框  
  51.    
  52.         canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1, this.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(0, 0, 0, getHeight(), paint);  
  47.    
  48.         // canvas.drawLine(getWidth(), 0, getWidth() - 1, getHeight() - 1, paint);  
  49.         canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.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

 

  1. 上一頁:
  2. No
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved