2. 程式人生 > >自定義View實現炫酷進度條

自定義View實現炫酷進度條

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

本篇部落格主要介紹利用自定義View來實現自己想要的進度載入效果，其中涉及到的內容不會說的很多，但是我會稍微解釋一下，其實只要有了思路都好處理。而且個人感覺自己寫一個自定義View要比看別人寫的自定義View要簡單一點，因為你很明白裡面屬性的意義，看別人的自定義View還需要不斷的判斷每個屬性的作用，然後是各種計算什麼的，感覺不是很好！！（這個炫酷的進度條不是我的想法，是我在網上看到的，不過很不好意思，我當時只是從他的git倉庫中把程式碼clone下來，沒有儲存原文連結，如果作者看到了，可以告訴我一下，我會將原文連結重新新增上去）。不過這篇的自定義View的實現，是我自己寫的，沒有完全拷貝作者的程式碼！！！詳細情況可以看一下我的程式碼！！

好了，廢話不多說了，先看一下效果圖：
這裡寫圖片描述這裡寫圖片描述這裡寫圖片描述

具體的程式碼的執行效果就是如上圖所示，效果不是很好，還有非常大的優化空間，有興趣的朋友可以自己更改我的程式碼，或者直接推倒重寫，謝謝！！！

主佈局檔案：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
 

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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="com.example.administrator.customview.MainActivity">

    <com.example.administrator.customview.CustomView
        android:id="@+id/pb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    </com.example.administrator.customview.CustomView>
    <Button
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="startProgressAnimation"
        android:layout_below="@id/pb"
        android:text="@string/start_animation"/>
</RelativeLayout>

在這裡主要是將我自定義的View引入到佈局中，就不做過多的介紹了！！！

Activity檔案：

package com.example.administrator.customview;

import android.os.CountDownTimer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private CustomView cv;
    private int progressValue = 0;
    private boolean mProgressIsRunning = false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        cv = (CustomView) findViewById(R.id.pb);
    }

    public void startProgressAnimation(View view){
        if (mProgressIsRunning){
            timer.cancel();
            timer.onFinish();
        }else{
            mProgressIsRunning = true;
            if (progressValue>=100){
                progressValue = 0;
            }
            timer.start();
        }
    }

    private CountDownTimer timer = new CountDownTimer(Integer.MAX_VALUE,100) {
        @Override
        public void onTick(long millisUntilFinished) {
            cv.setProgressValue(progressValue);
            progressValue ++;
        }

        @Override
        public void onFinish() {
            mProgressIsRunning = false;
        }
    };
}

使用一個定時器來模擬載入時value變化，根據時間不斷的調整Value值，給人進度不斷變化的感覺。這裡的cv就是我們自定義的View。

CustomView檔案(這個很關鍵，主要就是這個檔案)：

package com.example.administrator.customview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;
import java.util.Random;

/**
 * Created by zhuyuqiang on 2017/3/13.
 */

public class CustomView extends View {

    private final int WHITE_COLOR = Color.WHITE;
    private final int ORANGE_COLOR = 0xffffa800;
    //確定葉子旋轉方向
    private final int ROTATE_RIGHT = 0;
    private final int ROTATE_LEFT = 1;
    private final int ROTATE_DEGREE = 5;
    //確定葉子垂直方向的振幅大小
    private final int SMALL_AMPLITUDE = 0;
    private final int MIDDLE_AMPLITUDE = 1;
    private final int BIG_AMPLITUDE = 2;
    private final int SMALL_Y = 1;
    private final int MIDDLE_Y = 2;
    private final int BIG_Y = 3;
    //確定葉子水平方向的移動大小
    private final int SMALL_TRANSITION = 0;
    private final int MIDDLE_TRANSITION = 1;
    private final int BIG_TRANSITION = 2;
    private final int SMALL_X = 5;
    private final int MIDDLE_X = 10;
    private final int BIG_X = 15;
    private Paint mWhitePaint,mOrangePaint,mBitmapPaint;
    private int mPadding_left,mPadding_top,mPadding_right,mPadding_bottom;
    private Point mLeftCircleCenter,mRightCircleCenter,mFengshanPoint;
    private BitmapContainer mLeafContainer,mFengShanContainer,mBg_Container;
    private Matrix mFengShanRotate,mLeafMatrix,mTextMatrix;
    private int startDegree = 0;
    private int mProgressValue = 0;
    private int radius;
    private final float MAX_PROGRESS_VALUE = 100;
    private RectF mLeftArcRect;
    private Rect mTextRect;
    private final int max = 10;
    private int y_step = 2;
    private final String mFinish= "100%";
    private float mTextScale = 0.1f;
    private int mTextSize = 42;
    private List<Leaf> mLeaves = new ArrayList<>();
    private onProgressChangedListener listener;
    public interface onProgressChangedListener{
        void onProgressValueChanged(int progressValue);
    }

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

