2. 程式人生 > >Android群英傳讀書筆記---自定義控制元件(-)

Android群英傳讀書筆記---自定義控制元件(-)

阿新 • • 發佈：2019-01-28

自定義控制元件

雖然我也寫過自定義控制元件，但是從沒有進行一個系統的總結，正好借這本書的內容，重新梳理一下，
通常情況下，常用的有三種方法：

  • 對現有控制元件進行擴充套件
  • 通過組合控制元件來實現新的控制元件
  • 重寫view來實現全新的控制元件（最難）

1. 對現有控制元件進行拓展

對原生控制元件的擴充套件，只需要重寫onDraw(Canvas canvas)即可

 private void initPaint(){
        paint1 = new Paint();
        paint1.setColor(getResources().getColor(android.R
 
.color.holo_blue_bright));
        paint1.setStyle(Paint.Style.FILL);
        paint2 = new Paint();
        paint2.setColor(getResources().getColor(android.R.color.holo_green_dark));
        paint2.setStyle(Paint.Style.FILL);
    }
        @Override
    protected void onDraw(Canvas canvas) {
        //TODO 回撥父類方法前，對TextView來說繪製文字內容之前
        //繪製一個外層矩形
        canvas.drawRect
 
(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint1);
        //繪製一個內層矩形
        canvas.drawRect(10, 10, getMeasuredWidth()-10, getMeasuredHeight()-10, paint2);
        canvas.save();
        //繪製文字前平移10px
        canvas.translate(10, 0);
        super.onDraw(canvas);
        canvas.restore();
        //TODO 回撥父類方法後，對TextView來說繪製文字內容之後
    }

控制元件效果如下圖：

再來一個複雜點的效果（動態文字閃爍效果）：

思路：通過設定一個不斷變化的LinearGradient,並使用帶有該屬性的Paint物件來繪製要顯示的文字。首先，在onSizeChanged(),中進行一些物件的初始化工作，根據view的寬設定一個LinearGradient漸變渲染器。

private int mViewWidth;
    private Paint paint;
    private LinearGradient linearGradient;
    private Matrix matrix;
    private int mTranslate;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if(mViewWidth==0){
            mViewWidth = getMeasuredWidth();
            if(mViewWidth>0){
                paint = getPaint();
                linearGradient = new LinearGradient(0, 0, mViewWidth, 0, 
                        new int[]{Color.BLUE,0xffffffff,Color.GREEN}, new float[]{0,1,2}, Shader.TileMode.MIRROR);
                paint.setShader(linearGradient);
                matrix = new Matrix();
            }
        }
    }

其中最關鍵的是，使用getPaint()方法獲取繪製當前TextView的Paint，並給這個Paint設定一個LinearGradient,
最後，
在onDraw()方法中，通過矩陣的方式來不斷平移漸變效果

 @Override
    protected void onDraw(Canvas canvas) {
        //TODO 回撥父類方法前，對TextView來說繪製文字內容之前
        super.onDraw(canvas);
        Log.e("mess", "------onDraw----");
        if(matrix != null){
            mTranslate += mViewWidth/5;
            if(mTranslate>2*mViewWidth){
                mTranslate =-mViewWidth;
            }
            matrix.setTranslate(mTranslate, 0);
            linearGradient.setLocalMatrix(matrix);
            postInvalidateDelayed(100);
        }
        //TODO 回撥父類方法後，對TextView來說繪製文字內容之後
    }

下面看效果圖：

2. 建立複合控制元件

複合控制元件，最常見的其實就是我們的TitleBar了，一般就是一個left+title+right組合，我以前是做成一個xml檔案，然後各個需要的地方，用<\include>標籤引用，看了書上的例子，是把我這種xml的形式，做成了一個單獨控制元件，就學習學習這種寫法吧。

Begin

