自定義view 實現計步器的效果

2021-08-15 05:29:19 字數 3142 閱讀 4839

首先看下效果圖

在做這個專案之前先了解下文字獲取

我之前也寫過一篇文章是自定義view——自定義圓環進度條:

今天詳細講解一下baseline 基線(參考文章:文淑大神的自定義view之繪圖篇(四)

獲取例項

paint.fontmetrics fontmetrics = mpaint.getfontmetrics();

paint.fontmetricsint fm= mpaint.getfontmetricsint();

成員變數

float ascent = fontmetrics.ascent;

float descent = fontmetrics.descent;

float top = fontmetrics.top;

float bottom = fontmetrics.bottom;

float leading = fontmetrics.leading;

這裡的ascent,descent,top,bottom,leading指的是到基線baseline的位置

文字的高度

float top = fontmetrics.top + baseliney;

float bottom = fontmetrics.bottom + baseliney;

//文字高度

float height= bottom - top; //注意top為負數

//文字中點y座標

float center = (bottom - top) / 2;

即中線是(bottom-top)/2,實際呢是bottom+top只是因為這裡的top是負的(上的top到baseline的距離)

已知中線求baseline

結論

baseline=centery+a-fm.bottom;

centery呢實際就是getheight/2,整體高度的一半,然後求基線的y座標,實際就是(top-bottom)/2-fontmetrics.bottom;再次強調:這裡的ascent,descent,top,bottom,leading指的是到基線baseline的位置。最後相加getheight+(top-bottom)/2-fontmetrics.bottom**

name="qqstepview">

name="outercolor"

format="color" />

name="innercolor"

format="color" />

name="borderwidth"

format="dimension" />

name="steptextsize"

format="dimension" />

name="steptextcolor"

format="color" />

declare-styleable>

public

class

qqstepview

extends

view

public

qqstepview(context context, @nullable attributeset attrs)

public

qqstepview(context context, @nullable attributeset attrs, int defstyleattr)

@override

protected

void

onmeasure(int widthmeasurespec, int heightmeasurespec)

@override

protected

void

ondraw(canvas canvas)

//其他,寫幾個方法讓他動起來

public

void

setstepmax(int mstepmax)

public

void

setcurrentstep(int mcurrentstep)

}

在mainactivity中設定動畫

final qqstepview qqstepview = (qqstepview) findviewbyid(r.id.step_view);

qqstepview.setstepmax(5000);

//屬性動畫

valueanimator animator = valueanimator.offloat(0, 3000);//0到3000的變化

animator.addupdatelistener(new valueanimator.animatorupdatelistener()

});animator.setduration(2000);

animator.start();

自定義view刮刮卡效果

要實現這種效果,必須要知道這樣乙個類 porterduffxfermode,設定兩張重疊的效果 他有以下過濾模式 src imageview 的src dst imageview的background android.graphics.porterduff.mode.src 只繪製源影象 andro...

自定義揭露效果View

今天實現乙個揭露效果的自定義view 效果如下 揭露view效果 public class exposeview extends view public exposeview context context,attributeset attrs 初始 畫筆 private void init ove...

Android 自定義View實現拖拽效果

先來看一下效果圖 簡單說一下實現步驟 1.建立乙個類繼承view 2.繪製出乙個小球 3.重寫ontouchevent,來根據手指放下,移動,抬起,來控制小球 4.直接在布局中引用 先貼一張圖看下view的座標系 下面就貼一下 最後會給出原始碼 public class customview ext...