    public CustomView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr,0);
    }

    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initAttrs();
        initBitmaps();
        initPaints();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getCustomMeasureWidth(widthMeasureSpec),getCustomMeasureHeight(heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        initKeyPoints();
        initMatrix();
        generateLeaves();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawLeafs(canvas);
        drawProgress(canvas);
        canvas.drawBitmap(mBg_Container.src,mPadding_left,mPadding_top,mBitmapPaint);
        drawFengShan(canvas);
        postInvalidateDelayed(50);
    }

    private void drawLeafs(Canvas canvas) {
        int mProgressWidth = (int) ((mProgressValue/MAX_PROGRESS_VALUE)*(getWidth()-mPadding_left-mPadding_right-radius));
        for (Leaf mLeaf:mLeaves){
            canvas.save();
            mLeafMatrix.reset();
            mLeafMatrix.preRotate(mLeaf.degree,mLeafContainer.width/2,mLeafContainer.height/2);
            switch (mLeaf.rotateDirection){
                case ROTATE_LEFT:
                    mLeaf.degree = mLeaf.degree-ROTATE_DEGREE;
                    break;
                case ROTATE_RIGHT:
                    mLeaf.degree = mLeaf.degree+ROTATE_DEGREE;
                    break;
            }
            mLeafMatrix.postTranslate(mLeaf.position.x-50,mLeaf.position.y-mLeafContainer.height/2);
            switch (mLeaf.transition){
                case SMALL_TRANSITION:
                    mLeaf.position.x = mLeaf.position.x - SMALL_X;
                    break;
                case MIDDLE_TRANSITION:
                    mLeaf.position.x = mLeaf.position.x - MIDDLE_X;
                    break;
                case BIG_TRANSITION:
                    mLeaf.position.x = mLeaf.position.x - BIG_X;
                    break;
            }
            switch (mLeaf.transition){
                case SMALL_AMPLITUDE:
                    if(mLeaf.position.y<(mRightCircleCenter.y-max)){
                        y_step = -SMALL_Y;
                    }else if (mLeaf.position.y>(mRightCircleCenter.y+max)){
                        y_step = SMALL_Y;
                    }
                    break;
                case MIDDLE_AMPLITUDE:
                    if(mLeaf.position.y<(mRightCircleCenter.y-max)){
                        y_step = -MIDDLE_Y;
                    }else if (mLeaf.position.y>(mRightCircleCenter.y+max)){
                        y_step = MIDDLE_Y;
                    }
                    break;
                case BIG_AMPLITUDE:
                    if(mLeaf.position.y<(mRightCircleCenter.y-max)){
                        y_step = -BIG_Y;
                    }else if (mLeaf.position.y>(mRightCircleCenter.y+max)){
                        y_step = BIG_Y;
                    }
                    break;
            }

            mLeaf.position.y = mLeaf.position.y - y_step;
            if(mLeaf.position.x > mProgressWidth+mPadding_left+10){
                canvas.drawBitmap(mLeafContainer.src,mLeafMatrix,mBitmapPaint);
            }else{
                mLeaf.position.set(mRightCircleCenter.x-radius,mRightCircleCenter.y-mLeafContainer.height/2);
                mLeaf.transition = new Random().nextInt(3);
                mLeaf.degree = new Random().nextInt(360);
                mLeaf.rotateDirection = new Random().nextInt(2);
                mLeaf.amplitude = new Random().nextInt(3);
            }
            canvas.restore();
        }
    }

    public void setProgressValue(int value){
        this.mProgressValue = value;
        invalidate();
    }

    public int getProgressValue(){
        return mProgressValue;
    }

    public void setProgressChangeListener(onProgressChangedListener listener){
        this.listener = listener;
    }

    private void drawProgress(Canvas canvas) {

        int shouldDrawWidth = (int) ((mProgressValue/MAX_PROGRESS_VALUE)*(getWidth()-mPadding_left-mPadding_right-radius));
        Log.d("zyq_progress","shouldDrawWidth = "+shouldDrawWidth);
        if(shouldDrawWidth<(mLeftCircleCenter.x-mPadding_left)){
            float degree = (float) Math.toDegrees(Math.acos((radius - shouldDrawWidth)
                    / (float) radius));
            canvas.save();
            canvas.drawArc(mLeftArcRect,180-degree,2*degree,false,mOrangePaint);
        }else{
            if (shouldDrawWidth>mRightCircleCenter.x){
                shouldDrawWidth = mRightCircleCenter.x;
            }
            canvas.save();
            canvas.drawArc(mLeftArcRect,90,180,true,mOrangePaint);
            canvas.drawRect(radius+mPadding_left,mPadding_top,shouldDrawWidth,2*radius+mPadding_top,mOrangePaint);
            canvas.restore();
        }
        if(listener != null){
            listener.onProgressValueChanged(mProgressValue);
        }
    }

    private void drawFengShan(Canvas canvas){
        if(mProgressValue<100){
            startDegree = startDegree+15;
            canvas.save();
            mFengShanRotate.reset();
            mFengShanRotate.preRotate(startDegree,mFengShanContainer.width/2,mFengShanContainer.height/2);
            mFengShanRotate.postTranslate(mFengshanPoint.x,mFengshanPoint.y);
            Log.i("zyq","mFengshanPoint.x ="+mFengshanPoint.x+" mFengshanPoint.y="+mFengshanPoint.y);
            canvas.drawBitmap(mFengShanContainer.src,mFengShanRotate,mBitmapPaint);
            canvas.restore();
        }else{
            canvas.save();
            mTextMatrix.reset();
            if(mTextScale<1){
                mWhitePaint.setTextSize(mTextSize*mTextScale);
                mWhitePaint.getTextBounds(mFinish,0,mFinish.length(),mTextRect);
            }else{
                mWhitePaint.setTextSize(mTextSize);
                mWhitePaint.getTextBounds(mFinish,0,mFinish.length(),mTextRect);
            }
            canvas.drawText(mFinish,0,mFinish.length(),mRightCircleCenter.x-((mTextRect.width())/2),
                    mRightCircleCenter.y+(mTextRect.height()/2),mWhitePaint);
            mTextScale = mTextScale+0.1f;
            canvas.restore();
        }

    }

    private void initKeyPoints(){
        mLeftCircleCenter = new Point();
        radius = getHeight()/2-mPadding_bottom/2-mPadding_top/2;
        mLeftCircleCenter.y = radius+mPadding_top;
        mLeftCircleCenter.x = radius+mPadding_right;
        Log.d("zyq_point","View,height="+getHeight()+" mLeftCircleCenter.x = "+mLeftCircleCenter.x+"mLeftCircleCenter.y="+mLeftCircleCenter.y);
        mRightCircleCenter = new Point();
        mRightCircleCenter.y = radius+mPadding_top;
        mRightCircleCenter.x = getWidth()-radius-mPadding_right;
        Log.d("zyq_point","mRightCircleCenter.x = "+mRightCircleCenter.x+"mRightCircleCenter.y="+mRightCircleCenter.y);
        mFengshanPoint = new Point();
        mFengshanPoint.x = mRightCircleCenter.x-mFengShanContainer.width/2;
        mFengshanPoint.y = mRightCircleCenter.y-mFengShanContainer.height/2;
        Log.d("zyq_point","mFengshanPoint.x = "+mFengshanPoint.x+"mFengshanPoint.y="+mFengshanPoint.y);
    }

    private void initPaints(){
        mWhitePaint = new Paint();
        mWhitePaint.setAntiAlias(true);
        mWhitePaint.setDither(true);
        mWhitePaint.setTextSize(32);
        mWhitePaint.setTextAlign(Paint.Align.LEFT);
        mWhitePaint.setStrokeWidth(6f);
        mWhitePaint.setColor(WHITE_COLOR);


        mOrangePaint = new Paint();
        mOrangePaint.setAntiAlias(true);
        mOrangePaint.setDither(true);
        mOrangePaint.setColor(ORANGE_COLOR);
        mOrangePaint.setStyle(Paint.Style.FILL);

        mBitmapPaint = new Paint();
        mBitmapPaint.setAntiAlias(true);
        mBitmapPaint.setDither(true);
        mBitmapPaint.setFilterBitmap(true);
    }

    private void initBitmaps(){
        Bitmap mLeaf = ((BitmapDrawable)getResources().getDrawable(R.drawable.leaf_drawable,null)).getBitmap();
        Bitmap mFengShan = ((BitmapDrawable)getResources().getDrawable(R.drawable.fengshan_drawable,null)).getBitmap();
        Bitmap mbg_kuang = ((BitmapDrawable)getResources().getDrawable(R.drawable.leaf_kuang_drawable,null)).getBitmap();
        mLeafContainer = new BitmapContainer();
        mLeafContainer.src = mLeaf;
        mLeafContainer.width = mLeaf.getWidth();
        mLeafContainer.height = mLeaf.getHeight();

        mFengShanContainer = new BitmapContainer();
        mFengShanContainer.src = mFengShan;
        mFengShanContainer.width = mFengShan.getWidth();
        mFengShanContainer.height = mFengShan.getHeight();
        Log.i("zyq","fen:width="+mFengShanContainer.width+" height="+mFengShanContainer.height);

        mBg_Container = new BitmapContainer();
        mBg_Container.src = mbg_kuang;
        mBg_Container.width = mbg_kuang.getWidth();
        mBg_Container.height = mbg_kuang.getHeight();
        Log.i("zyq_Bg_Container","mBg_Container:width="+mBg_Container.width+" height="+mBg_Container.height);
    }

    private void initMatrix(){
        mFengShanRotate = new Matrix();
        mLeafMatrix = new Matrix();
        mTextMatrix = new Matrix();
        calculatePosition();
    }

    private void calculatePosition(){
        mLeftArcRect = new RectF();
        mLeftArcRect.left = mPadding_left;
        mLeftArcRect.top = mPadding_top;
        mLeftArcRect.right = 2*radius+mPadding_left;
        mLeftArcRect.bottom = 2*radius+mPadding_top;
        mTextRect = new Rect();
        mWhitePaint.getTextBounds(mFinish,0,mFinish.length(), mTextRect);
    }

    private class BitmapContainer{
        Bitmap src;
        int width;
        int height;
    }

    private class Leaf{
        Point position;
        int degree;
        long startTime;
        int rotateDirection;
        int amplitude;
        int transition;
        public Leaf(){
            position = new Point();
            position.set(mRightCircleCenter.x-radius,mRightCircleCenter.y);
            degree = new Random().nextInt(360);
            startTime = System.currentTimeMillis();
            rotateDirection = new Random().nextInt(2);
            amplitude = new Random().nextInt(3);
            transition = new Random().nextInt(3);
        }
        public Leaf(int transition){
            position = new Point();
            position.set(mRightCircleCenter.x-radius,mRightCircleCenter.y);
            degree = new Random().nextInt(360);
            startTime = System.currentTimeMillis();
            rotateDirection = new Random().nextInt(2);
            amplitude = new Random().nextInt(3);
            this.transition = transition;
        }
    }

    private void generateLeaves() {
        if(mLeaves.isEmpty()){
            for(int i = 0;i<3;i++){
                Leaf l = new Leaf(i);
                mLeaves.add(l);
            }
        }
    }

    private int getCustomMeasureWidth(int widthMeasureSpec){
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int size = MeasureSpec.getSize(widthMeasureSpec);
        if (mode == MeasureSpec.EXACTLY){
            Log.i("zyq_view","view.size = "+size);
            return size;
        }else{
            Log.i("zyq_view","view.width = "+(mBg_Container.width+getPaddingLeft()+getPaddingRight()));
            return mBg_Container.width+getPaddingLeft()+getPaddingRight();
        }
    }

    private int getCustomMeasureHeight(int heightMeasureSpec){
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int size = MeasureSpec.getSize(heightMeasureSpec);
        if (mode == MeasureSpec.EXACTLY){
            return size;
        }else{
            return mBg_Container.height+getPaddingTop()+getPaddingBottom();
        }
    }

    private void initAttrs() {
        mPadding_left = getPaddingLeft();
        mPadding_top = getPaddingTop();
        mPadding_right = getPaddingRight();
        mPadding_bottom = getPaddingBottom();
        Log.i("zyq_pad","left="+mPadding_left+" top="+mPadding_top+" right="+mPadding_right+" bottom="+mPadding_bottom);
    }
}