(1). values 目錄下新建attrs.xml 定義屬性

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <declare-styleable name="TitleBar">
            <!-- 定義title文字，大小，顏色 -->
            <attr name="title" format="string" />
            <attr name="titleTextSize" format="dimension"/>
            <attr name="titleTextColor" format="color" />
            <!-- 定義left 文字，大小，顏色，背景 -->
            <attr name="leftText" format="string" />
            <attr name="leftTextSize" format="dimension" />
            <attr name="leftTextColor" format="color" />
            <!-- 表示背景可以是顏色，也可以是引用 -->
            <attr name="leftBackGround" format="color|reference" />
            <!-- 定義right 文字，大小，顏色，背景 -->
            <attr name="rightText" format="string" />
            <attr name="rightTextSize" format="dimension"/>
            <attr name="rightTextColor" format="color" />
            <attr name="rightBackGround" format="color|reference" />
        </declare-styleable>
    </resources>

(2). 獲取自定義的屬性

  /**
     * 獲取自定義的屬性
     * 
     * @param context
     */
    private int leftTextColor;
    private Drawable leftBackGround;
    private String leftText;
    private float leftTextSize;

    private int rightTextColor;
    private String rightText;
    private float rightTextSize;

    private int titleTextColor;
    private String titleText;
    private float titleTextSize;

    private void initAttr(Context context, AttributeSet attrs) {
        TypedArray typed = context.obtainStyledAttributes(attrs, R.styleable.TitleBar);
        // 從TypedArray中取出對應的值為要設定的屬性賦值，給個預設值
        leftTextColor = typed.getColor(R.styleable.TitleBar_leftTextColor, 0XFFFFFFFF);
        leftBackGround = typed.getDrawable(R.styleable.TitleBar_leftBackGround);
        leftText = typed.getString(R.styleable.TitleBar_leftText);
        leftTextSize = typed.getDimension(R.styleable.TitleBar_leftTextSize, 20);

        rightTextColor = typed.getColor(R.styleable.TitleBar_rightTextColor, 0XFFFFFFFF);
        rightText = typed.getString(R.styleable.TitleBar_rightText);
        rightTextSize = typed.getDimension(R.styleable.TitleBar_rightTextSize, 20);

        titleTextColor = typed.getColor(R.styleable.TitleBar_titleTextColor, 0XFFFFFFFF);
        titleText = typed.getString(R.styleable.TitleBar_title);
        titleTextSize = typed.getDimension(R.styleable.TitleBar_titleTextSize, 20);
        // 不要忘記呼叫
        typed.recycle();

    }

（3）.程式碼佈局元件

    private TextView titleView;
    private Button leftButton;
    private Button rightButton;

    private RelativeLayout.LayoutParams leftParams;
    private RelativeLayout.LayoutParams rightParams;
    private RelativeLayout.LayoutParams titleParams;

    /**
     * 程式碼佈局
     * 
     * @param context
     */
    @SuppressWarnings("deprecation")
    private void initView(Context context) {
        titleView = new TextView(context);
        leftButton = new Button(context);
        rightButton = new Button(context);

        // 為建立的元件賦值
        titleView.setText(titleText);
        titleView.setTextSize(titleTextSize);
        titleView.setTextColor(titleTextColor);
        titleView.setGravity(Gravity.CENTER);

        leftButton.setText(leftText);
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackgroundDrawable(leftBackGround);
        leftButton.setTextSize(leftTextSize);

        rightButton.setText(rightText);
        rightButton.setTextSize(rightTextSize);
        rightButton.setTextColor(rightTextColor);

        // 為元件佈局
        // 在左邊
        leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
        addView(leftButton, leftParams);

        // 在右邊
        rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
        addView(rightButton, rightParams);

        //中間
        titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        rightParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
        addView(titleView, titleParams);

        //新增點選監聽，（下面講述如何引入的）
        leftButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                if (listener != null) {
                    listener.leftClick();
                }
            }
        });

        rightButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                if (listener != null) {
                    listener.rightClick();
                }
            }
        });

    }

（4）.定義介面

public interface TitleBarClickListener{
        //左點選
        void leftClick();
        //右點選
        void rightClick();
    }

（5）.暴露介面給呼叫者

public void setTitleBarClickListener(TitleBarClickListener listener) {
        this.listener = listener;
    }

看下例子 佈局檔案

<com.example.day_1.TitleBar
        android:id="@+id/titlebar"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        app:leftBackGround="#ff000000"
        app:leftText="left"
        app:leftTextColor="#ffff6734"
        app:leftTextSize="25dp" 
        app:rightText="right"
        app:rightTextSize="25dp"
        app:rightTextColor="#ff123456"
        app:title="title"
        app:titleTextColor="#ff654321"/>

