Android Shape渲染的使用(經典,學習研究不後悔)


       感覺好久都沒有寫博文了,感覺自己變懶了,真對不起…-_-…   也有部分原因是因爲我想寫的東

西網上已經有了,再加上還有很多方面小馬我也正在學習,所以….這段時間一直暫停更新我的博客文

章,看到博客的訪問量一天天的增加,很開心 。。。O_O。。。這一陣子也看了各種各樣的書籍,技

術類的、非技術類的,也找到了自身很多的不足之處,我會用更多的心思來彌補不足,希望大家一起

努力、加油!


       以上是對自己講的一點廢話,現在開始今天的主題,控件渲染Shade(也可以叫着色器,但壞小

馬不喜歡這麼叫,着色器….怪怪的!)的使用,一直都有在關注這方面的東西,網上也有部分文章寫

得不錯,但是還是覺得不過癮,往往都是寫一點點自己在工作中使用過的,今天小馬就用點心總結下

這方面的東西,希望對這塊知識有興趣的帥果、美驢們有所幫助或提高,果斷先看效果再一步步看代

碼!希望大家仔細看看我在XML及.java中添加的註釋,相信你不會後悔花時間在這文章上的,今天的

DEMO效果圖如下:



好了,效果看完了,下一步開始看代碼吧,親…….靜下心….一步步來!!!


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配置代碼,如下:


一:主佈局文件代碼如下(爲了方便,佈局是直接拖的,大家不用太關注):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <com.xiaoma.shadedemo.TextViewBorder
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="20dp"
        android:text=" JAVA實現帶四條邊框"
        android:textColor="@android:color/white"
        android:textSize="25sp" />
    <com.xiaoma.shadedemo.TextViewBorderLeftRight
        android:id="@+id/TextViewBorder01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="20dp"
        android:text="JAVA實現帶左右邊框"
        android:textSize="25sp" />
    <com.xiaoma.shadedemo.TextViewBorderUnder
        android:id="@+id/TextViewBorder02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/TextViewBorder01"
        android:textColor="@android:color/white"
        android:layout_below="@+id/TextViewBorder01"
        android:layout_marginTop="33dp"
        android:text="JAVA代碼實現下邊框"
        android:textSize="25sp" />
    <TextView
        android:id="@+id/TextViewBorderUnder01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/TextViewBorder02"
        android:layout_marginTop="20dp"
        android:text="Shape XML實現邊框"
        android:background="@drawable/shape_test"
        android:textColor="@android:color/white"
        android:textSize="25sp" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/TextViewBorder02"
        android:layout_below="@+id/TextViewBorderUnder01"
        android:layout_marginTop="29dp"
        android:background="@drawable/shape_selector"
        android:text="Selector與Shape混用按鈕"
        android:textColor="@android:color/black" />
</RelativeLayout>



二:上面佈局中使用的自定義控件代碼及Shape渲染代碼分別如下:


   2.1:JAVA實現帶四條邊框(自定義TextView JAVA代碼一)

package com.xiaoma.shadedemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;
public class TextViewBorder extends TextView
{
                                                                                                                                                                 
    /**
     * 下面兩個方法在構造時需注意: 一:如果是XML文件加載的方式使用自定義控件到佈局中是用以下方式, 二:如果是用純代碼的方式加載自定義的控制到而已中時用第二種方式
     */
                                                                                                                                                                 
    // 方式一:
    public TextViewBorder(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
                                                                                                                                                                 
    // 方式二:
    /*
     * public TextViewBorder(Context context) { // TODO Auto-generated constructor stub super(context); }
     */
                                                                                                                                                                 
    /**
     * 1. Rect對象 一個區域對象Rect(left, top, right, bottom) , 是一個左閉右開的區域, 即是說使用 Rect.contains(left, top)爲true,
     * Rect.contains(right, bottom)爲false 2. drawLine方法 drawLine(float startX, float startY, float stopX, float stopY,
     * Paint paint) 也是一個左閉右開的區間,只會繪製到stopX-1,stopY-1 3. drawRect(Rect r, Paint paint) 當繪製空心矩形時,繪製的是一個左閉右閉的區域
     * 驗證方法:下面就是可以驗證左閉右開的區間方法,現在知道爲什麼要-1 了
     */
                                                                                                                                                                 
    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
                                                                                                                                                                     
        Paint paint = new Paint();
                                                                                                                                                                     
        paint.setAntiAlias(true);
                                                                                                                                                                     
        paint.setColor(Color.GREEN);
                                                                                                                                                                     
        canvas.drawLine(0, 0, this.getWidth() - 1, 0, paint);// 繪製上邊框
                                                                                                                                                                     
        canvas.drawLine(0, 0, 0, this.getHeight() - 1, paint); // 繪製左邊框
                                                                                                                                                                     
        canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint); // 繪製右邊框
                                                                                                                                                                     
        canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1, this.getHeight() - 1, paint);// 繪製下邊框
                                                                                                                                                                     
    }
                                                                                                                                                                 
    /*
     * 1. Rect對象
     *
     * 一個區域對象Rect(left, top, right, bottom) , 是一個左閉右開的區域,即是說使用 Rect.contains(left, top)爲true, Rect.contains(right,
     * bottom)爲false
     *
     * 2.drawLine方法
     *
     * drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 也是一個左閉右開的區間,只會繪製到stopX-1,stopY-1
     *
     * 驗證方法:
     *
     * Canvas c = canvas; paint.setColor(Color.RED); c.drawLine(x, y, x+c.getWidth()-1, y, paint); c.drawLine(x,
     * y+height-1, x+c.getWidth(), y+height-1, paint); paint.setColor(Color.BLUE); c.drawPoint(x+c.getWidth()-1, y,
     * paint); 說明drawLine是沒有繪製到右邊最後一個點的
     *
     * 3.drawRect(Rect r, Paint paint)
     *
     * 當繪製空心矩形時,繪製的是一個左閉右閉的區域
     *
     * 驗證方法:
     *
     * rect.set(x, y, x+width, y+height); paint.setStyle(Style.STROKE); paint.setColor(Color.BLUE); c.drawRect(rect,
     * paint); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x, y+height, x+width,
     * y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width, y+height, paint);
     * 當繪製實心矩形時,繪製的是一個左閉右開的區域
     *
     * 驗證方法:
     *
     * rect.set(x, y, x+width, y+height); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x,
     * y+height, x+width, y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width,
     * y+height, paint); paint.setStyle(Style.FILL); paint.setColor(Color.BLUE); c.drawRect(rect, paint);
     * 這個規則跟j2me也是一樣的,在j2me裏,drawRect長寬會多畫出1px。SDK的說明是:
     *
     * The resulting rectangle will cover an area (width + 1) pixels wide by (height + 1) pixels tall. If either width
     * or height is less than zero, nothing is drawn.
     *
     * 例如drawRect(10,10,100,1)繪製,結果是一個2px高的矩形,用fillRect(10,10,100,1),結果是一個1px高的矩形
     *
     * 以上就是對Android繪圖的具體介紹。
     */
                                                                                                                                                                 
}
/**
 * 在佈局文件中引用 這樣引用就行了..吼吼 <com.xiaoma.shadedemo.TextViewBorder android:id="@+id/a02_txtKSSJ" android:textColor="#000000"
 * android:layout_marginLeft="10dip" android:layout_width="100dip" android:layout_height="wrap_content" />
 */



   2.2:JAVA實現帶左右邊框(自定義TextView JAVA代碼二)


package com.xiaoma.shadedemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;
public class TextViewBorderLeftRight extends TextView
{
                                                                                                                                                             
    /**
     * 下面兩個方法在構造時需注意: 一:如果是XML文件加載的方式使用自定義控件到佈局中是用以下方式, 二:如果是用純代碼的方式加載自定義的控制到而已中時用第二種方式
     */
                                                                                                                                                             
    // 方式一:
    public TextViewBorderLeftRight(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
                                                                                                                                                             
    // 方式二:
    /*
     * public TextViewBorder(Context context) { // TODO Auto-generated constructor stub super(context); }
     */
                                                                                                                                                             
    /**
     * 1. Rect對象 一個區域對象Rect(left, top, right, bottom) , 是一個左閉右開的區域, 即是說使用 Rect.contains(left, top)爲true,
     * Rect.contains(right, bottom)爲false 2. drawLine方法 drawLine(float startX, float startY, float stopX, float stopY,
     * Paint paint) 也是一個左閉右開的區間,只會繪製到stopX-1,stopY-1 3. drawRect(Rect r, Paint paint) 當繪製空心矩形時,繪製的是一個左閉右閉的區域
     * 驗證方法:下面就是可以驗證左閉右開的區間方法,現在知道爲什麼要-1 了
     */
                                                                                                                                                             
    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
                                                                                                                                                                 
        Paint paint = new Paint();
                                                                                                                                                                 
        paint.setAntiAlias(true);
                                                                                                                                                                 
        paint.setColor(Color.GREEN);
                                                                                                                                                                 
        canvas.drawLine(0, 0, 0, getHeight(), paint);
                                                                                                                                                                 
        // canvas.drawLine(getWidth(), 0, getWidth() - 1, getHeight() - 1, paint);
        canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint);
                                                                                                                                                                 
