1. 程式人生 > >自定義控制元件(陰影,漸變)

自定義控制元件(陰影,漸變)

一、陰影:
Paint 類定義了一個名為 setShadowLayer 的方法:
publicvoid setShadowLayer(float radius,float dx,float dy,int shadowColor), 引數意義如下:
radius:陰影半徑
dx: x 方向陰影的偏移量
dy: y 方向陰影的偏移量
shadowColor: 陰影的顏色
陰影layer顯示 影時,shaderlayer 有 兩 種 類 型 : View.LAYER_TYPE_SOFTWARE 和View.LAYER_TYPE_HARDWARE, layer 的預設型別為 LAYER_TYPE_HARDWARE, 但陰影只能在
View.LAYER_TYPE_SOFTWARE 環 境 下 工 作 , 所 以 , 我 們 需 要 調 用 View 類 的 publicvoidsetLayerType(int layerType,Paint paint) 方 法 為 Paint 對 象 指 定 層 的 類 型 :
setLayerType(View.LAYER_TYPE_SOFTWARE,paint)。如想取消陰影則將radius設定為0.

ShaderView.java:

public class ShaderView extends View {
    private Paint paint;
    public ShaderView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ShaderView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setStrokeWidth(5);
        paint.setTextSize(100);
        this.setLayerType(View.LAYER_TYPE_SOFTWARE,paint);//設定為SOFTWARE才會實現陰影
        paint.setShadowLayer(10,1,1, Color.BLUE);//偏移度很小時則變成發光字型
        canvas.drawText("Android開發",100,100,paint);
        canvas.restore();
        paint.setShadowLayer(10,5,5,Color.GREEN);//如果想要取消陰影,則將Radius設為0即可
        canvas.drawText("Android,你好",100,400,paint);
    }
}


二、漸變
漸變種類有:
1. 線性漸變: LinearGradient
線性漸變( LinearGradient) 根據指定的角度、顏色和模式使用漸變顏色填充繪圖區域。我們必須定義兩個點( x0, y0)和( x1, y1),漸變的方向與這兩個點的連線垂直,
LinearGradient 的構造方法如下:
<1>
publicLinearGradient(float x0,float y0,float x1,float y1,int color0,int color1,TileMode tile):本方法用於兩種顏色的漸變, 各引數意義如下:
x0、 y0: 用於決定線性方向的第一個點的座標( x0, y0);
x1、 y1:用於決定線性方向的第二個點的座標( x1, y1);
color0: 第一種顏色;
color1: 第二種顏色;
tile: 漸變模式
<2>
publicLinearGradient(float x0,float y0,float x1,floaty1,int colors[],float positions[],TileMode tile), 這是一個功能更加強大的構造方法, 我們來看看該構造方法引數的作用:
x0、 y0:起始點的座標
x1、 y1:終止點的座標
colors:多種顏色
positions:顏色的位置(比例)
TileMode:漸變模式
引數 colors 和 positions 都是陣列, 前者用於指定多種顏色,後者用於指定每種顏色的起始比例位置。 positions 陣列中的元素個數與 colors 要相同, 且是 0 至 1 的數值, [0,1]是臨界區, 
如果小於 0 則當 0 處理, 如果大於 1 則當 1 處理。假如在繪圖區域和漸變區域大小相同的情況下,colors 包含了三種顏色: red、 yellow、 green, 在漸變區域中這三種顏色的起始比例位置為 0、 0.3、


2. 徑向漸變: RadialGradient
徑向漸變是以指定的點為中心, 向四周以漸變顏色進行圓周擴散, 和線性漸變一樣,支援兩種或多種顏色。
<1>public RadialGradient(floatx,floaty,floatradius,int color0,intcolor1,TileMode tile), 該構造方法支援兩種顏色, 下面是引數的作用:
x、 y: 中心點座標
radius: 漸變半徑
color0:起始顏色
color1:結束顏色
TileMode:漸變模式
<2>public RadialGradient(floatx,floaty,floatradius,int colors[],float positions[],TileModetile), 該構造方法支援 3 種或 3 種以上顏色的漸變, 各引數的作用如下:
x、 y: 中心點座標
radius: 漸變半徑
colors:多種顏色
positions:顏色的位置(比例)
TileMode:漸變模式
建構函式2用法如上;

