2. 程式人生 > >Android自定義View簡單版

Android自定義View簡單版

阿新 • • 發佈：2018-12-05

1. 自繪控制元件

  自繪控制元件的內容都是自己繪製出來時，在View的onDraw方法中完成繪製。下面是一個簡單的計數器 每點選一次 計數值就加一

執行效果如下：
在這裡插入圖片描述
建立CounterView類，繼承View,實現OnClickListener介面：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

public class CounterView extends View implements View.OnClickListener {
    // 定義畫筆
    private Paint mPaint;
    // 用於獲取文字的寬和高
    private Rect mBounds;
    // 計數值，每點選一次本控制元件，其值增加1
    private int mCount;

    public CounterView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 初始化畫筆、Rect
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBounds = new Rect();
        // 本控制元件的點選事件
        setOnClickListener(this);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.BLUE);
        canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);
        mPaint.setColor(Color.YELLOW);
        mPaint.setTextSize(50);
        String text = String.valueOf(mCount);
        mPaint.getTextBounds(text, 0, text.length(), mBounds);
        float textWidth = mBounds.width();
        float textHeight = mBounds.height();
        // 繪製字串
        canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2
                + textHeight / 2, mPaint);
    }

    @Override
    public void onClick(View v) {
        mCount++;
        //重繪
        invalidate();
    }
}

在activity_main.xml中引入該自定義佈局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.day1.weight.CounterView
        android:id="@+id/counter_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal|top"
        android:layout_margin="20dp" />
   
</android.support.constraint.ConstraintLayout>

2. 重寫View來實現全新控制元件

效果如下
在這裡插入圖片描述

  <declare-styleable name="circleView">
        <attr name="textSize" format="dimension" />
        <attr name="text" format="string" />
        <attr name="circleColor" format="color" />
        <attr name="arcColor" format="color" />
        <attr name="textColor" format="color" />
        <attr name="startAngle" format="integer" />
        <attr name="sweepAngle" format="integer" />
    </declare-styleable>

Ⅰ、textSize——對應中間文字文字的大小

Ⅱ、text——對應中間文字

Ⅲ、circleColor——對應內圓的顏色

Ⅳ、arcColor——對應外環的顏色

Ⅴ、textColor——對應文字的顏色

Ⅵ、startAngle——對應外環的起始角度

Ⅶ、sweepAngle——對應外環掃描角度

建立CircleView類，繼承View

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import com.example.day1.R;

public class CircleView extends View {

    private int startAngle;
    private int sweepAngle;
    private String text;
    private float textSize;
    private int textColor;
    private int circleColor;
    private int arcColor;
    private int mCircleXY;
    private float mRadius;
    private Paint mCirclePaint;
    private RectF mRectF;
    private Paint mArcPaint;
    private Paint mTextPaint;

    public CircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.circleView);
        if (ta != null) {
            circleColor = ta.getColor(R.styleable.circleView_circleColor, 0);
            arcColor = ta.getColor(R.styleable.circleView_arcColor, 0);
            textColor = ta.getColor(R.styleable.circleView_textColor, 0);
            textSize = ta.getDimension(R.styleable.circleView_textSize, 50);
            text = ta.getString(R.styleable.circleView_text);
            startAngle = ta.getInt(R.styleable.circleView_startAngle, 0);
            sweepAngle = ta.getInt(R.styleable.circleView_sweepAngle, 90);
            ta.recycle();
        }
    }

    private void init() {
        int length = Math.min(getWidth(), getHeight());
        mCircleXY = length / 2;
        mRadius = length * 0.5f / 2;
        mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCirclePaint.setColor(circleColor);
        mRectF = new RectF(length * 0.1f, length * 0.1f, length * 0.9f,
                length * 0.9f);

        mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mArcPaint.setColor(arcColor);
        mArcPaint.setStyle(Paint.Style.STROKE);
        mArcPaint.setStrokeWidth((getWidth() * 0.1f));

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setTextSize(textSize);
        mTextPaint.setColor(textColor);
        mTextPaint.setTextAlign(Paint.Align.CENTER);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        init();
        drawSth(canvas);
    }

    public void drawSth(Canvas canvas) {
        canvas.drawCircle(mCircleXY, mCircleXY, mRadius, mCirclePaint);
        canvas.drawArc(mRectF, startAngle, sweepAngle, false, mArcPaint);
        canvas.drawText(text, 0, text.length(), mCircleXY, mCircleXY + textSize
                / 4, mTextPaint);
    }
}

