自定義View之漸變色圓形進度條
先展示下效果圖:
然後按照自定義view的步驟來實現。
我們需要將目標定義清楚:
目標是漸變色圓形進度條,那麼,使用canvas畫弧形是基礎了,另外是漸變色的效果,這裡使用LinearGradient來實現。
既然是提供一個進度條,那麼,是需要自定義View的使用者來進行設定進度值的。
另外,將漸變色的介面也提供出來了,這樣,使用者就可以根據需要自己定義喜歡的漸變色效果。
還有view的大小,使用直徑來表示。
最後,要展示進度條如何使用,用了一個定時器,每秒推進一次進度。
下面來具體實現:
1、自定義View的屬性
在values下面新建一個attr.xml,現在裡面定義我們的屬性,
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="diameter" format="dimension" />
<declare-styleable name="CircleProgressView">
<attr name="diameter" />
</declare-styleable>
</resources>
2、在View的構造方法中獲得我們自定義的屬性
public CircleProgressView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
/**
* 獲得我們所定義的自定義樣式屬性
*/
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.CircleProgressView_diameter:
// 預設設定為40dp
mDiameter = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 40, getResources().getDisplayMetrics()));
break;
}
}
a.recycle();
mPaint = new Paint();
rect = new RectF();
progressValue=0;
}
3、重寫onMeasure
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
int width = 0;
int height = 0;
//設定直徑的最小值
if(mDiameter<=40){
mDiameter=40;
}
height=mDiameter;
width=mDiameter;
Log.i("customView","log: w="+width+" h="+height);
setMeasuredDimension(width, height);
}
4、重寫onDraw
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int mWidth = getMeasuredWidth();
int mHeight = getMeasuredHeight();
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth((float) mWidth/10 );
mPaint.setStyle(Style.STROKE);
mPaint.setStrokeCap(Cap.ROUND);
mPaint.setColor(Color.TRANSPARENT);
rect.set(20, 20, mWidth - 20, mHeight - 20);
canvas.drawArc(rect, 0, 360, false, mPaint);
mPaint.setColor(Color.BLACK);
float section = ((float)progressValue) / 100;
int count = mColors.length;
int[] colors = new int[count];
System.arraycopy(mColors, 0, colors, 0, count);
LinearGradient shader = new LinearGradient(3, 3, mWidth - 3 , mHeight - 3, colors, null,
Shader.TileMode.CLAMP);
mPaint.setShader(shader);
canvas.drawArc(rect, 0, section * 360, false, mPaint);
}
5、提供對外介面
這裡有兩個對外介面,一個是用於獲取新的進度值的:
public void setProgressValue(int progressValue){
this.progressValue = progressValue;
Log.i("customView","log: progressValue="+progressValue);
}
另外一個是用於設定漸變色的,這裡我是定義了4種顏色,經過測試效果比較好:
public void setColors(int[] colors){
mColors = colors;
Log.i("customView","log: progressValue="+progressValue);
}
6、中佈局檔案中使用
在佈局檔案中我定義了5個view,中間一個大的,四角四個小的,這樣效果比較炫:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res/com.customview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="10dp"
custom:diameter="200dp"
/>
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/circle_progress_view1"
android:layout_below="@id/circle_progress_view1"
android:padding="10dp"
custom:diameter="80dp"
/>
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/circle_progress_view1"
android:layout_below="@id/circle_progress_view1"
android:layout_centerHorizontal="true"
android:padding="10dp"
custom:diameter="80dp"
/>
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/circle_progress_view1"
android:layout_above="@id/circle_progress_view1"
android:layout_centerHorizontal="true"
android:padding="10dp"
custom:diameter="80dp"
/>
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/circle_progress_view1"
android:layout_above="@id/circle_progress_view1"
android:layout_centerHorizontal="true"
android:padding="10dp"
custom:diameter="80dp"
/>
</RelativeLayout>
7、在activity中使用
主要是一個定時器的使用,來推進進度條,另外,是漸變色的顏色初值設定:
package com.customview;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.WindowManager;
import java.util.Random;
import java.util.Timer;
import java.util.TimerTask;
import com.customview.view.CircleProgressView;
import android.app.Activity;
import android.graphics.Color;
public class MainActivity extends Activity
{
CircleProgressView circle_progress_view1;
CircleProgressView circle_progress_view2;
CircleProgressView circle_progress_view3;
CircleProgressView circle_progress_view4;
CircleProgressView circle_progress_view5;
int progressValue=0;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);//去掉資訊欄
setContentView(R.layout.activity_main);
circle_progress_view1 = (CircleProgressView)findViewById(R.id.circle_progress_view1);
circle_progress_view2 = (CircleProgressView)findViewById(R.id.circle_progress_view2);
circle_progress_view3 = (CircleProgressView)findViewById(R.id.circle_progress_view3);
circle_progress_view4 = (CircleProgressView)findViewById(R.id.circle_progress_view4);
circle_progress_view5 = (CircleProgressView)findViewById(R.id.circle_progress_view5);
//第一個使用預設顏色,第二三個使用指定顏色,另外2個使用隨機顏色
int[] colors;
colors=new int[]{ 0xffc42c1b, 0xfffeea08, 0xff04aafc, 0xff15e078};
circle_progress_view2.setColors( colors);
colors=new int[]{ 0xffffffff, 0xffaaaaaa, 0xff555555, 0xff000000};
circle_progress_view3.setColors( colors);
circle_progress_view4.setColors( randomColors());
circle_progress_view5.setColors( randomColors());
timer.schedule(task, 1000, 1000); // 1s後執行task,經過1s再次執行
}
Handler handler = new Handler() {
public void handleMessage(Message msg) {
if (msg.what == 1) {
Log.i("log","handler : progressValue="+progressValue);
//通知view,進度值有變化
circle_progress_view1.setProgressValue(progressValue*3);
circle_progress_view1.postInvalidate();
circle_progress_view2.setProgressValue(progressValue*5/2);
circle_progress_view2.postInvalidate();
circle_progress_view3.setProgressValue(progressValue*2);
circle_progress_view3.postInvalidate();
circle_progress_view4.setProgressValue(progressValue*3/2);
circle_progress_view4.postInvalidate();
circle_progress_view5.setProgressValue(progressValue*1);
circle_progress_view5.postInvalidate();
progressValue+=1;
if(progressValue>100){
timer.cancel();
}
}
super.handleMessage(msg);
};
};
private int[] randomColors() {
int[] colors=new int[4];
Random random = new Random();
int r,g,b;
for(int i=0;i<4;i++){
r=random.nextInt(256);
g=random.nextInt(256);
b=random.nextInt(256);
colors[i]=Color.argb(255, r, g, b);
Log.i("customView","log: colors["+i+"]="+Integer.toHexString(colors[i]));
}
return colors;
}
Timer timer = new Timer();
TimerTask task = new TimerTask() {
@Override
public void run() {
// 需要做的事:傳送訊息
Message message = new Message();
message.what = 1;
handler.sendMessage(message);
}
};
}
至此,完美收工。
我是實現了一個漸變色圓形進度條,漸變色的顏色初值可以指定,進度條的值也是由使用者來指定,本例中是使用定時器來推進的,每個進度條的進度控制不一致,顏色不一樣,位置不一樣,組合起來,效果很炫哦!
完整程式碼見如下地址:
相關推薦
自定義View之漸變色圓形進度條
先展示下效果圖: 然後按照自定義view的步驟來實現。 我們需要將目標定義清楚: 目標是漸變色圓形進度條,那麼,使用canvas畫弧形是基礎了,另外是漸變色的效果,這裡使用LinearGradient來實現。 既然是提供一個進度條,那麼,是需要自定義
自定義SurfaceView之音訊錄製圓形進度條
本篇文章介紹自定義SurfaceView來實現如下的效果 由於對於SurfaceView不是很熟練,這次拿它來練手 SurfaceView用途: 一般View可以滿足大部分的繪圖需求,但如果需要併發執行復雜耗時的邏輯的時候,就會不斷阻塞主執行緒,導
Android自定義View之水波紋顯示進度效果
@Override protected void onDraw(Canvas canvas) { if (null != backgroundBitmap) { canvas.drawBitmap(createImage(), 0, 0, null);
我的Android進階之旅------>Android自定義View實現帶數字的進度條(NumberProgressBar)
今天在Github上面看到一個來自於 daimajia所寫的關於Android自定義View實現帶數字的進度條(NumberProgressBar)的精彩案例,在這裡分享給大家一起來學習學習!同時感謝daimajia的開源奉獻! 第一步、效果展
【Android自定義View】美觀個性的進度條
在很多開發中,例如網路請求中,是個比較耗時的操作,這時就需要一個進度條,不僅視覺上有很好的使用者體驗,操作上也讓使用者直觀的看到後臺操作的進度。所以進度條是必須會的。 效果如圖: 這樣的進度條比傳統的官方的美觀許多 下面介紹編寫過程 1.繼承VIew 編寫一個新的自定義
自定義View,又一種進度條的呈現,CircleProgressView使用解析
話不多說,先上效果圖 迴圈旋轉的狀態 專案結構 一個Sample包,一個Lib包。Lib包裡面其實只有一個累,很多內容都在素材檔案裡,比較建議把內容複製出來,貼到自己的專案中 主類: public class MainAc
Android自定義View分享——一個水平的進度條
寫在前面 筆者近來在學習Android自定義View,收集了一些不算複雜但又“長得”還可以的自定義View效果實現,這些View的邏輯不算複雜,大多都只用到了Paint、Canvas類的一些常用的API。在後續的部落格裡面,將分享幾個不同的效果,本文作為第一篇
自定義View之簡單自定義圓形進度條
達到的效果如下: 從上面的效果可以看出,主要有以下幾個自定義屬性: 1、背景顏色 2、進度扇形顏色 3、半徑 4、起始角度 因此,在attrs.xml中定義如下屬性: <?xml version="1.0" encoding="utf-8
Android 自定義View之仿華為圓形載入進度條
效果圖 實現思路 可以看出該View可分為三個部分來實現 最外圍的圓,該部分需要區分進度圓和底部的刻度圓,進度部分的刻度需要和底色刻度區分開來 中間顯示的文字進度,需要讓文字在View中居中顯示 旋轉的小圓點,小圓點需要模擬小球下落運動時的加速度
Android 自定義圓形帶刻度漸變色的進度條
效果圖 一、繪製圓環 圓環故名思意,第一個首先繪製是圓環 1:圓環繪製函式 圓環API public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter,
自定義view,可拖拽進度和吸附效果的圓形進度條
前言 最近接到一個需求,第一眼看到ui互動效果時,瞬間想對產品小哥說“尼瑪,這麼會玩,你咋不上天”。確認了具體互動細節,喝了兩口農夫三拳,開始了兩耳不聞窗外事,一心只想擼程式碼的過程。 先上ui效果 說明: 外圈弧形上面是進度的標記點,預設在12點位置,也是
Android自定義View之實現簡單炫酷的球體進度球
前言 最近一直在研究自定義view,正好專案中有一個根據下載進度來實現球體進度的需求,所以自己寫了個進度球,程式碼非常簡單。先看下效果: 效果還是非常不錯的。 準備知識 要實現上面的效果我們只要掌握兩個知識點就好了,一個是Handler機制,用於發訊息重新整理我們的進度球,一個是clip
Android繪圖:自定義View之——矩形進度條、圓環進度條、填充型進度條、時鐘
主函式 這幾種進度條的主函式都是類似的,所以下面我只給出了一個填充型進度條的主函式,其他幾個主函式只是在這基礎上改動一下按鈕id(即與各自佈局裡面的id相同即可),還有改動一下相對應的類即可。 public class MainActivity
Android自定義View之仿京東售後稽核進度
本篇文章已授權微信公眾號 guolin_blog (郭霖)獨家釋出 概述:同常在做商城類的App時,都會有售後的需求,而售後流程通常會因為不同的業務,而分為不確定的幾個步驟,如下圖所示: 那麼問題就來了,像這樣的效果如何實現呢?讓我們先放下這個問題,先看
自定義View之儀表盤進度條
1. 前言 一點一點學習自定義View,按照《Android開發藝術探索》中的說法,自定義View大致可以分為4類: 1. 繼承View重寫onDraw方法; 2. 繼承ViewGroup派生特殊Layout; 3. 繼承特定View; 4. 繼承特定
Android自定義View之圓形頭像
記錄貼 現在製作圓形頭像的第三方工具已經很多了,本帖只為記錄自定義view學習過程。 1.主體程式碼部分 public class CirclePhotoView extends View { private int max;//最大進度 private
自定義View之帶進度百分比ProgressBar
先上幾張自定義所實現的效果圖吧,有興趣的可以繼續往下看 實現思路,前四張圖呢在自定義progressbar時沒有加入text文字,文字是在xml佈局時加上去的,最後一張是與progressbar定義在一起的。可以看到有以下幾種情況 1,圖1自定義中未整合
自定義View之圓形TextView
【1】自定義View的屬性 : 在res/values下新建一個attrs.xml檔案,在裡面定義我們的屬性 <?xml version="1.0" encoding="utf-8"?> <resources> <at
Android 自定義view之圓盤進度條
很久沒有用到自定義View了,手有點生疏了,這不同事剛扔給一個活,按照UI的要求,畫一個進度條,帶動畫效果的。需求是這樣的: 嗯,實現後效果如下: 嗯,算是基本滿足需求吧。 本文包含的知識點 1、自定義view的繪製 2、屬性動畫 3、影象的
自定義View之Rect的使用與理解
此篇為我的第一篇部落格,藉此平臺讓更多的人知道和掌握更多android的知識,希望能越來越優秀.高手過招,不只是會用,更多的是理解它的原理,能舉一反三,與已知知識對比學習,方便記憶與理解,下面,我們直接進入正題.我的文章會有一個很明顯的特徵,就是中學時期老師所講的"3W"原則,what(是什麼),h