2. 程式人生 > >Android 自定義View (一)

Android 自定義View (一)

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

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/24252901

很多的Android入門程式猿來說對於Android自定義View，可能都是比較恐懼的，但是這又是高手進階的必經之路，所有準備在自定義View上面花一些功夫，多寫一些文章。先總結下自定義View的步驟：

1、自定義View的屬性

2、在View的構造方法中獲得我們自定義的屬性

[ 3、重寫onMesure ]

4、重寫onDraw

我把3用[]標出了，所以說3不一定是必須的，當然了大部分情況下還是需要重寫的。

1、自定義View的屬性，首先在res/values/  下建立一個attrs.xml ， 在裡面定義我們的屬性和宣告我們的整個樣式。

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <resources>
  3.     <attrname="titleText"format="string"/>
  4.     <attrname="titleTextColor"format="color"/>
  5.     <attrname="titleTextSize"format="dimension"/>
  6.     <declare-styleablename="CustomTitleView">
  7.         <attrname="titleText"/>
  8.         <attrname="titleTextColor"/>
  9.         <attrname="titleTextSize"/>
  10.     </declare-styleable>
  11. </resources>
我們定義了字型，字型顏色，字型大小3個屬性，format是值該屬性的取值型別:

一共有：string,color,demension,integer,enum,reference,float,boolean,fraction,flag;不清楚的可以google一把。

然後在佈局中宣告我們的自定義View

  1. <RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     xmlns:custom="http://schemas.android.com/apk/res/com.example.customview01"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent" >  
  6.     <com.example.customview01.view.CustomTitleView
  7.         android:layout_width="200dp"
  8.         android:layout_height="100dp"
  9.         custom:titleText="3712"
  10.         custom:titleTextColor="#ff0000"
  11.         custom:titleTextSize="40sp" />  
  12. </RelativeLayout>  

一定要引入 xmlns:custom="http://schemas.android.com/apk/res/com.example.customview01"我們的名稱空間，後面的包路徑指的是專案的package

2、在View的構造方法中，獲得我們的自定義的樣式

  1. /** 
  2.      * 文字 
  3.      */
  4.     private String mTitleText;  
  5.     /** 
  6.      * 文字的顏色 
  7.      */
  8.     privateint mTitleTextColor;  
  9.     /** 
  10.      * 文字的大小 
  11.      */
  12.     privateint mTitleTextSize;  
  13.     /** 
  14.      * 繪製時控制文字繪製的範圍 
  15.      */
  16.     private Rect mBound;  
  17.     private Paint mPaint;  
  18.     public CustomTitleView(Context context, AttributeSet attrs)  
  19.     {  
  20.         this(context, attrs, 0);  
  21.     }  
  22.     public CustomTitleView(Context context)  
  23.     {  
  24.         this(context, null);  
  25.     }  
  26.     /** 
  27.      * 獲得我自定義的樣式屬性 
  28.      *  
  29.      * @param context 
  30.      * @param attrs 
  31.      * @param defStyle 
  32.      */
  33.     public CustomTitleView(Context context, AttributeSet attrs, int defStyle)  
  34.     {  
  35.         super(context, attrs, defStyle);  
  36.         /** 
  37.          * 獲得我們所定義的自定義樣式屬性 
  38.          */
  39.         TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomTitleView, defStyle, 0);  
  40.         int n = a.getIndexCount();  
  41.         for (int i = 0; i < n; i++)  
  42.         {  
  43.             int attr = a.getIndex(i);  
  44.             switch (attr)  
  45.             {  
  46.             case R.styleable.CustomTitleView_titleText:  
  47.                 mTitleText = a.getString(attr);  
  48.                 break;  
  49.             case R.styleable.CustomTitleView_titleTextColor:  
  50.                 // 預設顏色設定為黑色
  51.                 mTitleTextColor = a.getColor(attr, Color.BLACK);  
  52.                 break;  
  53.             case R.styleable.CustomTitleView_titleTextSize:  
  54.                 // 預設設定為16sp，TypeValue也可以把sp轉化為px
  55.                 mTitleTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(  
  56.                         TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));  
  57.                 break;  
  58.             }  
  59.         }  
  60.         a.recycle();  
  61.         /** 
  62.          * 獲得繪製文字的寬和高 
  63.          */
  64.         mPaint = new Paint();  
  65.         mPaint.setTextSize(mTitleTextSize);  
  66.         // mPaint.setColor(mTitleTextColor);
  67.         mBound = new Rect();  
  68.         mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);  
  69.     }  