3. 掃描漸變: SweepGradient
SweepGradient 類似於軍事題材電影中的雷達掃᧿效果, 固定圓心, 將半徑假想為有形並旋
轉一週而繪製的漸變顏色。 SweepGradient 定義了兩個主要的構造方法:
<1>public SweepGradient(float cx,float cy,int color0,int color1)
支援兩種顏色的掃描漸變, 引數的作用如下:
cx、 cy:圓點座標;
color0:起始顏色;
color1:結束顏色。
<2>public SweepGradient(float cx,float cy,int colors[],float positions[])
支援多種顏色的掃描漸變, 引數的作用如下:
cx、 cy:圓點座標;
colors:多種顏色;
positions:顏色的位置(比例)。


4. 點陣圖漸變: BitmapShader
點陣圖漸變其實就是在繪製的圖形中將指定的點陣圖作為背景, 如果圖形比點陣圖小, 則通過漸變模式進行平鋪, TileMode.CLAMP 模式不平鋪, TileMode.REPEAT 模式表示平鋪, TileMode.MIRROR
模式也表示平鋪, 但是交錯的點陣圖是彼此的映象, 方向相反。 可以同時指定水平和垂直兩個方向的漸變模式。
構造方法:
publicBitmapShader(Bitmap bitmap,TileMode tileX,TileMode tileY), 引數如下:
bitmap:點陣圖;
tileX: x 方向的重複模式;
tileY: y 方向的重複模式。


5. 混合漸變: ComposeShader
混合漸變 ComposeShader是將兩種不同的漸變通過點陣圖運算後得到的一種更加複雜的漸變。
構造方法:
<1>public ComposeShader(Shader shaderA,Shader shaderB,Xfermode mode)
<2>public ComposeShader(Shader shaderA,Shader shaderB,Mode mode)
shaderA 和 shaderB 是兩個漸變物件, mode 為點陣圖運算型別, 16 種運算模式如圖 5-15
所示:


程式碼中, shaderA 為點陣圖漸變, shaderB 為線性漸變, 根據 Mode.SRC_ATOP 的運算規則,
shaderA 會全部顯示( 此處為小機器人), shaderB 只顯示二者相交部分並位於最上面( TOP)。

漸變效果程式碼:

public class RadialGradientView extends View {
    private int color[]={Color.GREEN,Color.BLUE,Color.RED};
    //private float position[]={0,0.5f,1};
    public RadialGradientView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public RadialGradientView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Rect rect=new Rect(100,100,600,600);
        //1.徑向漸變
        RadialGradient r=new RadialGradient(350,350,250, Color.BLUE,Color.YELLOW, Shader.TileMode.MIRROR);
        //2.線性漸變
      //  LinearGradient r=new LinearGradient(100,100,600,600,Color.RED,Color.GREEN, Shader.TileMode.CLAMP);
        //3.掃描漸變
       // SweepGradient r=new SweepGradient(350,350,Color.RED,Color.GREEN);
        //SweepGradient r=new SweepGradient(350,350,color,null);
        //4.點陣圖漸變
//        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.boy);
//        BitmapShader r=new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
        //5.混合漸變
//        LinearGradient lg=new LinearGradient(100,100,600,600,Color.RED,Color.GREEN, Shader.TileMode.CLAMP);
//        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.boy);
//        BitmapShader bs=new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
//        ComposeShader r=new ComposeShader(bs,lg, PorterDuff.Mode.SRC_ATOP);
        //公用部分
        Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setShader(r);
        canvas.drawRect(rect,paint);
        canvas.translate(0,500);
        canvas.drawOval(new RectF(rect),paint);
    }
}
漸變與Matrix
public void setLocalMatrix(Matrix localM), 該方法能和漸變結合,在填充漸變顏色的時候實現移位、旋轉、縮放和拉斜的效果。