在activity_main.xml中引入該自定義佈局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.day1.weight.CircleView
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:startAngle="0"
        app:sweepAngle="270"
        app:text="hehe"
        app:textSize="30sp"
        app:textColor="@color/colorPrimaryDark"
        app:circleColor="@color/colorPrimary"
        app:arcColor="@color/colorAccent" />
</android.support.constraint.ConstraintLayout>

3. 動態條形圖

首先，在OnMeasure（）方法中計算出每個矩形寬與高，這裡為了方便起見，每個矩形預設的高為螢幕的高，每個矩形的寬這裡定義為螢幕的寬度乘以80%除以矩形的個數。然後根據寬與高來初始化筆刷（Paint）。為什麼要根據寬與高來初始化筆刷了，這裡我為了使自定義View更加的逼真，我這裡使用LinearGradient（線性渲染器）進行了渲染，這個物件需要使用矩形寬與高。需要指出來的是這個自定義控制元件是動態的，我只需要onDraw方法不斷髮生重繪，這裡為了防止控制元件重新整理太快，我這裡每隔300毫秒重新整理檢視。
最終，執行效果如下：
在這裡插入圖片描述

這個控制元件的完整原始碼如下：

    <declare-styleable name="volumneView">
        <attr name="count" format="integer" />
    </declare-styleable>

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

import com.example.day1.R;

public class VolumneView extends View {
    private Paint mPaint;
    private int mCount;
    private int mWidth;
    private int mRectHeight;
    private int mRectWidth;
    private LinearGradient mLinearGradient;
    private double mRandom;
    private float mcurrentHeight;
    public static final int OFFSET = 5;

    public VolumneView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);

    }

    private void initView(Context context, AttributeSet attrs) {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.FILL);
        TypedArray ta = context.obtainStyledAttributes(attrs,
                R.styleable.volumneView);
        if (ta != null) {
            mCount = ta.getInt(R.styleable.volumneView_count, 6);
            ta.recycle();
        }
    }

    public VolumneView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public VolumneView(Context context) {
        this(context, null);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = getMeasuredWidth();
        mRectHeight = getMeasuredHeight();
        mRectWidth = (int) (mWidth * 0.8 / mCount);
        mLinearGradient = new LinearGradient(0, 0, mRectWidth, mRectHeight,
                Color.GREEN, Color.YELLOW, Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < mCount; i++) {
            mRandom = Math.random();
            mcurrentHeight = (float) (mRectHeight * mRandom);
            float width = (float) (mWidth * 0.4 / 2 + OFFSET);
            canvas.drawRect(width + i * mRectWidth, mcurrentHeight, width
                    + (i + 1) * mRectWidth, mRectHeight, mPaint);
        }
        postInvalidateDelayed(300);
    }
}

相關推薦

Android自定義View簡單版

1. 自繪控制元件 自繪控制元件的內容都是自己繪製出來時，在View的onDraw方法中完成繪製。下面是一個簡單的計數器 每點選一次 計數值就加一 執行效果如下： 建立CounterView類，繼承View,實現OnClickListener介面： import andr

Android自定義view--簡單轉盤

大概效果如下： 在activity_main.xml中引入該自定義佈局： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/

Android自定義View——簡單實現邊緣凹凸電子票效果

效果展示原理分析View繼承LinearLayout，在View的上下邊緣畫出白色的圓形即可，這裡只要計算出圓的個數和圓的迴圈規律即可，下面請看分析我們取卡片的前2個凹凸來看，將其分為四部分，並且兩部分為迴圈可得到另兩部分，其中我們只要計算出圓的半徑位置，我們就可以重複的畫出

Android零基礎入門第24節：自定義View簡單使用

子類 protect jin 討論 我們 @+ amp 進階 運行程序 當我們開發中遇到Android原生的組件無法滿足需求時，這時候就應該自定義View來滿足這些特殊的組件需求。 一、概述 很多初入Android開發的程序員，對於Android自定義View可能比較

Android自定義View：你需要一個簡單好用、含歷史搜尋記錄的搜尋框嗎？

