---

前言

• Android開發中，時間軸的 UI需求非常常見，如下圖：
  

  

• 本文將結合 自定義View & RecyclerView的知識，手把手教你實現該常見 & 實用的自定義View：時間軸

---

目錄

---

1. 知識儲備

本文采用 自定義View & RecyclerView 實現時間軸，所以必須先了解相關知識：

1.1 RecyclerView

• RecyclerView 的基礎使用：Android開發：ListView、AdapterView、RecyclerView全面解析

• RecyclerView 的高階使用：教你玩轉 Android RecyclerView：深入解析 RecyclerView ItemDecoration 類

1.2 自定義View

具體請看文章 Canvas類的最全面詳解 - 自定義View應用系列

---

2. 具體實現

下面，我將手把手教你實現 時光軸的效果。

2.1 效果圖

2.2 實現思路

2.3 實現步驟

1. 匯入 使用 RecyclerView的包
2. 設定主佈局 & RecyclerView的Item佈局
3. 設定RecyclerView的 Adapter
4. 自定義RecyclerView.ItemDecoration類
5. 初始化 RecyclerView & 繫結資料

特別注意

1. 步驟1、2、3、5都用到RecyclerView的基本知識，請看文章Android開發：ListView、AdapterView、RecyclerView全面解析
2. 步驟 4 涉及到RecyclerView 高階使用 & 自定義View的知識，具體請看Canvas類的最全面詳解 - 自定義View應用系列 & 教你玩轉 Android RecyclerView：深入解析 RecyclerView ItemDecoration 類

2.4 步驟說明

步驟1：匯入 使用 RecyclerView的包

build.gradle

dependencies {
    ...
    compile 'com.android.support:recyclerview-v7:23.2.0'
}複製程式碼

步驟2：設定主佈局 & RecyclerView的Item佈局
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="horizontal"
        />
</RelativeLayout>複製程式碼

list_cell.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10sp"
            android:text="New Text"
            android:id="@+id/Itemtitle" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:textSize="10sp"
            android:id="@+id/Itemtext"
            android:layout_below="@+id/Itemtitle"/>

</LinearLayout>複製程式碼

步驟3：設定RecyclerView的 Adapter
MyAdapter.java

public class MyAdapter extends RecyclerView.Adapter {
    private LayoutInflater inflater;
    private ArrayList<HashMap<String, Object>> listItem;

    //建構函式，傳入資料
    public MyAdapter(Context context, ArrayList<HashMap<String, Object>> listItem) {
        inflater = LayoutInflater.from(context);
        this.listItem = listItem;
    }


    //定義Viewholder
    class Viewholder extends RecyclerView.ViewHolder  {
        private TextView Title, Text;

        public Viewholder(View root) {
            super(root);
            Title = (TextView) root.findViewById(R.id.Itemtitle);
            Text = (TextView) root.findViewById(R.id.Itemtext);

        }

        public TextView getTitle() {
            return Title;
        }

        public TextView getText() {
            return Text;
        }


    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new Viewholder(inflater.inflate(R.layout.list_cell, null));
    }//在這裡把ViewHolder繫結Item的佈局

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        Viewholder vh = (Viewholder) holder;
        // 繫結資料到ViewHolder裡面
        vh.Title.setText((String) listItem.get(position).get("ItemTitle"));
        vh.Text.setText((String) listItem.get(position).get("ItemText"));
    }

    //返回Item數目
    @Override
    public int getItemCount() {
        return listItem.size();
    }


}複製程式碼

步驟4：自定義RecyclerView.ItemDecoration類

• 此步驟就是該例項的實現關鍵，具體思路請看下圖：

閱讀前請先看文章：教你玩轉 Android RecyclerView：深入解析 RecyclerView ItemDecoration 類

• 具體程式碼實現