我們做一個旋轉的圓, 圓內使用 SweepGradient 漸變填充,看起來像一張光碟。首先, 我們建立了一個 Matrix 物件 mMatrix, mMatrix 定義了以圓點為中心漸變的旋轉效
果, 注意不是旋轉 Canvas 而是旋轉 SweepGradient。 onDraw()方法中不斷呼叫 invalidate()重繪自己, 每重繪一次就旋轉 2 度,於是就形成了一個旋轉的動畫。

SweepMatrixView.java:

public class SweepMatrixView extends View {
    private Paint mpaint=new Paint(Paint.ANTI_ALIAS_FLAG);
    private float mRotate;
    private Matrix matrix=new Matrix();
    private Shader mshader;
    private int[] color={ Color.GREEN,Color.RED,Color.BLUE};
    public SweepMatrixView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setFocusable(true);
        setFocusableInTouchMode(true);

        float x=100;
        float y=100;
        mshader=new SweepGradient(x,y,color,null);
        mpaint.setShader(mshader);
    }

    public SweepMatrixView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint =mpaint;
        float x=100;
        float y=100;
        canvas.translate(100,100);
        canvas.drawColor(Color.WHITE);
        matrix.setRotate(mRotate,x,y);
        mshader.setLocalMatrix(matrix);
        mRotate+=2;
        if(mRotate>=360){
            mRotate=0;
        }
        invalidate();
        canvas.drawCircle(x,y,100,paint);
    }
}
可以實現掃描漸變像光碟一樣旋轉。

相關推薦

定義控制元件陰影漸變

一、陰影: Paint 類定義了一個名為 setShadowLayer 的方法: publicvoid setShadowLayer(float radius,float dx,float dy,int shadowColor), 引數意義如下: radius:陰影半徑 d

繼承式定義控制元件——滑動ScrollView標題顏色漸變