前言 Android開發中，類似下圖的搜尋功能非常常見 今天，我將帶來一款 封裝了 歷史搜尋記錄功能 & 樣式 的Android 自定義搜尋框 開源庫，希望你們會喜歡。

【Android自定義View實戰】之自定義超簡單SearchView搜尋框

package cn.bluemobi.dylan.searchview; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.util.A

Android自定義View之實現簡單炫酷的球體進度球

前言 最近一直在研究自定義view，正好專案中有一個根據下載進度來實現球體進度的需求，所以自己寫了個進度球，程式碼非常簡單。先看下效果： 效果還是非常不錯的。 準備知識 要實現上面的效果我們只要掌握兩個知識點就好了，一個是Handler機制，用於發訊息重新整理我們的進度球，一個是clip

Android自定義View實現簡單的折線圖、柱狀圖

首先說第一個柱狀圖，實現很簡單。一個自定義View，重現裡面的OnDraw方法。然後利用paint，canvas繪製帶填充的長方形即可。每個長方形的X軸平方View的x軸即可，長方形的高度通過簡單的計算即可得到。下面上柱狀圖程式碼 package com.hrules.

Android 自定義View

wid declare created odi lex getwidth 實現 tdi led 　　最近在看鴻洋大神的博客，在看到自定義部分View部分時，想到之前案子中經常會要用到"圖片 + 文字"這類控件，如下圖所示： 之前的做法是在布局文件中，將一個Imag

Android自定義view詳解

this boolean mar 處理 都是 並且 jdk text 命名 從繼承開始 懂點面向對象語言知識的都知道：封裝，繼承和多態，這是面向對象的三個基本特征，所以在自定義View的時候，最簡單的方法就是繼承現有的View 通過上面這段代碼，我定義了一個Ske

Android -- 自定義view實現keep歡迎頁倒計時效果

super onfinish -m use new getc awt ttr alt 1，最近打開keep的app的時候，發現它的歡迎頁面的倒計時效果還不錯，所以打算自己來寫寫，然後就有了這篇文章。 2，還是老規矩，先看一下我們今天實現的效果 　　相較於我們常見的倒計時

Android自定義View效果目錄

class 重寫 自定義 textview 居中 url 冒泡 and 雷達圖 1、絢麗的loading動效的實現 2、Android自定義View：進度條+冒泡文本 3、Android雷達圖（蜘蛛網圖） 4、Android文本閃爍 5、Android繪制圓形進度條 6、重

Android自定義View——實現水波紋效果類似剩余流量球

string 三個點 pre ber block span 初始化 move 理解 最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終於功夫不負有心人最後實現了想要的效果，一起來看下吧： 效果圖鎮樓 一：先一步一步來分解一下實現的過程 需要繪制一個正弦曲線(sin

Android 自定義 View 知識點

移動 encode swe em1 red 鋸齒 枚舉類 map() tex 根據 Hencoder 提供的知識點，進行學習和總結。 三個要點： 布局 繪制 觸摸反饋 繪制 自定義繪制：由自己實現繪制過程 常用繪制方法 onDraw(Canvas canvas) 繪制

Android自定義view與activity的傳值

重復 轉動 自定義 activit 廣播 內部 代碼 view 等待 昨晚在寫團隊項目的時候，遇到一個問題，直到今天早上才解決。。。即在自定義view“轉盤”結束轉動後獲取結果的處理中，我是想吧值傳到activity中的一個textview中的，但我的自定義view類不是a

Android 自定義View - 助記詞

UI今天給了個需求，把亂序的單詞拼成一句話，如下圖： 本來計劃是用ViewGroup+TextView寫的，突然腦子抽了想用paint來畫(寫完就後悔了-.-) 先看一下完成後的效果 前期的思路是這樣的： 1.測量每個單詞的高度和寬度，計算出所有單詞排列後的高*2，就是view

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

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

Android 自定義view深入剖析

前言 自定義View原理是Android開發者必須瞭解的基礎； 在瞭解自定義View之前，你需要有一定的知識儲備； 本文將全面解析關於自定義View中的所有知識基礎。 目錄 1. View的分類 檢視View主要分為兩類：

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android 自定義view（1) --- Attr、Style和Theme詳解

轉載：https://www.jianshu.com/p/dd79220b47dd 概念說明:       Attr：屬性，風格樣式的最小單元；      Style：風格，它是一系列Attr的集合用以定義一個View