1. 程式人生 > >自定義一個進度條為圓角的progressbar

自定義一個進度條為圓角的progressbar

package com.xctz.niceman.customcanvas;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View; /** * Created by LuanXianSheng on 2016/11/3. */ public class ColorfulRingProgressView extends View { private float mPercent ; //起始進度條的值 private float mStrokeWidth ; //進度條的寬度 private int mBgColor = 0xffe1e1e1 ; //進度條北京的顏色 private float mStartAngle ; //進度條起始角度 private int mFgColorStart
= 0xffffe400 ;//進度條起始顏色 private int mFgColorEnd = 0xffffe800 ;//進度條結束的顏色 private LinearGradient mShader ; //線性漸變 private Context mContext ; private Paint mPaint ; private RectF mOval ; private ColorfulRingProgressView(Context context) { super(context); } private ColorfulRingProgressView(Context context,
AttributeSet attrs) { super(context, attrs); mContext = context ; //獲取自定屬性裡面的值 TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ColorfulRingProgressView, 0, 0) ; try { mBgColor = typedArray.getColor(R.styleable.ColorfulRingProgressView_bgColor,0xffe1e1e1) ; mFgColorStart = typedArray.getColor(R.styleable.ColorfulRingProgressView_fgColorStart,0xffffe400) ; mFgColorEnd = typedArray.getColor(R.styleable.ColorfulRingProgressView_fgColorEnd,0xffffe800) ; mStrokeWidth = typedArray.getDimension(R.styleable.ColorfulRingProgressView_strokeWidth,dpTopx(20)) ; mStartAngle = typedArray.getFloat(R.styleable.ColorfulRingProgressView_startAngle,0)+270 ; mPercent = typedArray.getFloat(R.styleable.ColorfulRingProgressView_percent,0) ; }catch (Exception e){ typedArray.recycle(); } init(); } /** *將dp轉化為px * @param dp * @return */ private int dpTopx(float dp){ return (int)(mContext.getResources().getDisplayMetrics().density * dp + 0.5f); } /** * 初始化設定 */ private void init(){ mPaint = new Paint() ; mPaint.setStyle(Paint.Style.STROKE); mPaint.setAntiAlias(true); mPaint.setStrokeWidth(mStrokeWidth); mPaint.setStrokeCap(Paint.Cap.ROUND); //設定畫筆為圓角 } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //===========先畫圓環的背影色============== mPaint.setShader(null) ; mPaint.setColor(mBgColor); canvas.drawArc(mOval, 0, 360, false, mPaint); //===============正式畫progress的進度條的值========= mPaint.setShader(mShader) ;//進度條的顏色是漸變地 canvas.drawArc(mOval, mStartAngle, mPercent * 3.6f, false, mPaint); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); //實時監聽數值的改變,及時更新 updateOval(); mShader = new LinearGradient(mOval.left,mOval.top,mOval.left,mOval.bottom,mFgColorStart,mFgColorEnd, Shader.TileMode.MIRROR) ; } /** * 更新progress進度條的大小 */ private void updateOval() { int xp = getPaddingLeft() + getPaddingRight() ; int yp = getPaddingBottom() +getPaddingTop() ; mOval = new RectF(getPaddingLeft()+mStrokeWidth, getPaddingTop()+mStrokeWidth, getPaddingLeft()+(getWidth()-xp)-mStrokeWidth, getPaddingTop()+(getHeight()-yp)-mStrokeWidth); } public void refreshTheLayout(){ invalidate(); requestLayout(); } public float getmPercent() { return mPercent; } public void setmPercent(float mPercent) { this.mPercent = mPercent; refreshTheLayout(); } public float getmStrokeWidth() { return mStrokeWidth; } public void setmStrokeWidth(float mStrokeWidth) { this.mStrokeWidth = mStrokeWidth; mPaint.setStrokeWidth(mStrokeWidth); updateOval(); refreshTheLayout(); } public void setStrokeWidthDp(float dp){ this.mStrokeWidth = dpTopx(dp) ; mPaint.setStrokeWidth(mStrokeWidth); updateOval(); refreshTheLayout(); } public int getmFgColorStart() { return mFgColorStart; } public void setmFgColorStart(int mFgColorStart) { this.mFgColorStart = mFgColorStart; mShader = new LinearGradient(mOval.left,mOval.top,mOval.left,mOval.bottom,mFgColorStart,mFgColorEnd, Shader.TileMode.MIRROR) ; refreshTheLayout(); } public int getmFgColorEnd() { return mFgColorEnd; } public void setmFgColorEnd(int mFgColorEnd) { this.mFgColorEnd = mFgColorEnd; mShader = new LinearGradient(mOval.left,mOval.top,mOval.left,mOval.bottom,mFgColorStart,mFgColorEnd, Shader.TileMode.MIRROR) ; refreshTheLayout(); } public float getmStartAngle() { return mStartAngle; } public void setmStartAngle(float mStartAngle) { this.mStartAngle = mStartAngle +270; refreshTheLayout(); } }

相關推薦

定義一個進度圓角progressbar

package com.xctz.niceman.customcanvas; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import andro

Android 三種常用實現定義圓形進度 ProgressBar 及demo

           Android 自定義 進度條,一般有三種方式,最早一般使用UI給的圖片使用幀動畫,完成,後面兩種,一種是使用自定義顏色,另外一種是使用帶相近色的圖片加動畫完成。 下面具體 說一下三種方式,推薦使用第二種方式,如果這種達不到效果,或者比較高也可使用第一

定義圓形進度ProgressBar的三種方式

進度條預設是不確定(indeterminate=true)Android進度條 Android進度條有4種風格可以使用。 預設值是progressBarStyle。 設定成progressBarStyleSmall後,圖示變小。 設定成progressBarStyleLarge後,圖示變大 設定成progr

【Android進度】三種方式實現定義圓形進度ProgressBar

總結了3種方法: 1.多張圖片切換 2.自定義顏色 3.旋轉自定義圖片 其它: Android自定義控制元件NumberCircleProgressBar(圓形進度條)的實現:點選開啟連結 橫線帶數字進度條:點選開啟連結

ProgressBar(進度)-定義圓形進度

相信你看完2會吐槽,臥槽,這麼坑爹,拿個動畫來坑人,哈哈,實際開發中都這樣,當然上述這種情況只適用於不用顯示進度的場合,如果要顯示進度的場合就沒用處了,好吧,接下來看下網上一個簡單的自定義圓形進度條!程式碼還是比較簡單,容易理解,又興趣可以看看,或者進行相關擴充套件~

定義Android進度ProgressBar顏色的漸變設定

一、在drawable資料夾中新建my_progressbar.xml檔案 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.c

YCProgress定義百分比進度

目錄介紹 1.本庫優勢亮點 2.使用介紹 2.1 圓環百分比進度條 2.2 直線百分比進度條 2.3 仿防毒型別百分比進度條 3.注意要點 4.效果展示 5.其他介紹 1.本庫優勢亮點 圓環百分比進度條 簡便且小巧

Android 定義橫向進度(可動態設定最大值)

自定義橫向進度條       主佈局檔案中包 含          <LinearLayout android:id="@+id/linearlayout" android:layout_width="match_parent" androi

定義圓形進度

CircleBarView package wanghuiqi.bawie.com.whq_yk_moni1.model; import android.animation.ValueAnimator; import android.content.Contex

定義圓形進度(一)

由於專案需要,需要自定義一個圓形進度條,效果如下: 1 建立什麼檔案? 具體的程式碼我會放在github上,所以暫時忽略attr檔案和activity_main2檔案 2 CustomCircleProgressBar packa

android定義圓形進度,實現動態畫圓效果

自定義圓形進度條效果圖如下:應用場景如動態顯示分數等。 view的自定義屬性如下attr.xml <?xml version="1.0" encoding="UTF-8"?> <resources> <declare-style

Android之定義圓形進度

在Android開發中,對於進度條想必大家不會陌生。例如,應用在執行一個耗時操作時,會通過展示一個進度條來顯示“載入中...”的動畫作為友好頁面以提高使用者體驗。對於這樣的進度條,最簡單的實現方式就是通過美工給我們切幾張不同的圖片,最後通過幀動畫的方式來實現。通過幀動

Android定義圓形進度實現程式碼

基本思路是這樣的: 1.首先繪製一個實心圓 2.繪製一個白色實心的正方形,遮住實心圓 3.在圓的中心動態繪製當前進度的百分比字元 4.繪製一個與之前實心圓相同顏色的空心圓 5.逐漸改變當前的百分比 6.根據百分比,逐漸改變正方形的大小,逐漸減小正方形的底部y軸的座標,不斷重繪

定義View之簡單定義圓形進度

達到的效果如下: 從上面的效果可以看出,主要有以下幾個自定義屬性: 1、背景顏色 2、進度扇形顏色 3、半徑 4、起始角度 因此,在attrs.xml中定義如下屬性: <?xml version="1.0" encoding="utf-8

unity webgl定義啟動進度動畫

多多少少在unity官網webgl模板看到了Template自定義介紹,今天分享一個超級實用的 新增自定義的模板有兩種方式: 1.在你-----unity安裝位置\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\We

Android定義圓形進度

前言: 看到別人寫的那些個酷炫的動畫,心裡癢癢的,於是,自己就開始了自定義View的探索之路。如果對自定義View還不是很熟,在看我這篇文章之前,我覺得你最好先看這篇文章: 自定義View,有這一篇就夠了。 正好公司有這樣一個需求:

一步一步帶你實現定義圓形進度(詳解)

        每次看到別人做出炫酷的都會想,這個應該很難吧?這是心理上先入為主的就這麼認為了,其實實現很簡單,下面一步一步的詳細剖析自定義圓形進度條的步驟。 首先看效果圖: 篇幅有點長,耐心看完肯定get新技能。 看每一個檢視都包含了些什麼。 最

Android 定義圓形進度(圓環刻度)View

這個也剛好是公司軟體最近的需求需要到的,當初最早的版本是使用美工切好的圖,在上面的基礎上覆蓋一層背景,但多多少少的有些瑕疵。於是就自己自定義寫了一個View實現 效果圖 一、繪製圓環 圓環故名思意,第一個首先繪製是圓環 1:圓環繪製函式

定義水平進度

平時專案中經常用到自定義進度條樣式,我們一般實現的也是下面的第一種,至於第二種的圓角進度,網上介紹的資料也不是很多,這裡一起展示一下這兩種的實現。 下面開始看程式碼,先從主介面佈局開始看起: ? 1 2 3 4 5

微信小程式:定義音樂進度

需求:顯示音樂播放按鈕、可手動拖拽進度條;頁面中含多個音樂,播放當前音樂時暫停其他音樂播放。 小程式自帶標籤 audio 小程式自帶的audio標籤含固定的樣式,且有最小尺寸。目前專案也不含name和author欄位,所以放棄audio標籤。 實現