程式碼

private TitleBar titlebar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        titlebar = (TitleBar) findViewById(R.id.titlebar);
        titlebar.setTitleBarClickListener(this);
    }

    @Override
    public void leftClick() {
        Toast.makeText(this, "left---", Toast.LENGTH_LONG).show();

    }

    @Override
    public void rightClick() {
        Toast.makeText(this, "right---", Toast.LENGTH_LONG).show();

    }

效果如下圖:

3.重寫view實現全新的控制元件

這個是我覺著三種自定義型別裡，最難得了，迄今為止沒有寫出過什麼出彩的控制元件，所以還是好好學習書上的內容吧，增加新技能。

———————————Begin——————————-

(1) .弧線展示圖
這裡寫圖片描述

思路：這個view可以分為三個部分，中間的圓圈，中間顯示的文字，外圈的圓弧。只要有了這樣的思路，剩餘的就是在onDraw()方法中去繪製了。

  • 測量控制元件大小，onMeasure()
private int mMeasureHeigth;// 控制元件高度
        private int mMeasureWidth;// 控制元件寬度
        // 圓形
        private Paint mCirclePaint;
        private float mCircleXY;//圓心座標
        private float mRadius;//圓形半徑
        // 圓弧
        private Paint mArcPaint;
        private RectF mArcRectF;//圓弧的外切矩形
        private float mSweepAngle;//圓弧的角度
        private float mSweepValue = 50;
        // 文字
        private Paint mTextPaint;
        private String mShowText;//文字內容
        private float mShowTextSize;//文字大小

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            mMeasureWidth = MeasureSpec.getSize(widthMeasureSpec);//獲取控制元件寬度
            mMeasureHeigth = MeasureSpec.getSize(heightMeasureSpec);//獲取控制元件高度
            setMeasuredDimension(mMeasureWidth, mMeasureHeigth);
            initView();
        }

        /**
         *準備畫筆，
         */
        private void initView() {

            float length = Math.min(mMeasureWidth,mMeasureHeigth)
            // 圓
            mCircleXY = length / 2;// 確定圓心座標
            mRadius = (float) (length * 0.5 / 2);// 確定半徑
            mCirclePaint = new Paint();
            mCirclePaint.setAntiAlias(true);// 去鋸齒
            mCirclePaint.setColor(getResources().getColor(android.R.color.holo_green_dark));

            // 弧線
            // 矩形
            mArcRectF = new RectF((float) (length * 0.1), (float) (length * 0.1), (float) (length * 0.9),
                (float) (length * 0.9));
            mSweepAngle = (mSweepValue / 100f) * 360f;
            mArcPaint = new Paint();
            mArcPaint.setColor(getResources().getColor(android.R.color.holo_blue_bright));
            mArcPaint.setStrokeWidth((float) (length * 0.1));//圓弧寬度
            mArcPaint.setStyle(Style.STROKE);//圓弧
            // 文字
            mShowText = setShowText();
            mShowTextSize = setShowTextSize();
            mTextPaint = new Paint();
            mTextPaint.setTextSize(mShowTextSize);
            mTextPaint.setTextAlign(Paint.Align.CENTER);

        }

        private float setShowTextSize() {
            this.invalidate();
            return 50;
        }

        private String setShowText() {
            this.invalidate();
            return "Android Skill";
        }

        public void forceInvalidate() {
            this.invalidate();
        }

        public void setSweepValue(float sweepValue) {
            if (sweepValue != 0) {
                mSweepValue = sweepValue;
            } else {
                mSweepValue = 25;
            }
            this.invalidate();
        }
  • 繪製控制元件, onDraw()
@Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            // 繪製圓
            canvas.drawCircle(mCircleXY, mCircleXY, mRadius, mCirclePaint);
            // 繪製圓弧，逆時針繪製，角度跟
            canvas.drawArc(mArcRectF, 90, mSweepAngle, false, mArcPaint);
            // 繪製文字
            canvas.drawText(mShowText, 0, mShowText.length(), mCircleXY, mCircleXY + mShowTextSize / 4, mTextPaint);

        }