        // canvas.drawLine(0, 0, 0, this.getHeight() - 1, paint);
                                                                                                                                                                 
        // canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint);
                                                                                                                                                                 
        // canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1, this.getHeight() - 1, paint);
                                                                                                                                                                 
    }
    /*
     * 1. Rect對象
     *
     * 一個區域對象Rect(left, top, right, bottom) , 是一個左閉右開的區域,即是說使用 Rect.contains(left, top)爲true, Rect.contains(right,
     * bottom)爲false
     *
     * 2.drawLine方法
     *
     * drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 也是一個左閉右開的區間,只會繪製到stopX-1,stopY-1
     *
     * 驗證方法:
     *
     * Canvas c = canvas; paint.setColor(Color.RED); c.drawLine(x, y, x+c.getWidth()-1, y, paint); c.drawLine(x,
     * y+height-1, x+c.getWidth(), y+height-1, paint); paint.setColor(Color.BLUE); c.drawPoint(x+c.getWidth()-1, y,
     * paint); 說明drawLine是沒有繪製到右邊最後一個點的
     *
     * 3.drawRect(Rect r, Paint paint)
     *
     * 當繪製空心矩形時,繪製的是一個左閉右閉的區域
     *
     * 驗證方法:
     *
     * rect.set(x, y, x+width, y+height); paint.setStyle(Style.STROKE); paint.setColor(Color.BLUE); c.drawRect(rect,
     * paint); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x, y+height, x+width,
     * y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width, y+height, paint);
     * 當繪製實心矩形時,繪製的是一個左閉右開的區域
     *
     * 驗證方法:
     *
     * rect.set(x, y, x+width, y+height); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x,
     * y+height, x+width, y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width,
     * y+height, paint); paint.setStyle(Style.FILL); paint.setColor(Color.BLUE); c.drawRect(rect, paint);
     * 這個規則跟j2me也是一樣的,在j2me裏,drawRect長寬會多畫出1px。SDK的說明是:
     *
     * The resulting rectangle will cover an area (width + 1) pixels wide by (height + 1) pixels tall. If either width
     * or height is less than zero, nothing is drawn.
     *
     * 例如drawRect(10,10,100,1)繪製,結果是一個2px高的矩形,用fillRect(10,10,100,1),結果是一個1px高的矩形
     *
     * 以上就是對Android繪圖的具體介紹。
     */
                                                                                                                                                             
}
/**
 * 在佈局文件中引用 這樣引用就行了..吼吼 <com.xiaoma.shadedemo.TextViewBorder android:id="@+id/a02_txtKSSJ" android:textColor="#000000"
 * android:layout_marginLeft="10dip" android:layout_width="100dip" android:layout_height="wrap_content" />
 */


   2.3:JAVA代碼實現下邊框(自定義TextView JAVA代碼三)


package com.xiaoma.shadedemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;
public class TextViewBorderUnder extends TextView
{
                                                                                                                                                           
    /**
     * 下面兩個方法在構造時需注意: 一:如果是XML文件加載的方式使用自定義控件到佈局中是用以下方式, 二:如果是用純代碼的方式加載自定義的控制到而已中時用第二種方式
     */
                                                                                                                                                           
    // 方式一:
    public TextViewBorderUnder(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
                                                                                                                                                           
    // 方式二:
    /*
     * public TextViewBorder(Context context) { // TODO Auto-generated constructor stub super(context); }
     */
                                                                                                                                                           
    /**
     * 1. Rect對象 一個區域對象Rect(left, top, right, bottom) , 是一個左閉右開的區域, 即是說使用 Rect.contains(left, top)爲true,
     * Rect.contains(right, bottom)爲false 2. drawLine方法 drawLine(float startX, float startY, float stopX, float stopY,
     * Paint paint) 也是一個左閉右開的區間,只會繪製到stopX-1,stopY-1 3. drawRect(Rect r, Paint paint) 當繪製空心矩形時,繪製的是一個左閉右閉的區域
     * 驗證方法:下面就是可以驗證左閉右開的區間方法,現在知道爲什麼要-1 了
     */
                                                                                                                                                           
    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
                                                                                                                                                               
        Paint paint = new Paint();
                                                                                                                                                               
        paint.setAntiAlias(true);
                                                                                                                                                               
        paint.setColor(Color.GREEN);
                                                                                                                                                               
        // canvas.drawLine(0, 0, this.getWidth() - 1, 0, paint);
                                                                                                                                                               
        // canvas.drawLine(0, getHeight(), getWidth() - 1, getHeight(), paint);
                                                                                                                                                               
        // canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint);
                                                                                                                                                               
        canvas.drawLine(0, getHeight() - 1, getWidth() - 1, getHeight() - 1, paint);
                                                                                                                                                               
    }
                                                                                                                                                           
    /*
     * 1. Rect對象
     *
     * 一個區域對象Rect(left, top, right, bottom) , 是一個左閉右開的區域,即是說使用 Rect.contains(left, top)爲true, Rect.contains(right,
     * bottom)爲false
     *
     * 2.drawLine方法
     *
     * drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 也是一個左閉右開的區間,只會繪製到stopX-1,stopY-1
     *
     * 驗證方法:
     *
     * Canvas c = canvas; paint.setColor(Color.RED); c.drawLine(x, y, x+c.getWidth()-1, y, paint); c.drawLine(x,
     * y+height-1, x+c.getWidth(), y+height-1, paint); paint.setColor(Color.BLUE); c.drawPoint(x+c.getWidth()-1, y,
     * paint); 說明drawLine是沒有繪製到右邊最後一個點的
     *
     * 3.drawRect(Rect r, Paint paint)
     *
     * 當繪製空心矩形時,繪製的是一個左閉右閉的區域
     *
     * 驗證方法:
     *
     * rect.set(x, y, x+width, y+height); paint.setStyle(Style.STROKE); paint.setColor(Color.BLUE); c.drawRect(rect,
     * paint); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x, y+height, x+width,
     * y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width, y+height, paint);
     * 當繪製實心矩形時,繪製的是一個左閉右開的區域
     *
     * 驗證方法:
     *
     * rect.set(x, y, x+width, y+height); paint.setColor(Color.RED); c.drawLine(x, y, x+width, y, paint); c.drawLine(x,
     * y+height, x+width, y+height, paint); c.drawLine(x, y, x, y+height, paint); c.drawLine(x+width, y, x+width,
     * y+height, paint); paint.setStyle(Style.FILL); paint.setColor(Color.BLUE); c.drawRect(rect, paint);
     * 這個規則跟j2me也是一樣的,在j2me裏,drawRect長寬會多畫出1px。SDK的說明是:
     *
     * The resulting rectangle will cover an area (width + 1) pixels wide by (height + 1) pixels tall. If either width
     * or height is less than zero, nothing is drawn.
     *
     * 例如drawRect(10,10,100,1)繪製,結果是一個2px高的矩形,用fillRect(10,10,100,1),結果是一個1px高的矩形
     *
     * 以上就是對Android繪圖的具體介紹。
     */
                                                                                                                                                           
}
/**
 * 在佈局文件中引用 這樣引用就行了..吼吼 <com.xiaoma.shadedemo.TextViewBorder android:id="@+id/a02_txtKSSJ" android:textColor="#000000"
 * android:layout_marginLeft="10dip" android:layout_width="100dip" android:layout_height="wrap_content" />
 */

   2.4:Shape XML實現邊框(XML代碼)


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- <solid  android:color="#cceeff"/>   直接寫這個的話,可以給控制添加一個整體的背景哦 -->
    <stroke
        android:width="0.5dp"
        android:color="#22ccff" />
    <padding  android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp"/>
                                                                                                                                                     
    <size
        android:height="0.5dp"
        android:width="5dp" />
 <!-- 目前沒有什麼用,可刪除,留在這個地方防止亂猜 -->
                                                                                                                                                  
    <corners android:radius="10dp" />
 <!-- 這個radius裏面的值需要個整型,單位用dp,用其它單位亦無影響 -->
                                                                                                                                                  
