如何在Android中利用View實(shí)現(xiàn)一個(gè)垂直時(shí)間軸布局

這篇文章將為大家詳細(xì)講解有關(guān)如何在Android中利用View實(shí)現(xiàn)一個(gè)垂直時(shí)間軸布局，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了銅山免費(fèi)建站歡迎大家使用！

時(shí)間軸，顧名思義就是將發(fā)生的事件按照時(shí)間順序羅列起來(lái)，給用戶帶來(lái)一種更加直觀的體驗(yàn)。

分析

實(shí)現(xiàn)這個(gè)最常用的一個(gè)方法就是用ListView，我這里用繼承LinearLayout的方式來(lái)實(shí)現(xiàn)。首先定義了一些自定義屬性：

attrs.xml

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
  <declare-styleable name="TimelineLayout"> 
    <!--時(shí)間軸左偏移值--> 
    <attr name="line_margin_left" format="dimension"/> 
    <!--時(shí)間軸上偏移值--> 
    <attr name="line_margin_top" format="dimension"/> 
    <!--線寬--> 
    <attr name="line_stroke_width" format="dimension"/> 
    <!--線的顏色--> 
    <attr name="line_color" format="color"/> 
    <!--點(diǎn)的大小--> 
    <attr name="point_size" format="dimension"/> 
    <!--點(diǎn)的顏色--> 
    <attr name="point_color" format="color"/> 
    <!--圖標(biāo)--> 
    <attr name="icon_src" format="reference"/> 
  </declare-styleable> 
</resources>

TimelineLayout.java

package com.jackie.timeline; 
 
import android.content.Context; 
import android.content.res.TypedArray; 
import android.graphics.Bitmap; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.graphics.drawable.BitmapDrawable; 
import android.support.annotation.Nullable; 
import android.util.AttributeSet; 
import android.view.View; 
import android.widget.LinearLayout; 
 
/** 
 * Created by Jackie on 2017/3/8. 
 * 時(shí)間軸控件 
 */ 
 
public class TimelineLayout extends LinearLayout { 
  private Context mContext; 
 
  private int mLineMarginLeft; 
  private int mLineMarginTop; 
  private int mLineStrokeWidth; 
  private int mLineColor;; 
  private int mPointSize; 
  private int mPointColor; 
  private Bitmap mIcon; 
 
  private Paint mLinePaint; //線的畫(huà)筆 
  private Paint mPointPaint; //點(diǎn)的畫(huà)筆 
   
 
  //第一個(gè)點(diǎn)的位置 
  private int mFirstX; 
  private int mFirstY; 
  //最后一個(gè)圖標(biāo)的位置 
  private int mLastX; 
  private int mLastY; 
 
  public TimelineLayout(Context context) { 
    this(context, null); 
  } 
 
  public TimelineLayout(Context context, @Nullable AttributeSet attrs) { 
    this(context, attrs, 0); 
  } 
 