DividerItemDecoration.java

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

    // 寫右邊字的畫筆(具體資訊)
    private Paint mPaint;

    // 寫左邊日期字的畫筆( 時間 + 日期)
    private Paint mPaint1;
    private Paint mPaint2;

    // 左 上偏移長度
    private int itemView_leftinterval;
    private int itemView_topinterval;

    // 軸點半徑
    private int circle_radius;

    // 圖示
    private Bitmap mIcon;


    // 在建構函式裡進行繪製的初始化，如畫筆屬性設定等
    public DividerItemDecoration(Context context) {

        // 軸點畫筆(紅色)
        mPaint = new Paint();
        mPaint.setColor(Color.RED);

        // 左邊時間文字畫筆(藍色)
        // 此處設定了兩隻分別設定 時分 & 年月
        mPaint1 = new Paint();
        mPaint1.setColor(Color.BLUE);
        mPaint1.setTextSize(30);

        mPaint2 = new Paint();
        mPaint2.setColor(Color.BLUE);


        // 賦值ItemView的左偏移長度為200
        itemView_leftinterval = 200;

        // 賦值ItemView的上偏移長度為50
        itemView_topinterval = 50;

        // 賦值軸點圓的半徑為10
        circle_radius = 10;

        // 獲取圖示資源
        // mIcon = BitmapFactory.decodeResource(context.getResources(), R.mipmap.logo);

    }

    // 重寫getItemOffsets（）方法
    // 作用：設定ItemView 左 & 上偏移長度
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);

            // 設定ItemView的左 & 上偏移長度分別為200 px & 50px,即此為onDraw()可繪製的區域
            outRect.set(itemView_leftinterval, itemView_topinterval, 0, 0);

    }

    // 重寫onDraw（）
    // 作用:在間隔區域裡繪製時光軸線 & 時間文字
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);

        // 獲取RecyclerView的Child view的個數
        int childCount = parent.getChildCount();

        // 遍歷每個Item，分別獲取它們的位置資訊，然後再繪製對應的分割線
        for (int i = 0; i < childCount; i++) {

            // 獲取每個Item物件
            View child = parent.getChildAt(i);

            /**
             * 繪製軸點
             */
            // 軸點 = 圓 = 圓心(x,y)
            float centerx = child.getLeft() - itemView_leftinterval / 3;
            float centery = child.getTop() - itemView_topinterval + (itemView_topinterval + child.getHeight()) / 2;
            // 繪製軸點圓
            c.drawCircle(centerx, centery, circle_radius, mPaint);
            // 通過Canvas繪製角標
            // c.drawBitmap(mIcon,centerx - circle_radius ,centery - circle_radius,mPaint);

            /**
             * 繪製上半軸線
             */
            // 上端點座標(x,y)
            float upLine_up_x = centerx;
            float upLine_up_y = child.getTop() - itemView_topinterval;

            // 下端點座標(x,y)
            float upLine_bottom_x = centerx;
            float upLine_bottom_y = centery - circle_radius;

            //繪製上半部軸線
            c.drawLine(upLine_up_x, upLine_up_y, upLine_bottom_x, upLine_bottom_y, mPaint);

            /**
             * 繪製下半軸線
             */
            // 上端點座標(x,y)
            float bottomLine_up_x = centerx;
            float bottom_up_y = centery + circle_radius;

            // 下端點座標(x,y)
            float bottomLine_bottom_x = centerx;
            float bottomLine_bottom_y = child.getBottom();

            //繪製下半部軸線
            c.drawLine(bottomLine_up_x, bottom_up_y, bottomLine_bottom_x, bottomLine_bottom_y, mPaint);


            /**
             * 繪製左邊時間文字
             */
            // 獲取每個Item的位置
            int index = parent.getChildAdapterPosition(child);
            // 設定文字起始座標
            float Text_x = child.getLeft() - itemView_leftinterval * 5 / 6;
            float Text_y = upLine_bottom_y;

            // 根據Item位置設定時間文字
            switch (index) {
                case (0):
                    // 設定日期繪製位置
                    c.drawText("13:40", Text_x, Text_y, mPaint1);
                    c.drawText("2017.4.03", Text_x + 5, Text_y + 20, mPaint2);
                    break;
                case (1):
                    // 設定日期繪製位置
                    c.drawText("17:33", Text_x, Text_y, mPaint1);
                    c.drawText("2017.4.03", Text_x + 5, Text_y + 20, mPaint2);
                    break;
                case (2):
                    // 設定日期繪製位置
                    c.drawText("20:13", Text_x, Text_y, mPaint1);
                    c.drawText("2017.4.03", Text_x + 5, Text_y + 20, mPaint2);
                    break;
                case (3):
                    // 設定日期繪製位置
                    c.drawText("11:40", Text_x, Text_y, mPaint1);
                    c.drawText("2017.4.04", Text_x + 5, Text_y + 20, mPaint2);
                    break;
                case (4):
                    // 設定日期繪製位置
                    c.drawText("13:20", Text_x, Text_y, mPaint1);
                    c.drawText("2017.4.04", Text_x + 5, Text_y + 20, mPaint2);
                    break;
                case (5):
                    // 設定日期繪製位置
                    c.drawText("22:40", Text_x, Text_y, mPaint1);
                    c.drawText("2017.4.04", Text_x + 5, Text_y + 20, mPaint2);
                    break;
                default:c.drawText("已簽收", Text_x, Text_y, mPaint1);
            }
        }
    }

}複製程式碼