</shape>


   2.5:Selector與Shape混用控件效果實現


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
                                                                                                                                                 
    <!-- 今天主要講的是shape渲染,shape主要類型分四種,效果如下,我們常用rectangle,也就是矩形渲染,其它的都太醜了!! -->
                                                                                                                                                 
                                                                                                                                                 
    <item android:state_pressed="true"> <!--按鈕按下時的渲染效果 -->
            <shape android:shape="oval">
                                                                                                                                                         
                <corners android:radius="10dp" /> <!-- 四個角的角度 -->
                                                                                                                                                 
                <!--gradient就是梯度渲染,簡單說就是顏色漸變,type爲漸變方式,總共三種 linear sweep  ridial,常用linear-->
                <gradient android:endColor="#eebbbb" android:startColor="#9900ee" android:type="linear" />
                                                                                                                                                 
                <!-- padding屬性是指定內容與控件邊距,這個地方小馬專門將距左邊距設置較大,方便觀察 -->
                <padding android:bottom="5dp" android:left="20dp" android:right="5dp" android:top="5dp" />
                                                                                                                                                  
                <!-- solid填充整個區域,顏色爲FFDDFF,如果使用整個區域填充的話,上面的gradient梯度會失效,即:覆蓋 -->
                <!-- <solid  android:color="#FFDDFF"/> -->
                                                                                                                                                             
                <!-- stroke爲需要填充的邊框,指定顏色及邊框寬度  -->
                <stroke android:width="3dp" android:color="#000000" />
            </shape>
                                                                                                                                                         
        <!-- <clip android:clipOrientation="vertical" android:gravity="right" android:drawable="@drawable/ic_launcher" /> --><!-- 試了下沒用 -->
        <!-- <color android:color="#223344"/> -->
        <!-- <scale android:scaleWidth="15dp" android:scaleHeight=" 5dp" android:scaleGravity="center" /> -->
                                                                                                                                                     
     </item>
                                                                                                                                                 
    <item> <!-- 默認 -->
            <shape android:shape="rectangle">
                                                                                                                                                         
                <corners android:radius="10dp" /> <!-- 四個角的角度 -->
                                                                                                                                                 
                <!--gradient就是梯度渲染,簡單說就是顏色漸變,type爲漸變方式,總共三種 linear sweep  ridial,常用linear-->
                <!-- 這個地方一定注意,在使用gradient標籤中使用android:type的前提是必須android:gradientRadius="20dp"已經設置,否則會報錯 -->
                <gradient android:endColor="#acefda" android:startColor="#0099ff" android:type="linear" />
                                                                                                                                                 
                <!-- padding屬性是指定內容與控件邊距,這個地方小馬專門將距左邊距設置較大,方便觀察 -->
                <padding android:bottom="5dp" android:left="20dp" android:right="5dp" android:top="5dp" />
                                                                                                                                                  
                <!-- solid填充整個區域,顏色爲FFDDFF,如果使用整個區域填充的話,上面的gradient梯度會失效,即:覆蓋 -->
                <!-- <solid  android:color="#FFDDFF"/> -->
                                                                                                                                                             
                <!-- stroke爲需要填充的邊框,指定顏色及邊框寬度  -->
                <stroke android:width="3dp" android:color="#000000" />
            </shape>
     </item>
                                                                                                                                                  
                                                                                                                                                 
</selector>


怎麼樣?看着JAVA自定義TextView代碼是不是覺得特別的繁瑣?今天的主題就是來解決這個問題的....…^_^.........下面着重來講一下Selector與Shape混用控件效果Selector實現的細節,(請仔細看下XML裏面的註釋 O_O)


每個Item過是由Shape來進行渲染生成最終的效果,首先來看根Shape節點的常用屬性<shape android:shape="rectangle">:

這個shape屬性總共分三種 rectangle(矩形)、oval(橢圓) 、line(刪除線)、ring(鈴,這個存在不知道有什麼意義),其效果分別如下:

1.rectangle


2.oval


3.line

4.ring




其中,gradient標籤中的type爲漸變方式,總共三種 linear sweep  ridial,常用linear,其效果分別爲(注意:ridial試了無任何效果 T_T)


1.linear效果



2.sweep效果



      好了,代碼及整體效果已經分解完畢了,如果認真從頭到尾的看一邊的話,肯定有所收穫
的,對了,以上的Shape渲染寫好了,可以在任意控件上使用…不限於TextView,上面的例子只是拿TextView來開刀用的…大家別誤會,呵呵….^_^…. ,最後,小馬希望在文章中有什麼不清楚或不明白或有錯誤的地方,請大家直接指出…有錯必改的….這個源碼小馬已經上傳到附件中,有興趣或有用的朋友可以直接下載來跑跑改改看,有批評纔有進步,希望有什麼不好的,直接指出….在此先謝謝大家啦….


官網參考鏈接如下(只是沒效果圖,所以大家也懶得去看這個東西)

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



這段時間也有在關注各種各樣的東西,老聽人說學這學那的人越來越多什麼的,也希望大家不要隨便聽人家講,我敢說….安卓雖然在很多人眼裏看來簡單、爛,但我覺得如果要深入的話,水還是很深的,如果用心,一定可以做的越來越好的,一步一步來,大家一起努力!做安卓的人越來越多,越有競爭!越有動力!!!這樣纔會進步!哈哈….加油加油加油! O_O









發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章