  public TimelineLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TimelineLayout); 
    mLineMarginLeft = ta.getDimensionPixelOffset(R.styleable.TimelineLayout_line_margin_left, 10); 
    mLineMarginTop = ta.getDimensionPixelOffset(R.styleable.TimelineLayout_line_margin_top, 0); 
    mLineStrokeWidth = ta.getDimensionPixelOffset(R.styleable.TimelineLayout_line_stroke_width, 2); 
    mLineColor = ta.getColor(R.styleable.TimelineLayout_line_color, 0xff3dd1a5); 
    mPointSize = ta.getDimensionPixelSize(R.styleable.TimelineLayout_point_size, 8); 
    mPointColor = ta.getDimensionPixelOffset(R.styleable.TimelineLayout_point_color, 0xff3dd1a5); 
 
    int iconRes = ta.getResourceId(R.styleable.TimelineLayout_icon_src, R.drawable.ic_ok); 
    BitmapDrawable drawable = (BitmapDrawable) context.getResources().getDrawable(iconRes); 
    if (drawable != null) { 
      mIcon = drawable.getBitmap(); 
    } 
 
    ta.recycle(); 
 
    setWillNotDraw(false); 
    initView(context); 
  } 
 
  private void initView(Context context) { 
    this.mContext = context; 
 
    mLinePaint = new Paint(); 
    mLinePaint.setAntiAlias(true); 
    mLinePaint.setDither(true); 
    mLinePaint.setColor(mLineColor); 
    mLinePaint.setStrokeWidth(mLineStrokeWidth); 
    mLinePaint.setStyle(Paint.Style.FILL_AND_STROKE); 
 
    mPointPaint = new Paint(); 
    mPointPaint.setAntiAlias(true); 
    mPointPaint.setDither(true); 
    mPointPaint.setColor(mPointColor); 
    mPointPaint.setStyle(Paint.Style.FILL); 
  } 
 
  @Override 
  protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
     
    drawTimeline(canvas); 
  } 
 
  private void drawTimeline(Canvas canvas) { 
    int childCount = getChildCount(); 
 
    if (childCount > 0) { 
      if (childCount > 1) { 
        //大于1，證明至少有2個(gè)，也就是第一個(gè)和第二個(gè)之間連成線，第一個(gè)和最后一個(gè)分別有點(diǎn)和icon 
        drawFirstPoint(canvas); 
        drawLastIcon(canvas); 
        drawBetweenLine(canvas); 
      } else if (childCount == 1) { 
        drawFirstPoint(canvas); 
      } 
    } 
  } 
 
  private void drawFirstPoint(Canvas canvas) { 
    View child = getChildAt(0); 
    if (child != null) { 
      int top = child.getTop(); 
      mFirstX = mLineMarginLeft; 
      mFirstY = top + child.getPaddingTop() + mLineMarginTop; 
 
      //畫(huà)圓 
      canvas.drawCircle(mFirstX, mFirstY, mPointSize, mPointPaint); 
    } 
  } 
 
  private void drawLastIcon(Canvas canvas) { 
    View child = getChildAt(getChildCount() - 1); 
    if (child != null) { 
      int top = child.getTop(); 
      mLastX = mLineMarginLeft; 
      mLastY = top + child.getPaddingTop() + mLineMarginTop; 
 
      //畫(huà)圖 
      canvas.drawBitmap(mIcon, mLastX - (mIcon.getWidth() >> 1), mLastY, null); 
    } 
  } 
 
  private void drawBetweenLine(Canvas canvas) { 
    //從開(kāi)始的點(diǎn)到最后的圖標(biāo)之間，畫(huà)一條線 
    canvas.drawLine(mFirstX, mFirstY, mLastX, mLastY, mLinePaint); 
    for (int i = 0; i < getChildCount() - 1; i++) { 
      //畫(huà)圓 
      int top = getChildAt(i).getTop(); 
      int y = top + getChildAt(i).getPaddingTop() + mLineMarginTop; 
      canvas.drawCircle(mFirstX, y, mPointSize, mPointPaint); 
    } 
  } 
 
  public int getLineMarginLeft() { 
    return mLineMarginLeft; 
  } 
 
  public void setLineMarginLeft(int lineMarginLeft) { 
    this.mLineMarginLeft = lineMarginLeft; 
    invalidate(); 
  } 
}

從上面的代碼可以看出，分三步繪制，首先繪制開(kāi)始的實(shí)心圓，然后繪制結(jié)束的圖標(biāo)，然后在開(kāi)始和結(jié)束之間先繪制一條線，然后在線上在繪制每個(gè)步驟的實(shí)心圓。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:app="http://schemas.android.com/apk/res-auto" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="vertical"> 
 
  <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="50dp" 
    android:weightSum="2"> 
 
    <Button 
      android:id="@+id/add_item" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="add"/> 
 
    <Button 
      android:id="@+id/sub_item" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="sub"/> 
  </LinearLayout> 
 
  <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:weightSum="2"> 
 
    <Button 
      android:id="@+id/add_margin" 
      android:layout_width="0dp" 
      android:layout_weight="1" 
      android:layout_height="wrap_content" 
      android:text="+"/> 
 
    <Button 
      android:id="@+id/sub_margin" 
      android:layout_width="0dp" 
      android:layout_weight="1" 
      android:layout_height="wrap_content" 
      android:text="-"/> 
  </LinearLayout> 
 
  <TextView 
    android:id="@+id/current_margin" 
    android:layout_width="match_parent" 
    android:layout_height="40dp" 
    android:gravity="center" 
    android:text="current line margin left is 25dp"/> 
 
  <ScrollView 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:scrollbars="none"> 
 
    <com.jackie.timeline.TimelineLayout 
      android:id="@+id/timeline_layout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:line_margin_left="25dp" 
      app:line_margin_top="8dp" 
      android:orientation="vertical" 
      android:background="@android:color/white"> 
    </com.jackie.timeline.TimelineLayout> 
  </ScrollView> 
</LinearLayout>

MainActivity.java

package com.jackie.timeline; 
 
import android.os.Bundle; 
import android.support.v7.app.AppCompatActivity; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.widget.Button; 
import android.widget.TextView; 
 
public class MainActivity extends AppCompatActivity implements View.OnClickListener { 
  private Button addItemButton; 
  private Button subItemButton; 
  private Button addMarginButton; 
  private Button subMarginButton; 
  private TextView mCurrentMargin; 
 