在檔案剛開始的時候，定義了各種寬高，比如葉子每次水平移動的距離、垂直移動的距離，旋轉的角度、旋轉的方向等。基本上來說就是你想控制什麼樣的動作，就需要你定義什麼樣的屬性，通過屬性控制物件的動作。這裡的三個圖片都是提前準備好的。然後在view中獲取這個單個圖片對應的bitmap，並獲取每個bitmap的寬高，這裡的寬高用於以後確定這些bitmap的繪製位置。

在實際的繪製過程中，還需要考慮圖層的關係，因為需要有葉子融入的感覺，所以在這裡把繪製葉子的步驟放在最前面，這樣實現的了葉子融入的感覺。

其次，自定義View中的動畫都是通過控制矩陣來實現，比如旋轉、移動等。但是字型放大的動畫，我試過矩陣，但是不起作用，最後不得已通過改變字型尺寸來實現，希望有知道的朋友可以告訴我一下，不勝感激！！！

其實，其他的動畫還好，就是葉子的動畫不太好弄，因為需要一種，葉子隨機出現的效果，我這裡做的不好，希望大神們可以幫忙更改一下！！原作者的葉子動畫是與時間關聯的，我沒有采用，只是限定了葉子出現的位置。具體的情況，還請麻煩各位看程式碼吧！！！