我們重寫了3個構造方法，預設的佈局檔案呼叫的是兩個引數的構造方法，所以記得讓所有的構造呼叫我們的三個引數的構造，我們在三個引數的構造中獲得自定義屬性。

3、我們重寫onDraw，onMesure呼叫系統提供的：

  1. @Override
  2.     protectedvoid onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
  3.     {  
  4.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  5.     }  
  6.     @Override
  7.     protectedvoid onDraw(Canvas canvas)  
  8.     {  
  9.         mPaint.setColor(Color.YELLOW);  
  10.         canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);  
  11.         mPaint.setColor(mTitleTextColor);  
  12.         canvas.drawText(mTitleText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint);  
  13.     }  
此時的效果是：

是不是覺得還不錯，基本已經實現了自定義View。但是此時如果我們把佈局檔案的寬和高寫成wrap_content，會發現效果並不是我們的預期：


系統幫我們測量的高度和寬度都是MATCH_PARNET，當我們設定明確的寬度和高度時，系統幫我們測量的結果就是我們設定的結果，當我們設定為WRAP_CONTENT,或者MATCH_PARENT系統幫我們測量的結果就是MATCH_PARENT的長度。

所以，當設定了WRAP_CONTENT時，我們需要自己進行測量，即重寫onMesure方法”：

重寫之前先了解MeasureSpec的specMode,一共三種類型：

EXACTLY：一般是設定了明確的值或者是MATCH_PARENT

AT_MOST：表示子佈局限制在一個最大值內，一般為WARP_CONTENT

UNSPECIFIED：表示子佈局想要多大就多大，很少使用

下面是我們重寫onMeasure程式碼：

  1. @Override
  2. protectedvoid onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
  3. {  
  4.     int widthMode = MeasureSpec.getMode(widthMeasureSpec);  
  5.     int widthSize = MeasureSpec.getSize(widthMeasureSpec);  
  6.     int heightMode = MeasureSpec.getMode(heightMeasureSpec);  
  7.     int heightSize = MeasureSpec.getSize(heightMeasureSpec);  
  8.     int width;  
  9.     int height ;  
  10.     if (widthMode == MeasureSpec.EXACTLY)  
  11.     {  
  12.         width = widthSize;  
  13.     } else
  14.     {  
  15.         mPaint.setTextSize(mTitleTextSize);  
  16.         mPaint.getTextBounds(mTitle, 0, mTitle.length(), mBounds);  
  17.         float textWidth = mBounds.width();  
  18.         int desired = (int) (getPaddingLeft() + textWidth + getPaddingRight());  
  19.         width = desired;  
  20.     }  
  21.     if (heightMode == MeasureSpec.EXACTLY)  
  22.     {  
  23.         height = heightSize;  
  24.     } else
  25.     {  
  26.         mPaint.setTextSize(mTitleTextSize);  
  27.         mPaint.getTextBounds(mTitle, 0, mTitle.length(), mBounds);  
  28.         float textHeight = mBounds.height();  
  29.         int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());  
  30.         height = desired;  
  31.     }  
  32.     setMeasuredDimension(width, height);  
  33. }  

現在我們修改下佈局檔案：
  1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     xmlns:custom="http://schemas.android.com/apk/res/com.example.customview01"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     <com.example.customview01.view.CustomTitleView
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         custom:titleText="3712"
  10.         android:padding="10dp"
  11.         custom:titleTextColor="#ff0000"
  12.         android:layout_centerInParent="true"
  13.         custom:titleTextSize="40sp"/>
  14. </RelativeLayout>

現在的效果是：


完全複合我們的預期，現在我們可以對高度、寬度進行隨便的設定了，基本可以滿足我們的需求。