步驟5：初始化RecyclerView & 繫結資料

MainActivity.java

public class MainActivity extends AppCompatActivity  {
    private RecyclerView Rv;
    private ArrayList<HashMap<String,Object>> listItem;
    private MyAdapter myAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 初始化顯示的資料
        initData();

        // 繫結資料到RecyclerView
        initView();

    }
    // 初始化顯示的資料
    public void initData(){
        listItem = new ArrayList<HashMap<String, Object>>();/*在陣列中存放資料*/

            HashMap<String, Object> map1 = new HashMap<String, Object>();
            HashMap<String, Object> map2 = new HashMap<String, Object>();
            HashMap<String, Object> map3 = new HashMap<String, Object>();
            HashMap<String, Object> map4 = new HashMap<String, Object>();
            HashMap<String, Object> map5 = new HashMap<String, Object>();
            HashMap<String, Object> map6 = new HashMap<String, Object>();

            map1.put("ItemTitle", "美國谷歌公司已發出");
            map1.put("ItemText", "發件人:谷歌 CEO Sundar Pichai");
            listItem.add(map1);

            map2.put("ItemTitle", "國際順豐已收入");
            map2.put("ItemText", "等待中轉");
            listItem.add(map2);

            map3.put("ItemTitle", "國際順豐轉件中");
            map3.put("ItemText", "下一站中國");
            listItem.add(map3);

            map4.put("ItemTitle", "中國順豐已收入");
            map4.put("ItemText", "下一站廣州華南理工大學");
            listItem.add(map4);

            map5.put("ItemTitle", "中國順豐派件中");
            map5.put("ItemText", "等待派件");
            listItem.add(map5);

            map6.put("ItemTitle", "華南理工大學已簽收");
            map6.put("ItemText", "收件人:Carson");
            listItem.add(map6);
    }

    // 繫結資料到RecyclerView
    public void initView(){
        Rv = (RecyclerView) findViewById(R.id.my_recycler_view);
        //使用線性佈局
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        Rv.setLayoutManager(layoutManager);
        Rv.setHasFixedSize(true);

        //用自定義分割線類設定分割線
        Rv.addItemDecoration(new DividerItemDecoration(this));

        //為ListView繫結介面卡
        myAdapter = new MyAdapter(this,listItem);
        Rv.setAdapter(myAdapter);
    }

}複製程式碼

---

2.5 結果展示

2.6 原始碼地址

Carson_Ho的Github地址：自定義View實踐 - 時間軸

希望大家動動手指給個 Star 唄， 嘻嘻！

---

3. 擴充套件使用

• 此次的擴充套件使用是為了更加豐富UI效果：將軸點圓圈改成圖示，如下圖：

• 程式碼實現

      private Bitmap mIcon;
  
      // 獲取圖示資源
         mIcon = BitmapFactory.decodeResource(context.getResources(), R.mipmap.logo);
  
     // 在步驟4中，繪製軸點圓圈處 通過Canvas繪製該圖
     c.drawBitmap(mIcon,centerx - circle_radius ,centery - circle_radius,mPaint);複製程式碼

---

4. 總結

• 通過本文，相信你的自定義 View 庫又多了一把殺器了！
• 下一篇文章我將對講解Android 自定義 View相關知識，有興趣可以繼續關注Carson_Ho的安卓開發筆記

---

請點贊！因為你的鼓勵是我寫作的最大動力！