好了，關於自定義View，暫時就說到這裡，以後還將繼續介紹有關於自定義View方面的內容，希望大家可以關一下！！！

這是我的微信公眾號，如果可以的話，希望您可以幫忙關注一下，這將是對我最大的鼓勵了，謝謝！！

公眾號

相關推薦

自定義View實現炫酷進度條

本篇部落格主要介紹利用自定義View來實現自己想要的進度載入效果，其中涉及到的內容不會說的很多，但是我會稍微解釋一下，其實只要有了思路都好處理。而且個人感覺自己寫一個自定義View要比看別人寫的自定義View要簡單一點，因為你很明白裡面屬性的意義，看別人的自定義

自定義View實現圓形水波進度條

每次聽到某大牛談論自定義View，頓時敬佩之心，如滔滔江水連綿不絕，心想我什麼時候能有如此境界，好了，心動不如行動，於是我開始了自定義View之路，雖然過程有坎坷，但是結果我還是挺滿意的。我知道大牛還遙不可及，但是我已使出洪荒之力。此篇部落格記錄本人初入自定義View之路。 既

自定義View---實現半圓環形進度條

圖表控制元件很多，這個多少能跟圖表控制元件扯上邊吧。 廢話不多說，看圖： 上面可以看到效果，支援各種自定義，支援點選 這裡沒有用到 自定義屬性。有興趣的可以自己設定下。直接看程式碼 public class CircleBar e

