Android自定義view仿淘寶快遞物流信息時間軸
更新時間：2018年05月16日 14:29:12 作者：u013979330
這篇文章主要為大家詳細介紹了Android自定義view仿淘寶快遞物流信息時間軸，具有一定的參考價值，感興趣的小伙伴們可以參考一下
學了Android有一段時間了，一直沒有時間寫博客，趁著周末有點空，就把自己做的一些東西寫下來． 一方面鍛煉一下自己的寫文檔的能力，另一方面分享代碼的同時也希望能與大家交流一下技術，共同學習，共同進步．
廢話不多少說，我們先來看看我們自定義view要實現(xiàn)的效果:
效果圖
自定義屬性
<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方法
關鍵方法，寫了大量的代碼注釋，希望大家能看明白。
@Override
protected void onDraw(Canvas canvas) {
//默認設置時間軸的位置位于view的中間
viewWidth = getMeasuredWidth() / 2;
//設置第一個節(jié)點的顏色
mPaint.setColor(timelineHeadColor);
/**
* 根據(jù)時間軸的節(jié)點數(shù)目，畫對應的節(jié)點和軸
*/
for (int j = 1; j <= timelineCount; j++) {
/**
* 當j==1，畫第一個節(jié)點的時候，有點特殊，我們需要在節(jié)點的外面再換一個圓環(huán)
*/
if (j == 1) {
//畫筆設置為空心
canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineRadius, mPaint);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5.0f);
//畫第一個節(jié)點外圍的圓環(huán)
canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineHeadRadius, mPaint);
//設置畫筆顏色，畫其他時間節(jié)點的顏色
mPaint.setColor(timelineOtherColor);
//畫筆設置為實心
mPaint.setStyle(Paint.Style.FILL);
/**
* 畫第一個節(jié)點下面的軸
*/
canvas.drawRect(new Rect(viewWidth - timelineWidth / 2, (int) (2 * timelineHeadRadius + marginTop) + 5, viewWidth + timelineWidth / 2, (int) (2 * timelineHeadRadius + timelineRadiusDistance + marginTop + 5)), mPaint);
continue;
}
/**
* 畫時間軸的節(jié)點,即畫圓形
* 圓心的x都是一樣的,view的中間
* 圓心的y的計算是根據(jù)節(jié)點的位置來計算的,例如:第一個節(jié)點的y是根據(jù)第一個節(jié)點距離上面的距離加上第一個節(jié)點的半徑:timelineHeadRadius + marginTop
* 其余的節(jié)點就是在一個節(jié)點的y的基礎上,加上兩倍半徑和節(jié)點之間的軸的長度＊節(jié)點數(shù):(2 * timelineRadius + timelineRadiusDistance) * (j - 1) + timelineHeadRadius - timelineRadius + marginTop
*
*/
canvas.drawCircle(viewWidth, (2 * timelineRadius + timelineRadiusDistance) * (j - 1) + 2 * timelineHeadRadius - timelineRadius + marginTop, timelineRadius, mPaint);
/**
*
* 畫其余的軸
* left:每個軸距離左邊距離都是一樣的 時間軸的中心位置-1/2的時間軸的寬度 viewWidth - timelineWidth / 2
* top: (int) (j * (2 * timelineRadius + timelineRadiusDistance) - timelineRadiusDistance + 2 * (timelineHeadRadius-timelineRadius)+ marginTop)
* right:每個軸距離右邊距離都是一樣的 時間軸的中心位置+1/2的時間軸的寬度 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;
/**
* 第一個節(jié)點的外半徑
*/
private float timelineHeadRadius;
/**
* 第一個節(jié)點的顏色值
*/
private int timelineHeadColor;
/**
* 第二個節(jié)點的顏色值
*/
private int timelineOtherColor;
/**
* 時間線的節(jié)點數(shù)
*/
private int timelineCount;
/**
* 時間軸的位置
*/
private int viewWidth;
/**
* 時間軸到距離頂部的距離
*/
private int marginTop;
/**
* 時間軸的節(jié)點的半徑
*/
private int timelineRadius;
/**
* 時間軸節(jié)點之間的距離
*/
private int timelineRadiusDistance;
/**
* 時間軸的寬度
*/
private int timelineWidth;
/**
* 時間軸的高度
*/
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) {
//默認設置時間軸的位置位于view的中間
viewWidth = getMeasuredWidth() / 2;
//設置第一個節(jié)點的顏色
mPaint.setColor(timelineHeadColor);
/**
* 根據(jù)時間軸的節(jié)點數(shù)目，畫對應的節(jié)點和軸
*/
for (int j = 1; j <= timelineCount; j++) {
/**
* 當j==1，畫第一個節(jié)點的時候，有點特殊，我們需要在節(jié)點的外面再換一個圓環(huán)
*/
if (j == 1) {
//畫筆設置為空心
canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineRadius, mPaint);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5.0f);
//畫第一個節(jié)點外圍的圓環(huán)
canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineHeadRadius, mPaint);
//設置畫筆顏色，畫其他時間節(jié)點的顏色
mPaint.setColor(timelineOtherColor);
//畫筆設置為實心
mPaint.setStyle(Paint.Style.FILL);
/**
* 畫第一個節(jié)點下面的軸
*/
canvas.drawRect(new Rect(viewWidth - timelineWidth / 2, (int) (2 * timelineHeadRadius + marginTop) + 5, viewWidth + timelineWidth / 2, (int) (2 * timelineHeadRadius + timelineRadiusDistance + marginTop + 5)), mPaint);
continue;
}
/**
* 畫時間軸的節(jié)點,即畫圓形
* 圓心的x都是一樣的,view的中間
* 圓心的y的計算是根據(jù)節(jié)點的位置來計算的,例如:第一個節(jié)點的y是根據(jù)第一個節(jié)點距離上面的距離加上第一個節(jié)點的半徑:timelineHeadRadius + marginTop
* 其余的節(jié)點就是在一個節(jié)點的y的基礎上,加上兩倍半徑和節(jié)點之間的軸的長度＊節(jié)點數(shù):(2 * timelineRadius + timelineRadiusDistance) * (j - 1) + timelineHeadRadius - timelineRadius + marginTop
*
*/
canvas.drawCircle(viewWidth, (2 * timelineRadius + timelineRadiusDistance) * (j - 1) + 2 * timelineHeadRadius - timelineRadius + marginTop, timelineRadius, mPaint);
/**
*
* 畫其余的軸
* left:每個軸距離左邊距離都是一樣的 時間軸的中心位置-1/2的時間軸的寬度 viewWidth - timelineWidth / 2
* top: (int) (j * (2 * timelineRadius + timelineRadiusDistance) - timelineRadiusDistance + 2 * (timelineHeadRadius-timelineRadius)+ marginTop)
* right:每個軸距離右邊距離都是一樣的 時間軸的中心位置+1/2的時間軸的寬度 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();
}
/**
* 轉換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));
}
}
附上Github鏈接 TimeLineDemo
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了 Android WebView的使用方法總結的相關資料,功能有指定網(wǎng)頁打開，跳轉網(wǎng)頁，傳值等，需要的朋友可以參考下2017-07-07
Android自定義控件（實現(xiàn)視圖樹繪制指示器）
本文主要介紹了Android視圖樹繪制指示器的實現(xiàn)原理和具體步驟。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了Android自定義邊緣凹凸的卡劵效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了RecyclerView上拉加載封裝代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Android項目類似淘寶 電商 搜索功能，監(jiān)聽軟鍵盤搜索事件，延遲自動搜索，以及時間排序的搜索歷史記錄的實現(xiàn)
本篇文章主要介紹了Android實現(xiàn)類似淘寶、電商、搜索功能（監(jiān)聽軟鍵盤搜索事件，延遲自動搜索，以及時間排序的搜索歷史記錄），感興趣的小伙伴們可以參考一下。2016-10-10
Android利用ObjectAnimator實現(xiàn)ArcMenu
這篇文章主要為大家詳細介紹了Android利用ObjectAnimator實現(xiàn)ArcMenu的相關資料，感興趣的小伙伴們可以參考一下2016-07-07
Android控件之CheckBox、RadioButton用法實例分析
這篇文章主要介紹了Android控件之CheckBox、RadioButton用法,以實例形式較為詳細的分析了CheckBox和RadioButton實現(xiàn)復選按鈕及單選按鈕功能的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要給大家介紹了一種JNI方法實現(xiàn)圖片壓縮（壓縮率極高）的相關資料，文中通過示例代碼介紹的非常詳細，對各位Android開發(fā)者們具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
這篇文章主要為大家詳細介紹了Android手機懸浮窗口小案例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
協(xié)程上下文是一個有索引的Element實例集合，每個element在這個集合里有一個唯一的key；協(xié)程上下文包含用戶定義的一些數(shù)據(jù)集合，這些數(shù)據(jù)與協(xié)程密切相關；協(xié)程上下文用于控制線程行為、協(xié)程的生命周期、異常以及調試2022-08-08