溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“Android如何自定義view仿淘寶快遞物流信息時間軸”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Android如何自定義view仿淘寶快遞物流信息時間軸”這篇文章吧。
效果圖
自定義屬性
<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;
//設置第一個節點的顏色
mPaint.setColor(timelineHeadColor);
/**
* 根據時間軸的節點數目，畫對應的節點和軸
*/
for (int j = 1; j <= timelineCount; j++) {
/**
* 當j==1，畫第一個節點的時候，有點特殊，我們需要在節點的外面再換一個圓環
*/
if (j == 1) {
//畫筆設置為空心
canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineRadius, mPaint);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5.0f);
//畫第一個節點外圍的圓環
canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineHeadRadius, mPaint);
//設置畫筆顏色，畫其他時間節點的顏色
mPaint.setColor(timelineOtherColor);
//畫筆設置為實心
mPaint.setStyle(Paint.Style.FILL);
/**
* 畫第一個節點下面的軸
*/
canvas.drawRect(new Rect(viewWidth - timelineWidth / 2, (int) (2 * timelineHeadRadius + marginTop) + 5, viewWidth + timelineWidth / 2, (int) (2 * timelineHeadRadius + timelineRadiusDistance + marginTop + 5)), mPaint);
continue;
}
/**
* 畫時間軸的節點,即畫圓形
* 圓心的x都是一樣的,view的中間
* 圓心的y的計算是根據節點的位置來計算的,例如:第一個節點的y是根據第一個節點距離上面的距離加上第一個節點的半徑:timelineHeadRadius + marginTop
* 其余的節點就是在一個節點的y的基礎上,加上兩倍半徑和節點之間的軸的長度＊節點數:(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;
/**
* 第一個節點的外半徑
*/
private float timelineHeadRadius;
/**
* 第一個節點的顏色值
*/
private int timelineHeadColor;
/**
* 第二個節點的顏色值
*/
private int timelineOtherColor;
/**
* 時間線的節點數
*/
private int timelineCount;
/**
* 時間軸的位置
*/
private int viewWidth;
/**
* 時間軸到距離頂部的距離
*/
private int marginTop;
/**
* 時間軸的節點的半徑
*/
private int timelineRadius;
/**
* 時間軸節點之間的距離
*/
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;
//設置第一個節點的顏色
mPaint.setColor(timelineHeadColor);
/**
* 根據時間軸的節點數目，畫對應的節點和軸
*/
for (int j = 1; j <= timelineCount; j++) {
/**
* 當j==1，畫第一個節點的時候，有點特殊，我們需要在節點的外面再換一個圓環
*/
if (j == 1) {
//畫筆設置為空心
canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineRadius, mPaint);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5.0f);
//畫第一個節點外圍的圓環
canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop, timelineHeadRadius, mPaint);
//設置畫筆顏色，畫其他時間節點的顏色
mPaint.setColor(timelineOtherColor);
//畫筆設置為實心
mPaint.setStyle(Paint.Style.FILL);
/**
* 畫第一個節點下面的軸
*/
canvas.drawRect(new Rect(viewWidth - timelineWidth / 2, (int) (2 * timelineHeadRadius + marginTop) + 5, viewWidth + timelineWidth / 2, (int) (2 * timelineHeadRadius + timelineRadiusDistance + marginTop + 5)), mPaint);
continue;
}
/**
* 畫時間軸的節點,即畫圓形
* 圓心的x都是一樣的,view的中間
* 圓心的y的計算是根據節點的位置來計算的,例如:第一個節點的y是根據第一個節點距離上面的距離加上第一個節點的半徑:timelineHeadRadius + marginTop
* 其余的節點就是在一個節點的y的基礎上,加上兩倍半徑和節點之間的軸的長度＊節點數:(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));
}
}以上是“Android如何自定義view仿淘寶快遞物流信息時間軸”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
