Android仿淘寶物流信息TimeLineView
淘寶物流信息TimeLine的制作方法:

仿照的TimeLine效果圖:

代碼實(shí)現(xiàn):
package com.zms.timelineview;
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;
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 timelineHeadColorEdge;
/**
* 其他節(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, 6));
timelineRadius = (int) a.getDimension(
R.styleable.TimeLineView_timelineRadius,
convertDIP2PX(context, 5));
timelineHeadColor = a.getColor(
R.styleable.TimeLineView_timelineHeadColor,
Color.parseColor("#25ae5f")); // 中心深色
timelineHeadColorEdge = a.getColor(
R.styleable.TimeLineView_timelineHeadColorEdge,
Color.parseColor("#b9e5cc")); // 邊緣淺色
timelineOtherColor = a.getColor(
R.styleable.TimeLineView_timelineOtherColor,
Color.parseColor("#cccccc"));
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ù)目,畫對應(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)
mPaint.setColor(timelineHeadColorEdge);
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)的位置來計(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)之間的軸的長度*節(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;
}
public void setTimelineRadiusDistance(int timelineRadiusDistance) {
this.timelineRadiusDistance = timelineRadiusDistance;
invalidate();
}
public int getTimelineWidth() {
return timelineWidth;
}
public void setTimelineWidth(int timelineWidth) {
this.timelineWidth = timelineWidth;
}
public float getTimeLineViewHeight() {
this.timeLineViewHeight = getMarginTop() + getTimelineCount()
* (2 * getTimelineRadius() + getTimelineRadiusDistance());
return timeLineViewHeight;
}
public void setTimeLineViewHeight(float timeLineViewHeight) {
this.timeLineViewHeight = timeLineViewHeight;
invalidate();
}
public int getViewWidth() {
return viewWidth;
}
public void setViewWidth(int viewWidth) {
this.viewWidth = viewWidth;
invalidate();
}
/**
* 轉(zhuǎn)換dip為px
*/
public static int convertDIP2PX(Context context, int dip) {
float scale = context.getResources().getDisplayMetrics().density;
return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android List刪除重復(fù)數(shù)據(jù)
這篇文章主要介紹了Android List刪除重復(fù)數(shù)據(jù)的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-06-06
Android中協(xié)調(diào)滾動(dòng)布局的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android中協(xié)調(diào)滾動(dòng)常用的布局實(shí)現(xiàn),類似這樣的協(xié)調(diào)滾動(dòng)布局,當(dāng)?shù)撞苛斜砘瑒?dòng)的時(shí)候,頂部的布局做響應(yīng)的動(dòng)作,我們都可以通過?AppBarLayout?和?MotionLayout?來實(shí)現(xiàn),本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2022-06-06
Android EditText搜索框?qū)崿F(xiàn)圖標(biāo)居中
本篇文章主要介紹了Android EditText搜索框?qū)崿F(xiàn)圖標(biāo)居中,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Android?通過productFlavors實(shí)現(xiàn)多渠道打包方法示例
這篇文章主要為大家介紹了Android?通過productFlavors實(shí)現(xiàn)多渠道打包方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
揭秘雙十一手機(jī)淘寶圖標(biāo)如何被動(dòng)態(tài)更換
這篇文章主要介紹了每到雙十一十二的時(shí)候Android手機(jī)動(dòng)態(tài)更換手機(jī)圖標(biāo)的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08
Android實(shí)現(xiàn)加載狀態(tài)視圖切換效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)加載狀態(tài)視圖切換效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
android開發(fā)之橫向滾動(dòng)/豎向滾動(dòng)的ListView(固定列頭)
由于項(xiàng)目需要,我們需要一個(gè)可以橫向滾動(dòng)的,又可以豎向滾動(dòng)的 表格;經(jīng)過幾天的研究終于搞定,感興趣的朋友可以了解下哦2013-01-01

