<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>

@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)); }}