1. 程式人生 > >打造屬於自己的進度條(筆記)

打造屬於自己的進度條(筆記)

根據從前面的學習,初步學會了基本的自定義控制元件的方法,就開始學習者寫一下自定義進度條玩哇
下面是效果圖
這裡寫圖片描述
下面的是程式碼部分
首先自定義屬性

 <declare-styleable name="LoadView">
        <attr name="loadWidth" format="dimension">20</attr>
        <attr name="loadColor" format="color">0xffababab</attr>
        <attr name="loadBackgroundColor"
format="color">
0xff343434</attr> <attr name="backgroundColor" format="color">0xff565656</attr> <attr name="textColor" format="color">0xffbcbcbc</attr> <attr name="radius" format="dimension">60</attr> <attr name="loadTextSize" format
="dimension">
28</attr> </declare-styleable>

下面是自定義V進度條程式碼

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import
android.graphics.RectF; import android.util.AttributeSet; import android.util.TypedValue; import android.widget.ProgressBar; /** * Created by Andream on 2017/11/4. * 自定義動感載入圖 */ public class LoadView extends ProgressBar{ private final int RADIUS=60; private final int LOAD_WIDTH=20; private final int TEXT_SIZE=28; private final int LOAD_COLOR=0xffababab; private final int LOAD_BACKGROUND_COLOR=0xff343434; private final int BACKGROUND_COLOR=0xff565656; private final int TEXT_COLOR=0xffbcbcbc; private float loadWidth=dp2sp(LOAD_WIDTH); private float radius=dp2sp(RADIUS); private int textSize=sp2dp(TEXT_SIZE); private int loadColor=LOAD_COLOR; private int loadBackgroundColor=LOAD_BACKGROUND_COLOR; private int backgroundColor=BACKGROUND_COLOR; private int textColor=TEXT_COLOR; private Paint mPaint; private RectF oval; private Rect rect; private Bitmap mTarget,mBmp; public LoadView(Context context) { this(context,null); } public LoadView(Context context, AttributeSet attrs) { this(context, attrs,0); } public LoadView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); obtainStyledAttrs(attrs); mPaint = new Paint(); mPaint.setAntiAlias(true); oval=new RectF(); rect = new Rect(); } /** * 獲取自定義屬性 * @param attrs attrs */ private void obtainStyledAttrs(AttributeSet attrs) { TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.LoadView); loadWidth = (int) ta.getDimension(R.styleable.LoadView_loadWidth, loadWidth); loadColor = (int) ta.getDimension(R.styleable.LoadView_loadColor, loadColor); backgroundColor = (int) ta.getDimension(R.styleable.LoadView_backgroundColor, backgroundColor); loadBackgroundColor = (int) ta.getDimension(R.styleable.LoadView_loadBackgroundColor, loadBackgroundColor); textColor = (int) ta.getDimension(R.styleable.LoadView_textColor, textColor); radius = (int) ta.getDimension(R.styleable.LoadView_radius, radius); textSize = (int) ta.getDimension(R.styleable.LoadView_loadTextSize, textSize); ta.recycle(); } /** * dp2sp * @param dpVal sp * @return dp */ private int dp2sp(int dpVal) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, getResources().getDisplayMetrics()); } /** * sp2dp * @param spVal dp * @return sp */ private int sp2dp(int spVal) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics()); } @Override protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); if (widthMode != MeasureSpec.EXACTLY) { int widthSize = (int) (radius*2f+loadWidth*2f + getPaddingLeft() + getPaddingRight()); widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY); } if (heightMode != MeasureSpec.EXACTLY) { int heightSize = (int) (radius*2f+loadWidth*2f + getPaddingTop() + getPaddingBottom()); heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY); } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected synchronized void onDraw(Canvas canvas) { canvas.save(); float mWidth=getWidth(); float mHeight=getHeight(); mPaint.setColor(backgroundColor); mPaint.setStyle(Paint.Style.FILL); canvas.drawCircle(mWidth/2f,mHeight/2,radius,mPaint); //繪畫圖片 oval.set(mWidth / 2 - radius, mWidth / 2 - radius, mHeight / 2 + radius, mHeight / 2+ radius);//用於定義的圓弧的形狀和大小的界限 mBmp= BitmapFactory.decodeResource(getResources(),R.mipmap.mytest); //canvas.drawBitmap(bitmap,new Rect(0,0,bitmap.getWidth(),bitmap.getHeight()),oval,mPaint); if(mTarget == null){ mTarget = Bitmap.createScaledBitmap(mBmp, (int) (radius*2+loadWidth), (int) (radius*2+loadWidth), false); } if(mTarget!=mBmp){ mBmp.recycle(); } Bitmap target = Bitmap.createBitmap(mTarget, 0, 0, mTarget.getWidth(), mTarget.getHeight()); float sx = mWidth/2f - target.getWidth() / 2; float sy = mHeight/2f- target.getHeight() / 2; canvas.drawBitmap(target, sx, sy, mPaint); mPaint.setColor(textColor); mPaint.setTextSize(textSize); String progressText= getProgress()+"%"; mPaint.getTextBounds(progressText, 0, progressText.length(), rect);//獲取文字寬高 canvas.drawText(progressText,mWidth/2f-rect.width()/2f,mHeight/2f+rect.height()/2f,mPaint); mPaint.setColor(loadBackgroundColor); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(loadWidth); canvas.drawArc(oval, 0, 360, false, mPaint); //根據進度畫圓弧 mPaint.setColor(loadColor); canvas.drawArc(oval, 270, (getProgress()*3.6f), false, mPaint); //根據進度畫圓弧 canvas.restore(); } }

這就是全部的了,是不是感覺很簡單

相關推薦

打造屬於自己進度筆記

根據從前面的學習,初步學會了基本的自定義控制元件的方法,就開始學習者寫一下自定義進度條玩哇 下面是效果圖 下面的是程式碼部分 首先自定義屬性 <declare-styleable name="LoadView"> &

【學習筆記】Android-打造炫酷進度條形

本文是我在慕課網上學習《Android-打造炫酷進度條》整理的原始碼,和視訊中的原始碼主體一致,僅修改了部分引數。 效果圖如下所示(實際進度條是連續的)。 原始檔 attrs.xml <?xml version="1.0" encoding="utf-8"?>

使用ViewDragHelper打造屬於自己的DragLayout抽屜開關

true header 限制 open() flat 重寫 support 重要 red 使用ViewDragHelper打造屬於自己的DragLayout(抽屜開關

關於進度ProgressBar那些事筆記

ProgressBar用於介面上顯示一個進度條,表示我們的程式正在載入一些資料。(預設時是一個圓形進度條。) 控制元件的可見性 可以通過android:visibility對這個控制元件進行可見屬性的設定 >可選值有三種,visible、invisible(看不見但

js進度

itl font style script .get black type onf clas <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Asp.net MVC 搭建屬於自己的框架

C4D pagedlist del tran 6.0 ext 才有 應該 frame 網址:https://www.cnblogs.com/sggx/p/4555255.html 為什麽要自己搭框架?   大家夥別急,讓我慢慢地告訴你!大家有沒有這種感覺,從一家跳槽到另一家

自定義帶刻度的進度seekbar

效果: layout佈局,(“-”,“+”和seekbar佈局) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com

自定義圓形進度

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

圓形進度canvas

效果如下圖: 程式碼如下 <canvas class="pull-right list_canvas" width="200" height="200" style="height:100px;width:100px"></canvas>

深入理解BootStrap Item14 -- 進度progressbar

1、進度條 在網頁中,進度條的效果並不少見,比如一個評分系統,比如載入狀態等。就如下圖所示的一個評分系統,他就是一個簡單的進度條效果: 進度條和其他獨立元件一樣,開發者可以根據自己的需要,選擇對應的版本: ☑ LESS版本:原始碼檔案progress-

AJAX實現上傳進度Django

昨天研究了一天檔案上傳進度條的實現,折騰了一天終於是完成了,期間遇到了各種BUG,讓人不禁淚落。 這裡,我們將使用最少量的AJAX來實現這個功能,沒有任何對瀏覽器支援性的檢測,這樣更容易明白。還有一點需要說明的是,後臺也是應該來摻和一腳(配合)的,當然,非常簡單,只要確認接

Android花樣loading進度-簡單環形進度

背景 Android花樣loading進度條系列文章主要講解如何自定義所需的進度條,包括水平、圓形、環形、圓弧形、不規則形狀等。 本篇我們從圓形進度條講起,講簡單形式的環形進度條,只有進度色彩,沒有進度文字,主要是使用Canvas繪製圓和圓弧。 效果

cocos-2d-x中進度loadingBar顯示資源載入

為便於看客實際操作和理解,直接上例子 #include "LoadingBar.h" #include "HelloWorldScene.h" #include "GameScene.h" static int res_count=0; // 資源集合 std::str

html js 定製進度

 版本一遺留的問題: 1 滑鼠訊息捕獲問題(圖層覆蓋),解決方法設定圖層,影象層置於底層,滑鼠訊息層置於上層且設定為透明,完美解決。 function createMouseEventDiv() { do{ var parentCanvas

egret進度簡單

////////////////////////////////////////////////////////////////////////////////////// // // Copyright (c) 2014-present, Egret Technolog

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

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

Unity3d中製作Loading場景進度

背景 通常遊戲的主場景包含的資源較多,這會導致載入場景的時間較長。為了避免這個問題,可以首先載入Loading場景,然後再通過Loading場景來載入主場景。因為Loading場景包含的資源較少,所以載入速度快。在載入主場景的時候一般會在Loading

easyui 進度ProgressBar

Create ProgressBar The ProgressBar component can be created from html markup or programatically. Creation from markup is even easier.

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

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

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

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