MainActivity.java public class MainActivity extends AppCompatActivity { private ImageView mIvDetail; private ObservableScr

Android定義控制元件 下拉重新整理上拉分頁載入更多(支援ListView, GridView, ScrollView)

        首先說明,這幾篇文章是對一些前輩的成果進行學習後的心得總結。也借這種方式對他們表示謝意。         最近專案中好幾個模組都用到listview和gridview的下拉重新整理,上拉載入更多等功能,而且涉及到圖片的批量下載。水平有限,首先是想到找一些比較

定義控制元件PaintCanvas 基礎用法

本篇部落格繼續學習 Paint 和 Canvas 的基礎用法,上一篇部落格學習了基礎API使用( 基礎幾何圖形,Path 路徑 ),接下來學習 繪製文字 和 繪製圖片 上一篇文章,沒看的有必要先了解一下: 自定義控制元件(一)Paint,Canvas 基礎用

WPF定義控制元件控制元件分類

原文: WPF自定義控制元件(一)の控制元件分類 一、什麼是控制元件(Controls)         控制元件是指對資料和方法的封裝。控制元件可以有自己的屬性和方法,其中屬性是控制元件資料的簡單訪問者,方法則是控制元件的一些簡單而可見的功能、控制元件建

WPF定義控制元件定義控制元件

原文: WPF自定義控制元件(四)の自定義控制元件 在實際工作中,WPF提供的控制元件並不能完全滿足不同的設計需求。這時,需要我們設計自定義控制元件。 這裡LZ總結一些自己的思路,特性如下: Coupling UITemplate Behaviour Function Package

WPF定義控制元件の使用者控制元件完結

原文: WPF自定義控制元件(五)の使用者控制元件(完結) 使用者控制元件,WPF中是繼承自UserControl的控制元件,我們可以在裡面融合我們的業務邏輯。 示例:(一個厭惡選擇的使用者控制元件) 後端: using iMicClassBase; using iMicClassBase.B

定義控制元件顏色由綠色過渡到紅色的控制元件

先寫一個顏色的過度(由綠色過度到紅色) **自定義控制元件的程式碼部分** public class OneView extends View { private Paint paint; private Canvas mConvas;

定義控制元件14---ViewGroup繪製的Padding、margin注意

ViewGroup測量子元素有關,其中measureChildWithMargins和measureChildren類似只是加入了對Margins外邊距的處理,ViewGroup提供對子元素測量的方法從measureChildren開始: measureChildren的邏

Qt之定義控制元件開關按鈕

簡述 接觸過iOS系統的童鞋們應該對開關按鈕很熟悉,在設定裡面經常遇到,切換時候的滑動效果比較帥氣。 通常說的開關按鈕,有兩個狀態:on、off。 下面,我們利用自定義控制元件來實現一個開關按鈕。 原理 重寫滑鼠按下事件(mousePres

編寫Qt Designer定義控制元件——編寫定義控制元件介面

        既然是控制元件,就應該有介面,預設生成的控制元件類只是一個繼承了QWidget的類,如下: #ifndef LOGLATEDIT_H #define LOGLATEDIT_H #include <QWidget> class LogLat

WPF -- 定義控制元件 概述

CustomControl, 其開發出來的控制元件才真正具有WPF風格,其對模板樣式有著很好的支援,這是因為打造CustomControl時做到了邏輯程式碼與外觀相分離,即使換上一套完全不同的視覺樹其同樣能很好的工作,就像WPF內建的控制元件一樣.在使用Visual Studio打造控制元件時,UserCon

Android定義控制元件-給定義控制元件新增事件

在這篇部落格中主要講解給Android自定義控制元件新增點選事件,實現可以按住百分比圓圈在螢幕上進行拖動圓圈的功能。分兩部分講,第一部分是獲取自定義控制元件的座標,第二部分是重新繪製控制元件。 第一部分:獲取自定義控制元件座標 首先看一張圖,這是自定義控制元件中獲

定義控制元件不顯示填坑

自定義控制元件分為繼承View和繼承ViewGroup,兩者不同。 1、繼承View  必須重寫 onLayout() 、onDraw() 因為View相當於沒什麼形狀的控制元件,需要你去重寫onDraw() 去自己畫出來。重寫onLayout() 為了指定 畫在哪裡。 2

定義控制元件之圓形顏色漸變進度條--SweepGradient

前幾天在群裡面有人找圓形可顏色漸變進度條,其中主要的知識點是SweepGradient;(要看具體需要的漸變效果,LinearGradient線性漸變也是可以的,例如Settings內的電量介面的圓形電量進度WrapCircleVIew) mSweepGradient = n

Android實戰簡易教程-第六十九槍定義控制元件實現雪花飄落效果

現在APP要求越來越高了,不只是要求實現功能,顏值的要求也越來越高,下面我們通過自定義控制元件來實現雪花飄落的效果,可以作為介面背景哦。1.自定義控制元件:package com.test.a; import java.util.Random; import androi

定義控制元件6---PorterDuffXfermode圖形過濾器之橡皮擦應用

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schema

WPF -- 定義控制元件 UserControl二 上

在這裡我們將將打造一個UserControl(使用者控制元件)來逐步講解如何在WPF中自定義控制元件,並將WPF的一些新特性引入到自定義控制元件中來. 我們製作了一個帶語音報時功能的鐘表控制元件, 效果如下: 在VS中右鍵單擊你的專案,點選"新增新專案",在出現的選擇列表中選

定義控制元件Dialog篇

自定義控制元件實現方式 本文中初步討論了關於原生Dialog實現方式,自定義Dialog樣式實現以及注意細節 基於Android Studio API 23開發 - 原生Dialog三種樣式實現方式 - 自定義Dialog實現方式 - 結束語

編寫Qt Designer定義控制元件——如何建立並使用Qt定義控制元件

    http://blog.csdn.net/giselite/article/details/12622429   在使用Qt Designer設計窗體介面時,我們可以使用Widget Box裡的窗體控制元件非常方便的繪製介面,比如拖進去一個按鈕,一個文字編輯器等。雖然Qt Designer裡的控制元