  private TimelineLayout mTimelineLayout; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
 
    initView(); 
  } 
 
  private void initView() { 
    addItemButton = (Button) findViewById(R.id.add_item); 
    subItemButton = (Button) findViewById(R.id.sub_item); 
    addMarginButton= (Button) findViewById(R.id.add_margin); 
    subMarginButton= (Button) findViewById(R.id.sub_margin); 
    mCurrentMargin= (TextView) findViewById(R.id.current_margin); 
    mTimelineLayout = (TimelineLayout) findViewById(R.id.timeline_layout); 
 
    addItemButton.setOnClickListener(this); 
    subItemButton.setOnClickListener(this); 
    addMarginButton.setOnClickListener(this); 
    subMarginButton.setOnClickListener(this); 
  } 
 
  private int index = 0; 
  private void addItem() { 
    View view = LayoutInflater.from(this).inflate(R.layout.item_timeline, mTimelineLayout, false); 
    ((TextView) view.findViewById(R.id.tv_action)).setText("步驟" + index); 
    ((TextView) view.findViewById(R.id.tv_action_time)).setText("2017年3月8日16:55:04"); 
    ((TextView) view.findViewById(R.id.tv_action_status)).setText("完成"); 
    mTimelineLayout.addView(view); 
    index++; 
  } 
 
  private void subItem() { 
    if (mTimelineLayout.getChildCount() > 0) { 
      mTimelineLayout.removeViews(mTimelineLayout.getChildCount() - 1, 1); 
      index--; 
    } 
  } 
 
  @Override 
  public void onClick(View v) { 
    switch (v.getId()){ 
      case R.id.add_item: 
        addItem(); 
        break; 
      case R.id.sub_item: 
        subItem(); 
        break; 
      case R.id.add_margin: 
        int currentMargin = UIHelper.pxToDip(this, mTimelineLayout.getLineMarginLeft()); 
        mTimelineLayout.setLineMarginLeft(UIHelper.dipToPx(this, ++currentMargin)); 
        mCurrentMargin.setText("current line margin left is " + currentMargin + "dp"); 
        break; 
      case R.id.sub_margin: 
        currentMargin = UIHelper.pxToDip(this, mTimelineLayout.getLineMarginLeft()); 
        mTimelineLayout.setLineMarginLeft(UIHelper.dipToPx(this, --currentMargin)); 
        mCurrentMargin.setText("current line margin left is " + currentMargin + "dp"); 
        break; 
      default: 
        break; 
    } 
  } 
}

item_timeline.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content" 
  android:paddingLeft="65dp" 
  android:paddingTop="20dp" 
  android:paddingRight="20dp" 
  android:paddingBottom="20dp"> 
 
  <TextView 
    android:id="@+id/tv_action" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="14sp" 
    android:textColor="#1a1a1a" 
    android:text="測(cè)試一"/> 
 
  <TextView 
    android:id="@+id/tv_action_time" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="12sp" 
    android:textColor="#8e8e8e" 
    android:layout_below="@id/tv_action" 
    android:layout_marginTop="10dp" 
    android:text="2017年3月8日16:49:12"/> 
 
  <TextView 
    android:id="@+id/tv_action_status" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="14sp" 
    android:textColor="#3dd1a5" 
    android:layout_alignParentRight="true" 
    android:text="完成"/> 
 
</RelativeLayout>

附上像素工具轉(zhuǎn)化的工具類：

package com.jackie.timeline; 
 
import android.content.Context; 
 
/** 
 * Created by Jackie on 2017/3/8. 
 */ 
public final class UIHelper { 
 
  private UIHelper() throws InstantiationException { 
    throw new InstantiationException("This class is not for instantiation"); 
  } 
 
  /** 
   * dip轉(zhuǎn)px 
   */ 
  public static int dipToPx(Context context, float dip) { 
    return (int) (dip * context.getResources().getDisplayMetrics().density + 0.5f); 
  } 
 
  /** 
   * px轉(zhuǎn)dip 
   */ 
  public static int pxToDip(Context context, float pxValue) { 
    final float scale = context.getResources().getDisplayMetrics().density; 
    return (int) (pxValue / scale + 0.5f); 
  } 
}

關(guān)于如何在Android中利用View實(shí)現(xiàn)一個(gè)垂直時(shí)間軸布局就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：如何在Android中利用View實(shí)現(xiàn)一個(gè)垂直時(shí)間軸布局
地址分享：http://www.muchs.cn/article34/ijsgpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、用戶體驗(yàn)、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)