圓弧的繪製，開始位置如下圖所示角度，以順時針繪製圖形

  • 效果如下圖

（2）.音訊條形圖

思路：繪製n個小矩形，每個矩形有些偏移即可

準備工作

private int mWidth;//控制元件的寬度
        private int mRectWidth;// 矩形的寬度
        private int mRectHeight;// 矩形的高度
        private Paint paint;
        private int mRectCount;// 矩形的個數
        private int offset = 5;// 偏移
        private double mRandom;
        private LinearGradient lg;// 漸變

        private void initView() {
            paint = new Paint();
            paint.setColor(Color.GREEN);
            paint.setStyle(Paint.Style.FILL);
            mRectCount = 12;
        }

        //重寫onSizeChanged方法

        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mWidth = getWidth();
            mRectHeight = getHeight();
            mRectWidth = (int) (mWidth * 0.6 / mRectCount);
            lg = new LinearGradient(0, 0, mRectWidth, mRectHeight, Color.GREEN, Color.BLUE, TileMode.CLAMP);
            paint.setShader(lg);
        }

        //重寫onDraw方法
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            for (int i = 0; i < mRectCount; i++) {
                mRandom = Math.random();
                float currentHeight = (int) (mRectHeight * mRandom);
                canvas.drawRect((float) (mWidth * 0.4 / 2 + mRectWidth * i + offset * i), currentHeight,
                    (float) (mWidth * 0.4 / 2 + mRectWidth * (i + 1) + offset * i), mRectHeight, paint);
            }
            postInvalidateDelayed(1000);
        }

view的繪製座標如下圖所示：

效果圖如下：

後記：

就像本書作者說的：無論多麼複雜的自定義view都是慢慢迭代起來的功能，不要被自定義view嚇到，總之，非常感謝作者，我對自定義view總算是有了一個完整的認識

相關推薦

Android群英傳讀書筆記---自定義控制元件(-)

自定義控制元件 雖然我也寫過自定義控制元件，但是從沒有進行一個系統的總結，正好借這本書的內容，重新梳理一下， 通常情況下，常用的有三種方法： 對現有控制元件進行擴充套件 通過組合控制元件來實現新的控制元件 重寫view來實現全新的控制元件（最難） 1

Android群英傳讀書筆記——第十三章：Android例項提高

第十三章目錄 13.1 移動迷宮——拼圖遊戲 13.1.1 準備工作 13.1.2 初始介面 13.1.3 拼圖介面 13.1.4 效果預覽與功能進階 13.2 魔幻矩陣——2048 13.2.1 2048概述 13.2.2 2048遊戲分析 13.2.3

Android群英傳讀書筆記——Android Scroll分析

