×
广告

Android 自定义View实战系列 :时间轴

96
Carson_Ho 595a1b60 08f6 4beb 998f 2bf55e230555
2017.07.12 09:37* 字数 807

前言

  • Android开发中,时间轴的 UI需求非常常见,如下图:

    示意图

  • 本文将结合 自定义View & RecyclerView的知识,手把手教你实现该常见 & 实用的自定义View:时间轴


目录

目录

1. 知识储备

本文采用 自定义View & RecyclerView 实现时间轴,所以必须先了解相关知识:

1.1 RecyclerView

1.2 自定义View

具体请看文章 Canvas类的最全面详解 - 自定义View应用系列


2. 具体实现

下面,我将手把手教你实现 时光轴的效果。

2.1 效果图

示意图

2.2 实现思路

示意图

2.3 实现步骤

  1. 导入 使用 RecyclerView的包
  2. 设置主布局 & RecyclerViewItem布局
  3. 设置RecyclerViewAdapter
  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:设置主布局 & RecyclerViewItem布局
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:设置RecyclerViewAdapter
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的安卓开发笔记

请点赞!因为你的鼓励是我写作的最大动力!

相关文章阅读
Android开发:最全面、最易懂的Android屏幕适配解决方案
Android事件分发机制详解:史上最全面、最易懂
Android开发:史上最全的Android消息推送解决方案
Android开发:最全面、最易懂的Webview详解
Android开发:JSON简介及最全面解析方法!
Android四大组件:Service服务史上最全面解析
Android四大组件:BroadcastReceiver史上最全面解析


欢迎关注Carson_Ho的简书!

不定期分享关于安卓开发的干货,追求短、平、快,但却不缺深度

自定义View、动画
自定义View、动画
4.4万字 · 39.0万阅读 · 446人关注
Web note ad 1