自定義View實現圓形水波進度條（上）

來源：伯樂線上專欄作者 - Code4Android 連結：http://android.jobbole.com/84776/ 每次聽到某大牛談論自定義View，頓時敬佩之心，如滔滔江水連綿不絕，心想我什麼時候能有如此境界，好了，心動不如行動，於是我開始了自定義View之路，雖然過程有坎坷，但是

Android自定義View實現炫酷的主題切換動畫(仿酷安客戶端)

前兩日偶然看到了一個很炫酷的動畫效果： 判斷它是不是用的ValueAnimator, 如果是的話, 我們可以在設定-開發者選項裡面設定 “動畫時長縮放”來改變動畫時長. 所以這次我們通過設定這個選項, 把動畫速度降低之後, 很快就看出了其中的奧妙

自定義View實現圓形水波進度條（下）

來源：伯樂線上專欄作者 - Code4Android 連結：http://android.jobbole.com/84776/ 接上文 通過效果圖，我們看到實現此效果就是不斷的更新進度值，然後重繪，，那麼我們只需開啟一個執行緒實現更新進度值，為了更好的控制我們再

Android 自定義View ProgressBarHorizontal：橫向進度條、支援圓角、漸變、圖片

背景：因系統的ProgressBar設定圖片時，如果圖片不夠大，而在大解析度的手機上時會出現無法填充滿，所以自己寫一個，既修復該問題，又可方便拓展，所以拋磚引玉 功能介紹：橫向進度條，分為背景與封面兩層，封面與背景均支援圓角矩形、漸變、圖片。 效果圖： （上面仿微博

