版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android如何自定義view仿淘寶快遞物流信息時(shí)間軸
這篇文章主要為大家展示了“Android如何自定義view仿淘寶快遞物流信息時(shí)間軸”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓在下帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Android如何自定義view仿淘寶快遞物流信息時(shí)間軸”這篇文章吧。效果圖自定義屬性<resources>
<declare-styleable
name="TimeLineView">
<attr
name="timelineRadius"
format="dimension"
/>
<attr
name="timelineHeadRadius"
format="dimension"
/>
<attr
name="timelineHeadColor"
format="color"
/>
<attr
name="timelineOtherColor"
format="color"
/>
<attr
name="timelineRadiusDistance"
format="dimension"
/>
<attr
name="timelineCount"
format="integer"
/>
<attr
name="timelineMarginTop"
format="dimension"
/>
<attr
name="timelineWidth"
format="dimension"
/>
</declare-styleable>
</resources>onDraw方法關(guān)鍵方法，寫了大量的代碼注釋，希望大家能看明白。@Override
protected
void
onDraw(Canvas
canvas)
{
//默認(rèn)設(shè)置時(shí)間軸的位置位于view的中間
viewWidth
=
getMeasuredWidth()
/
2;
//設(shè)置第一個(gè)節(jié)點(diǎn)的顏色
mPaint.setColor(timelineHeadColor);
/**
*
根據(jù)時(shí)間軸的節(jié)點(diǎn)數(shù)目，畫對(duì)應(yīng)的節(jié)點(diǎn)和軸
*/
for
(int
j
=
1;
j
<=
timelineCount;
j++)
{
/**
*
當(dāng)j==1，畫第一個(gè)節(jié)點(diǎn)的時(shí)候，有點(diǎn)特殊，我們需要在節(jié)點(diǎn)的外面再換一個(gè)圓環(huán)
*/
if
(j
==
1)
{
//畫筆設(shè)置為空心
canvas.drawCircle(viewWidth,
timelineHeadRadius
+
marginTop,
timelineRadius,
mPaint);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5.0f);
//畫第一個(gè)節(jié)點(diǎn)外圍的圓環(huán)
canvas.drawCircle(viewWidth,
timelineHeadRadius
+
marginTop,
timelineHeadRadius,
mPaint);
//設(shè)置畫筆顏色，畫其他時(shí)間節(jié)點(diǎn)的顏色
mPaint.setColor(timelineOtherColor);
//畫筆設(shè)置為實(shí)心
mPaint.setStyle(Paint.Style.FILL);
/**
*
畫第一個(gè)節(jié)點(diǎn)下面的軸
*/
canvas.drawRect(new
Rect(viewWidth
-
timelineWidth
/
2,
(int)
(2
*
timelineHeadRadius
+
marginTop)
+
5,
viewWidth
+
timelineWidth
/
2,
(int)
(2
*
timelineHeadRadius
+
timelineRadiusDistance
+
marginTop
+
5)),
mPaint);
continue;
}
/**
*
畫時(shí)間軸的節(jié)點(diǎn),即畫圓形
*
圓心的x都是一樣的,view的中間
*
圓心的y的計(jì)算是根據(jù)節(jié)點(diǎn)的位置來(lái)計(jì)算的,例如:第一個(gè)節(jié)點(diǎn)的y是根據(jù)第一個(gè)節(jié)點(diǎn)距離上面的距離加上第一個(gè)節(jié)點(diǎn)的半徑:timelineHeadRadius
+
marginTop
*
其余的節(jié)點(diǎn)就是在一個(gè)節(jié)點(diǎn)的y的基礎(chǔ)上,加上兩倍半徑和節(jié)點(diǎn)之間的軸的長(zhǎng)度＊節(jié)點(diǎn)數(shù):(2
*
timelineRadius
+
timelineRadiusDistance)
*
(j
-
1)
+
timelineHeadRadius
-
timelineRadius
+
marginTop
*
*/
canvas.drawCircle(viewWidth,
(2
*
timelineRadius
+
timelineRadiusDistance)
*
(j
-
1)
+
2
*
timelineHeadRadius
-
timelineRadius
+
marginTop,
timelineRadius,
mPaint);
/**
*
*
畫其余的軸
*
left:每個(gè)軸距離左邊距離都是一樣的時(shí)間軸的中心位置-1/2的時(shí)間軸的寬度
viewWidth
-
timelineWidth
/
2
*
top:
(int)
(j
*
(2
*
timelineRadius
+
timelineRadiusDistance)
-
timelineRadiusDistance
+
2
*
(timelineHeadRadius-timelineRadius)+
marginTop)
*
right:每個(gè)軸距離右邊距離都是一樣的時(shí)間軸的中心位置+1/2的時(shí)間軸的寬度
viewWidth
+
timelineWidth
/
2
*
bottom:
(int)
(j
*
(2
*
timelineRadius
+
timelineRadiusDistance)
+
2
*
(timelineHeadRadius-timelineRadius)+
marginTop)
*/
canvas.drawRect(new
Rect(viewWidth
-
timelineWidth
/
2,
(int)
(j
*
(2
*
timelineRadius
+
timelineRadiusDistance)
-
timelineRadiusDistance
+
2
*
(timelineHeadRadius
-
timelineRadius)
+
marginTop),
viewWidth
+
timelineWidth
/
2,
(int)
(j
*
(2
*
timelineRadius
+
timelineRadiusDistance)
+
2
*
(timelineHeadRadius
-
timelineRadius)
+
marginTop)),
mPaint);
}
}最后附上全部代碼package
com.demo.zes.timelinedemo;
import
android.content.Context;
import
android.content.res.TypedArray;
import
android.graphics.Canvas;
import
android.graphics.Color;
import
android.graphics.Paint;
import
android.graphics.Rect;
import
android.util.AttributeSet;
import
android.view.View;
/**
*
TODO:
document
your
custom
view
class.
*/
public
class
TimeLineView
extends
View
{
private
Paint
mPaint;
/**
*
第一個(gè)節(jié)點(diǎn)的外半徑
*/
private
float
timelineHeadRadius;
/**
*
第一個(gè)節(jié)點(diǎn)的顏色值
*/
private
int
timelineHeadColor;
/**
*
第二個(gè)節(jié)點(diǎn)的顏色值
*/
private
int
timelineOtherColor;
/**
*
時(shí)間線的節(jié)點(diǎn)數(shù)
*/
private
int
timelineCount;
/**
*
時(shí)間軸的位置
*/
private
int
viewWidth;
/**
*
時(shí)間軸到距離頂部的距離
*/
private
int
marginTop;
/**
*
時(shí)間軸的節(jié)點(diǎn)的半徑
*/
private
int
timelineRadius;
/**
*
時(shí)間軸節(jié)點(diǎn)之間的距離
*/
private
int
timelineRadiusDistance;
/**
*
時(shí)間軸的寬度
*/
private
int
timelineWidth;
/**
*
時(shí)間軸的高度
*/
private
float
timeLineViewHeight;
public
TimeLineView(Context
context)
{
this(context,
null);
}
public
TimeLineView(Context
context,
AttributeSet
attrs)
{
this(context,
attrs,
0);
}
public
TimeLineView(Context
context,
AttributeSet
attrs,
int
defStyle)
{
super(context,
attrs,
defStyle);
init(context,
attrs,
defStyle);
}
/**
*
初始化
*
*
@param
context
*
@param
attrs
*
@param
defStyle
*/
private
void
init(Context
context,
AttributeSet
attrs,
int
defStyle)
{
final
TypedArray
a
=
getContext().obtainStyledAttributes(
attrs,
R.styleable.TimeLineView,
defStyle,
0);
timelineRadiusDistance
=
(int)
a.getDimension(R.styleable.TimeLineView_timelineRadiusDistance,
convertDIP2PX(context,
20));
timelineHeadRadius
=
a.getDimension(R.styleable.TimeLineView_timelineHeadRadius,
convertDIP2PX(context,
10));
timelineRadius
=
(int)
a.getDimension(R.styleable.TimeLineView_timelineRadius,
convertDIP2PX(context,
5));
timelineHeadColor
=
a.getColor(R.styleable.TimeLineView_timelineHeadColor,
Color.parseColor("#73be36"));
timelineOtherColor
=
a.getColor(R.styleable.TimeLineView_timelineOtherColor,
Color.parseColor("#e0e0e0"));
timelineCount
=
a.getInteger(R.styleable.TimeLineView_timelineCount,
0);
timelineWidth
=
(int)
a.getDimension(R.styleable.TimeLineView_timelineWidth,
convertDIP2PX(context,
1));
marginTop
=
(int)
a.getDimension(R.styleable.TimeLineView_timelineMarginTop,
convertDIP2PX(context,
50));
a.recycle();
mPaint
=
new
Paint();
mPaint.setAntiAlias(true);
}
@Override
protected
void
onDraw(Canvas
canvas)
{
//默認(rèn)設(shè)置時(shí)間軸的位置位于view的中間
viewWidth
=
getMeasuredWidth()
/
2;
//設(shè)置第一個(gè)節(jié)點(diǎn)的顏色
mPaint.setColor(timelineHeadColor);
/**
*
根據(jù)時(shí)間軸的節(jié)點(diǎn)數(shù)目，畫對(duì)應(yīng)的節(jié)點(diǎn)和軸
*/
for
(int
j
=
1;
j
<=
timelineCount;
j++)
{
/**
*
當(dāng)j==1，畫第一個(gè)節(jié)點(diǎn)的時(shí)候，有點(diǎn)特殊，我們需要在節(jié)點(diǎn)的外面再換一個(gè)圓環(huán)
*/
if
(j
==
1)
{
//畫筆設(shè)置為空心
canvas.drawCircle(viewWidth,
timelineHeadRadius
+
marginTop,
timelineRadius,
mPaint);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5.0f);
//畫第一個(gè)節(jié)點(diǎn)外圍的圓環(huán)
canvas.drawCircle(viewWidth,
timelineHeadRadius
+
marginTop,
timelineHeadRadius,
mPaint);
//設(shè)置畫筆顏色，畫其他時(shí)間節(jié)點(diǎn)的顏色
mPaint.setColor(timelineOtherColor);
//畫筆設(shè)置為實(shí)心
mPaint.setStyle(Paint.Style.FILL);
/**
*
畫第一個(gè)節(jié)點(diǎn)下面的軸
*/
canvas.drawRect(new
Rect(viewWidth
-
timelineWidth
/
2,
(int)
(2
*
timelineHeadRadius
+
marginTop)
+
5,
viewWidth
+
timelineWidth
/
2,
(int)
(2
*
timelineHeadRadius
+
timelineRadiusDistance
+
marginTop
+
5)),
mPaint);
continue;
}
/**
*
畫時(shí)間軸的節(jié)點(diǎn),即畫圓形
*
圓心的x都是一樣的,view的中間
*
圓心的y的計(jì)算是根據(jù)節(jié)點(diǎn)的位置來(lái)計(jì)算的,例如:第一個(gè)節(jié)點(diǎn)的y是根據(jù)第一個(gè)節(jié)點(diǎn)距離上面的距離加上第一個(gè)節(jié)點(diǎn)的半徑:timelineHeadRadius
+
marginTop
*
其余的節(jié)點(diǎn)就是在一個(gè)節(jié)點(diǎn)的y的基礎(chǔ)上,加上兩倍半徑和節(jié)點(diǎn)之間的軸的長(zhǎng)度＊節(jié)點(diǎn)數(shù):(2
*
timelineRadius
+
timelineRadiusDistance)
*
(j
-
1)
+
timelineHeadRadius
-
timelineRadius
+
marginTop
*
*/
canvas.drawCircle(viewWidth,
(2
*
timelineRadius
+
timelineRadiusDistance)
*
(j
-
1)
+
2
*
timelineHeadRadius
-
timelineRadius
+
marginTop,
timelineRadius,
mPaint);
/**
*
*
畫其余的軸
*
left:每個(gè)軸距離左邊距離都是一樣的時(shí)間軸的中心位置-1/2的時(shí)間軸的寬度
viewWidth
-
timelineWidth
/
2
*
top:
(int)
(j
*
(2
*
timelineRadius
+
timelineRadiusDistance)
-
timelineRadiusDistance
+
2
*
(timelineHeadRadius-timelineRadius)+
marginTop)
*
right:每個(gè)軸距離右邊距離都是一樣的時(shí)間軸的中心位置+1/2的時(shí)間軸的寬度
viewWidth
+
timelineWidth
/
2
*
bottom:
(int)
(j
*
(2
*
timelineRadius
+
timelineRadiusDistance)
+
2
*
(timelineHeadRadius-timelineRadius)+
marginTop)
*/
canvas.drawRect(new
Rect(viewWidth
-
timelineWidth
/
2,
(int)
(j
*
(2
*
timelineRadius
+
timelineRadiusDistance)
-
timelineRadiusDistance
+
2
*
(timelineHeadRadius
-
timelineRadius)
+
marginTop),
viewWidth
+
timelineWidth
/
2,
(int)
(j
*
(2
*
timelineRadius
+
timelineRadiusDistance)
+
2
*
(timelineHeadRadius
-
timelineRadius)
+
marginTop)),
mPaint);
}
}
public
float
getTimelineHeadRadius()
{
return
timelineHeadRadius;
}
public
void
setTimelineHeadRadius(float
timelineHeadRadius)
{
this.timelineHeadRadius
=
timelineHeadRadius;
invalidate();
}
public
int
getTimelineHeadColor()
{
return
timelineHeadColor;
}
public
void
setTimelineHeadColor(int
timelineHeadColor)
{
this.timelineHeadColor
=
timelineHeadColor;
invalidate();
}
public
int
getTimelineOtherColor()
{
return
timelineOtherColor;
}
public
void
setTimelineOtherColor(int
timelineOtherColor)
{
this.timelineOtherColor
=
timelineOtherColor;
invalidate();
}
public
int
getTimelineCount()
{
return
timelineCount;
}
public
void
setTimelineCount(int
timelineCount)
{
this.timelineCount
=
timelineCount;
invalidate();
}
public
int
getMarginTop()
{
return
marginTop;
}
public
void
setMarginTop(int
marginTop)
{
this.marginTop
=
marginTop;
invalidate();
}
public
int
getTimelineRadius()
{
return
timelineRadius;
}
public
void
setTimelineRadius(int
timelineRadius)
{
this.timelineRadius
=
timelineRadius;
invalidate();
}
public
int
getTimelineRadiusDistance()
{
return
timelineRadiusDistance;
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 工業(yè)機(jī)器人運(yùn)維員理論改練習(xí)試卷附答案
- 2025年膽量心理測(cè)試題及答案
- 2025年電力電子的考試題及答案
- 2025年興化大學(xué)面試試題及答案
- 2025年圖館會(huì)面試題及答案
- 2025年人格權(quán)法的試題及答案
- 2025年商業(yè)銀行信貸試題及答案
- 2025年壞人腦力測(cè)試題及答案
- 2025年流浪記的測(cè)試題及答案
- 2025年青島自招面試試題及答案
- 《橋梁工程計(jì)算書》word版
- 中華人民共和國(guó)特種設(shè)備安全法(節(jié)選)
- 籃球比賽計(jì)分表
- 施工現(xiàn)場(chǎng)安全隱患檢查（附標(biāo)準(zhǔn)規(guī)范）
- 吞咽障礙及吞咽功能的評(píng)定
- 拱涵計(jì)算書-6.0m-1m
- 數(shù)字電子技術(shù)課程設(shè)計(jì)報(bào)告(數(shù)字積分器)
- 高中有機(jī)化學(xué)必修模塊與選修模塊的銜接
- BBC美麗中國(guó)英文字幕
- 《自然保護(hù)區(qū)綜合科學(xué)考察規(guī)程》
- JJF(皖)105-2020 小型蒸汽滅菌器溫度、壓力參數(shù)校準(zhǔn)規(guī)范
評(píng)論
0/150
提交評(píng)論