廢話不多說先看效果圖
效果圖
原諒模擬器顯示的不好看,為了錄gif圖,只能用模擬器
乙個背景,乙個進度,乙個進度值顯示,進度條與文字顯示的高度是1:2,其中用到了drawroundrect用來畫帶圓角的矩形,空心與實心都是paint的屬性設定的,drawtext用來畫文字
注意點:
1.進度條進度滿進度與未滿進度,計算onewidth = mwidth / mmaxprogress(單位進度佔的寬度=總寬度/滿進度);
2.文字顯示,先計算文字的寬度,三個狀態(起始位置 <= 文字寬度 / 當前位置 +文字寬度》=寬度/之間的),分別進行計算
ondraw來畫圖了
@override
protected void ondraw(canvas canvas) else
canvas.drawroundrect(rectfm, num8, num8, mpaint);
//畫文字
//獲取文字的寬度及其高度
rect rect = new rect();
string speed = mcurrentprogress + "%";
txtpaint.gettextbounds(speed, 0, speed.length(), rect);
textheight = rect.height();
textwidth = rect.width();
if (mcurrentprogress == mmaxprogress) else else
if (x + textwidth >= mwidth) else
}}複製**
public void setprogress(int progress)
}複製**
實際專案中,可有很多的擴充套件,但是有時候實際專案不需要把很多不需要的方法,設定屬性的方法等給寫出來,根據專案的需求去寫相關方法、屬性設定
/**
* licensed to the apache software foundation (asf) under one
* or more contributor license agreements. see the notice file
* distributed with this work for additional information
* to you under the apache license, version 2.0 (the
* "license"); you may not use this file except in compliance
* with the license. you may obtain a copy of the license at
* *
* * software distributed under the license is distributed on an
* "as is" basis, without warranties or conditions of any
* kind, either express or implied. see the license for the
* specific language governing permissions and limitations
* under the license.
*/package com.numberview;
import android.content.context;
import android.graphics.canvas;
import android.graphics.color;
import android.graphics.paint;
import android.graphics.rect;
import android.graphics.rectf;
import android.support.annotation.nullable;
import android.util.attributeset;
import android.view.view;
/** * created by wujun on 2017/9/20.
* * @author madreain
* @desc
*/public class numberview1 extends view
public numberview1(context context, @nullable attributeset attrs)
public numberview1(context context, @nullable attributeset attrs, int defstyleattr)
private void init
() @override
protected void onsizechanged(int w, int h, int oldw, int oldh)
@override
protected void ondraw(canvas canvas) else
canvas.drawroundrect(rectfm, num8, num8, mpaint);
//畫文字
//獲取文字的寬度及其高度
rect rect = new rect();
string speed = mcurrentprogress + "%";
txtpaint.gettextbounds(speed, 0, speed.length(), rect);
textheight = rect.height();
textwidth = rect.width();
if (mcurrentprogress == mmaxprogress) else else
if (x + textwidth >= mwidth) else }}
public float dp2px(float dp)
public float sp2px(float sp)
public void setprogress(int progress)
}}複製**
自定義view多寫多練
numberview github demo位址
自定義View 圓形進度條
首先在res values下建立乙個attrs資源資料夾 自定義view public class circleprogressview extends view public circleprogressview context context,attributeset attrs private...
自定義view (三) 用view圓環進度條
參考的鴻揚大神的部落格 部落格位址 做了乙個圓環進度條,感覺可以深入下,做乙個環形的餅狀圖 照著他的 敲了一遍,初步理解了,裡面給了非常詳細的注釋,主要看 步驟還是一樣 1 自定義view的屬性 2 在view的構造方法中獲得我們自定義的屬性 3 重寫onmesure 4 重寫ondraw 新建vi...
自定義進度條
自定義進度條 1 繪製底色 灰色 2 繪製進度 藍色 3 繪製最大的進度 純藍色 rectf rf new rectf 0,0,mwidth,mheight 繪製圓角矩形,背景色為畫筆顏色 mpaint.setcolor color.rgb 220,220,220 canvas.drawroundr...