Android 自定義view --圓形百分比（進度條）

注：本文由於是在學習過程中寫的，存在大量問題(overdraw onDraw new物件)，請讀者們不要被誤導！！解決辦法見後面的部落格。 起因 最近公司專案有需求需要用到輕量級圖表如下

自定義View——簡單的圓點進度條

　　說是進度條，更像是刻度條，先看效果。 　　再下來是程式碼： import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint

一個簡單的自定義View，仿圓形進度條

一個很簡單的小例子，，整理一下 效果圖 上程式碼，程式碼中應該註釋很清楚了，就不再贅述，是模仿洋大神寫的，然後自己又加了一點兒自己的理解。 程式碼如下 package com.example.roundview; import android.content.Cont

自定義view-仿移動扇形進度條

            效果圖如下：                          一.圖形的拆解             1,由兩個圓弧組成，一個是透明的弧，另一個則是綠色的弧             2.文字的繪製               1.弧形區域的計算與

自定義View之炫酷的水滴ViewPageIndicator

 *本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出          去年在是某個Android群了看到有人發了一個設計圖，覺得很好。想自己實現一下，到上網搜了一些資料，比如參考，這位兄弟已經把如何繪製一個彈性的圓寫的很詳細了，在此對他表示感謝。不過他沒

CSS3實現炫酷進度條

看了一個進度條很漂亮，所以自己試試看 html <div class="load-container"> <span class="run"></span> <div class="meter">0</div&

Android 自定義view之圓盤進度條

很久沒有用到自定義View了，手有點生疏了，這不同事剛扔給一個活，按照UI的要求，畫一個進度條，帶動畫效果的。需求是這樣的： 嗯，實現後效果如下： 嗯，算是基本滿足需求吧。 本文包含的知識點 1、自定義view的繪製 2、屬性動畫 3、影象的

自定義View實現圓形進度條跳轉頁面

效果： //首先在values資料夾下建立一個attrs.xml: ?xml version=“1.0” encoding=“utf-8”?> //佈局： <?xml version="1.0" encoding="utf-8"?>

Android 自定義View實現動態炫酷按鈕

普通按鈕也就那麼幾種樣式，看著都審美疲勞，先放效果圖，演示Demo+原始碼在最後面 你會不會以為這個按鈕是集結了很多動畫的產物，我告訴你，並沒有。所有的實現都是基於自定義View，採用最底層的onDraw一點一點的畫出來的。沒有采用一丁點的動畫。雖然演示時間很短，但是要

Android 自定義View實現圓形進度條 深入理解onDraw和onMeasure及自定義屬性

Android的View類是使用者介面的基礎構件，表示螢幕上的一塊矩形區域，負責這個區域的繪製和事件處理。自定義View的過程主要包括重寫onDraw及onMeasure方法 , 其中onMeasure方法的作用就是計算出自定義View的寬度和高度。這個計算的過

我的Android進階之旅------>Android自定義View實現帶數字的進度條（NumberProgressBar）

今天在Github上面看到一個來自於 daimajia所寫的關於Android自定義View實現帶數字的進度條（NumberProgressBar）的精彩案例，在這裡分享給大家一起來學習學習！同時感謝daimajia的開源奉獻！ 第一步、效果展

Android自定義控制元件NumberCircleProgressBar(圓形進度條)的實現

Mode Rotate 實現方式 1.使用unreachedarea的顏色繪製Circle，作為底層； canvas.drawCircle(centerX, centerY,mCircleRadius, mCirclePaint); 2.使用reacherarea的顏色繪製扇形，作為中間層； canvas.

Android：自定義View實現水波進度效果

首先上效果圖： 簡介： 1.自動適應螢幕大小； 2.水波自動橫向滾動； 3.各種繪製引數可通過修改常量進行控制。 程式碼不多，註釋也比較詳細，全部貼上： （一）自定義元件： /** * 水波進度效果. */ public class WaterWaveView e