當然了，這樣下來我們這個自定義View與TextView相比豈不是沒什麼優勢，所有我們覺得給自定義View新增一個事件：

在構造中新增：

  1. this.setOnClickListener(new OnClickListener()  
  2.         {  
  3.             @Override
  4.             publicvoid onClick(View v)  
  5.             {  
  6.                 mTitleText = randomText();  
  7.                 postInvalidate();  
  8.             }  
  9.         });  

  1. private String randomText()  
  2.     {  
  3.         Random random = new Random();  
  4.         Set<Integer> set = new HashSet<Integer>();  
  5.         while (set.size() < 4)  
  6.         {  
  7.             int randomInt = random.nextInt(10);  
  8.             set.add(randomInt);  
  9.         }  
  10.         StringBuffer sb = new StringBuffer();  
  11.         for (Integer i : set)  
  12.         {  
  13.             sb.append("" + i);  
  14.         }  
  15.         return sb.toString();  
  16.     }  

下面再來執行：


我們添加了一個點選事件，每次讓它隨機生成一個4位的隨機數，有興趣的可以在onDraw中新增一點噪點，然後改寫為驗證碼，是不是感覺很不錯。

好了，各位學習的，打醬油的留個言，頂個唄~

相關推薦

Android 自定義View (一)

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/24252901 很多的Android入門程式猿來說對於Android自定義View，可能都是比較恐懼的，但是這又是高手進階的必經之路，所有準備在自定義Vie

Android自定義View 一

為什麼要自定義View android提供了很多控制元件供我們使用 但有些功能是系統所提供的實現不 了的 這時候我們就需要自定義一個View來實現我們所需要的效果. 在Android中所有的控制元件都直接或間接的繼承自View,分View和ViewGr

Android自定義View--翻書控制元件（一）

0.前言 最近重看了一遍封神演義，感覺QQ閱讀那個翻書的效果挺好的，準備做一個。上週五下午用了兩個小時只寫了一部分功能，以後有時間再完善 1.分析 先看效果圖 這個空間，說簡單也簡單，說難也難，簡單就在於這個效果主要就是依賴canvas的clippath才見到部分canvas，難就難在裁

Android 自定義View（一）

前言：可是有時候我們總感覺官方定義的一些基本元件不夠用，自定義元件就不可避免了。那麼如何才能做到像官方提供的那些元件一樣用xml來定義他的屬性呢？ 先總結下自定義View的步驟： 1、自定義View的屬性； 2、在View的構造方法中獲得自定義的屬性。 一、在re

Android自定義View的實現方法，帶你一步步深入瞭解View(四)

不知不覺中，帶你一步步深入瞭解View系列的文章已經寫到第四篇了，回顧一下，我們一共學習了LayoutInflater的原理分析、檢視的繪製流程、檢視的狀態及重繪等知識，算是把View中很多重要的知識點都涉及到了。如果你還沒有看過我前面的幾篇文章，建議先去閱讀一下，多瞭解一些

Android自定義View的實現方法 帶你一步步深入瞭解View 四

                不知不覺中，帶你一步步深入瞭解View系列的文章已經寫到第四篇了，回顧一下，我們一共學習了LayoutInflater的原理分析、檢視的繪製流程、檢視的狀態及重繪等知識，算是把View中很多重要的知識點都涉及到了。如果你還沒有看過我前面的幾篇文章，建議先去閱讀一下，多瞭解一些原

android自定義View（一）、正弦波水波紋

文章目錄 1、正弦曲線知識 2、靜態正弦曲線繪製 3、動態正弦曲線繪製 4、完整原始碼 1、正弦曲線知識 對這個初中知識遺忘了的可以先看看正弦曲線百度百科詞條方便加深理解。

Android自定義view（一），打造絢麗的驗證碼

前言：我相信信念的力量，信念可以支撐起一個人，一個名族，一個國家。正如“人沒有夢想和鹹魚有什麼區別”一樣，我有信念，有理想，所以我正在努力向著夢想前進~。 自定義view，如果是我，我首先要看到自定義view的效果圖，然後再想想怎麼實現這種效果或功能，所以先貼

Android自定義View教你一步一步實現即刻點贊效果

前言 今天朋友看了HenCoder的自定義View後說，HenCoder對自定義View講的不錯。實踐中仿寫即刻的點贊你有思路嗎，你不實現一下？二話不說，看了朋友手機效果，對他說：實現不難，用到了位移，縮放，漸變動畫和自定義View的基礎用法，好，那我實現一下，剛好加深對自定義View的理解。 素材準備

Android自定義view案例一氣泡框

通過之前的兩個基礎文章的學習，我們基本知道自定義view的基本流程和各方法的作用了。那麼接下來我們就要拿起畫筆去繪製我們的view了。首先老規矩把我們的學習大綱拿出來，時刻不能忘，，哈哈、 1.自定義view單純的用畫筆繪製view（死view） 2.自定義view增加手勢

Android自定義View總結（一）基礎知識與例項

自定義View是最能體現一個Android開發者水平的技能之一了。 接下來的一些列部落格將總結一下Android的自定義相關View知識，包括View的結構，事件體系，工作原理，自定義View的繪製等。 參考資料部分來自於書上以及各種部落格。 新建了一個qq群 482

Android 自定義View之View的繪製流程(一)

View繪製流程網上已經有很多詳細介紹的文章，這裡權當給自己最近在這方面的學習的一個記錄，另外本文主要是記錄自己在實際程式碼的一些寫法，一來記錄基礎知識方便自己後面複習二來在開發中可以參考這段時間的程式碼記錄多作參考，一般遇到問題都會在網上找答案，如果自己多記錄參考自己的文章

Android自定義View高階(一)-分類與流程

一.自定義View繪製流程 二.自定義View分類 自定義ViewGroup 自定義ViewGroup一般是利用現有的元件根據特定的佈局方式來組成新的元件，大多繼承自ViewGroup或各種Layout。 自定義View 在沒有現成的View，

android自定義view-打造圓形ImageView(一)

package com.beyole.view; import com.beyole.roundimageview.R; import android.content.Context; import android.content.res.TypedArray; import android.graphi

android自定義View學習（一）----建立一個檢視類

建立一個檢視類 精心設計的自定義檢視與其他精心設計的類非常相似。它使用易於使用的介面封裝了一組特定的功能，它可以高效地使用CPU和記憶體，等等。不過，作為一個設計良好的班級，自定義檢視應該: 符合Android標準 提供適用於Android XML佈局的自

Android 自定義View--ProgressBar篇（一）

1、概述 1.1 目的 ： 在我們的日常開發中，有很多Android UI介面上有一些特殊或者特別的控制元件與介面，是Android自帶的控制元件所不能滿足的，需要我們自己定製一些適合的控制元件來完成。 1.2 Android自定義View步驟 ： 自定

android自定義view之地圖（一）

最近參加了一個比賽，要用到自己做一個自定義的小地圖，所以在網上查找了一些關於自定義view的有關資料，也瞭解了自定義控制元件的初步知識。 效果圖 第一階段我畫了一個自制的網格圖，點哪個網格就會哪個網格就會顯示。 工作環境圖 程式碼介紹

Android自定義view之屬性動畫一

Android 裡動畫是有一些分類的：動畫可以分為兩類：Animation 和 Transition；其中 Animation 又可以再分為 View Animation 和 Property Animation 兩類： View Animation 是純粹基於 framew

android自定義view學習（一）之時尚錶盤

最近在學習自定義view，順便謝謝自己的路程，後面回首看看以前的自己有多菜。。。。下方的是實現圖，首先需要說明的是，這個效果是看了一遍部落格，然後自己想著去實現，並給出此部落格：點選開啟連結正文：首先學習自定義view需要稍稍入門一下，然後是各種函式的使用，以及大量的練習，至

【朝花夕拾】Android自定義View篇之（十一）View的滑動，彈性滑動與自定義PagerView

前言        由於手機螢幕尺寸有限，但是又經常需要在螢幕中顯示大量的內容，這就使得必須有部分內容顯示，部分內容隱藏。這就需要用一個Android中很重要的概念——滑動。滑動，顧名思義就是view從一個地方移動到另外一個地方，我們平時看到的