5.1  滑動效果是如何產生的         滑動的本質是改變View的座標 5.1.1  Android座標系         螢幕左上角為原點，向右為x軸正方形，向下為y軸正方向         系統提供了View.getLocationOnScreen(i

Android群英傳讀書筆記——第十章：Android效能優化

第十章目錄 10.1 佈局優化  10.1.1 Android UI渲染機制 10.1.2 避免Overdraw 10.1.3 優化佈局層級 10.1.4 避免巢狀過多無用佈局 10.1.5 Hierarchy Viewer 10.2 記憶體優化

Android群英傳讀書筆記——第七章：Android動畫機制與使用技巧

第七章目錄 7.1 Android View動畫框架  7.1.1 透明度動畫 7.1.2 旋轉動畫 7.1.3 位移動畫 7.1.4 縮放動畫 7.1.5 動畫集合 7.2 Android屬性動畫分析  7.2.1 ObjectAnimato

Android群英傳讀書筆記——第十二章：Android 5.X新特性詳解

第十二章目錄 12.1 Android5.X UI設計初步  12.1.1 材料的形態模擬 12.1.2 更加真實的動畫 12.1.3 大色塊的使用 12.2 Material Design主題 12.3 Palette 12.4 檢視與陰影 12

Android群英傳讀書筆記——第九章：Android系統資訊與安全機制

第九章目錄 9.1 Android系統資訊獲取  9.1.1 android.os.Build 9.1.2 SystemProperty 9.1.3 Android系統資訊例項 9.2 Android Apk應用資訊獲取之PackageManager 

Android 群英傳讀書筆記

偶然在知乎上看到了關於《Android 群英傳》的介紹，感覺還不錯，尤其是作者前言中寫的內容和我簡直心照不宣——Android 學習的瓶頸與進階，讀了快半本了，感覺非常不錯，不合適初學者，但絕對適合學習到了瓶頸期，想要突破自我的 Android 開發者，比如我。

Android群英傳－－對現有控制元件進行拓展（動態的文字閃動效果）

利用linearGradient Shader和Matrix來實現一個動態的文字閃動效果。 要想實現這一個效果，可以充分利用Android 中Paint物件的Shader渲染器。通過一個不斷變化的linearGradient，並使用帶有該屬性的Paint物件來繪製要顯示的文

《Android群英傳》學習筆記之Android控制元件架構與自定義控制元件詳解

一、Android控制元件架構： 控制元件大致分為兩類：ViewGroup控制元件與View控制元件。View是繪製在螢幕上的使用者能與之互動的一個物件。而ViewGroup則是一個用於存放其他Vi

閱讀徐宜生《Android群英傳》的筆記——第3章 Android控制元件架構與自定義控制元件詳解（3.6-3.8）

3.6 自定義 View 在自定義 View 時，我們通常會去重寫 onDraw() 方法來繪製 View 的顯示內容。如果該 View 還需要使用 wrap_content 屬性，那麼還必須重寫 onMeasure() 方法。另外，通過自定義 attr

Android-自定義控制元件屬性解讀-->Android筆記

1. reference：參考某一資源ID。     （1）屬性定義：             <declare-styleable name = "名稱">                    <attr name = "background"

Effective C++讀書筆記----自定義型別的傳參和返回值問題

對於自定義型別，傳參的時候儘可能的使用傳引用來代替傳值。 看如下這個例子： #include <iostream> using namespace std; #include <string> class Person {

Android百度地圖開發學習筆記（二）之定位當前位置和自定義控制元件返回

在完成HelloMap後，接來完成的重要功能是如何定位當前位置和如何一鍵返回。效果圖如下： 這裡的控制元件就是一個ImageView，自己去百度一個好看的圖片就可以了。 一 定位當前位置和自定義控制元件返回 1.官方技術文件 可以先點選百度地圖定位技術文件，仔細看一下相關

Android開發筆記之自定義控制元件(物流時間軸的實現)

最近修改專案遇到檢視物流這個需求,經過一個下午的時間的終於搞定,趁著這個時間點,趕快把這個功能抽取出來,方便大家以後開發的需要,幫助到更多的人 先看效果圖,如下 看完之後,分析可知道,主要是兩部分,一個頭部和一個body. 那我們最主要的工作就是bod

Android中引入佈局和和自定義控制元件

首先是引入佈局： 1.我們自己新建一個layout，就是一個標題欄。 2.然後在我們的mainactivity_layout中使用一個語句就可以實現。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout

android-自定義控制元件

自定義控制元件兩種方式 1、繼承ViewGroup 例如：ViewGroup , LinearLayout, FrameLayout, RelativeLayout等。 2、繼承View 例如：View, TextView, ImageView, Button等。 View的測量

Android 自定義控制元件-星級評分

在學習自定義控制元件時需要一些例子來練練手，本文這個控制元件就是在這種環境下產生的（可能有BUG）； 這個控制元件設計的特點： 1，可以任意修改星星數量 2，可以星星大小會隨控制元件大小而縮小，在控制元件足夠大的情況可以任意設定星星大小 3，滑動監聽，根據滑動距離選擇星級 4，可

[Android自定義控制元件] Android自定義控制元件

轉載自： http://blog.163.com/[email protected]/blog/static/103242241201382210910473/ 開發自定義控制元件的步驟: 1、瞭解View的工作原理  2、

Android 自定義控制元件釋義

由於經常在android的開發過過程中與控制元件打交道,所以有些android控制元件並不能滿足我們的需求, 進而需要自定義一 些為我們所用,但是本文只是一些名詞解析,具體實現可以網路搜尋獲得答案,在此只是個人的筆錄 1:自定義控制元件方式: 1.1:繼承view,button,