快捷導(dǎo)航

Android自定義view仿淘寶快遞物流信息時(shí)間軸

更新時(shí)間：2018年05月16日 14:29:12 作者：u013979330

這篇文章主要為大家詳細(xì)介紹了Android自定義view仿淘寶快遞物流信息時(shí)間軸，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

學(xué)了Android有一段時(shí)間了，一直沒有時(shí)間寫博客，趁著周末有點(diǎn)空，就把自己做的一些東西寫下來(lái)．一方面鍛煉一下自己的寫文檔的能力，另一方面分享代碼的同時(shí)也希望能與大家交流一下技術(shù)，共同學(xué)習(xí)，共同進(jìn)步．

廢話不多少說(shuō)，我們先來(lái)看看我們自定義view要實(shí)現(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方法

關(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;
 }

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

}

附上Github鏈接 TimeLineDemo

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: