Android实现时间轴

相信大家对于时间轴都不陌生，平时使用淘宝，京东查看物流的时候都会看到，我这里展示的是掌盟App上面的英雄时刻视频的页面

（注意头部和顶部有空白部分）

（注意结尾是一个结点没有延长线）

看到这个功能的时候觉得很好玩，那么该如何实现呢？

先附上我的粗糙的实现图

你可能会说其实就是一个ListView，但是如果是ListView的话怎么能保证这些结点能够连接在一起呢？你可能会说：设置间隔为null,让view连接起来，是的没错，但是第一个view和最后一个view如何设置呢？

答案就是下面这幅图：

结点上和结点下分别有一个延长线，如果这个结点是第一个结点我们就手动设置头部延长线不可见，如果是最后一个结点就设置尾延长线不可见

item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="11-25"
        android:textSize="18sp"
        android:layout_marginTop="10dp"
        android:textColor="@color/black"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="8dp" />

    <TextView
        android:id="@+id/tv_year"
        android:text="2017"
        android:textSize="16sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        app:layout_constraintStart_toStartOf="@+id/tv_day"
        app:layout_constraintTop_toBottomOf="@+id/tv_day" />

    <View
        android:id="@+id/headerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:background="@color/gray"
        app:layout_constraintBottom_toTopOf="@+id/circle_view"
        app:layout_constraintEnd_toEndOf="@+id/circle_view"
        app:layout_constraintStart_toStartOf="@+id/circle_view"
        app:layout_constraintTop_toTopOf="parent" />
    <com.test.TimeView.CircleView
        android:id="@+id/circle_view"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_marginLeft="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/tv_day" />

    <View
        android:id="@+id/footView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:background="@color/gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/circle_view"
        app:layout_constraintStart_toStartOf="@+id/circle_view"
        app:layout_constraintTop_toBottomOf="@+id/circle_view" />

    <ImageView
        android:id="@+id/iv_game"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_marginLeft="20dp"
        app:layout_constraintStart_toEndOf="@+id/circle_view"
        app:layout_constraintTop_toTopOf="@+id/circle_view" />

    <TextView
        android:id="@+id/tv_time"
        android:textSize="16sp"
        android:textColor="@color/gray"
        android:text="01:45"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="@+id/iv_game"
        app:layout_constraintTop_toBottomOf="@+id/iv_game" />
</android.support.constraint.ConstraintLayout>

TimeBaseAdapter

package com.test.TimeView;

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.test.R;

import java.util.List;

/**
 * @Description:
 * @Author: Liangchaojie
 * @Create On 2017/12/12 15:05
 */

public class TimeBaseAdapter extends BaseAdapter {
    private Context context;
    private List<PlayerBean> list;

    public TimeBaseAdapter(Context context, List<PlayerBean> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list==null?0:list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public int getItemViewType(int position) {
        return list.get(position).getType();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if(list==null) return null;

        VH vh;
        PlayerBean p = list.get(position);
        if(convertView==null){
            convertView = LayoutInflater.from(context).inflate(R.layout.item, null);
            vh = new VH();
            vh.day=convertView.findViewById(R.id.tv_day);
            vh.year=convertView.findViewById(R.id.tv_year);
            vh.time=convertView.findViewById(R.id.tv_time);
            vh.imageView=convertView.findViewById(R.id.iv_game);
            vh.header = convertView.findViewById(R.id.headerView);
            vh.foot = convertView.findViewById(R.id.footView);
            convertView.setTag(vh);
        }else {
            vh = (VH) convertView.getTag();
        }
        if(p.getType()==0){
            vh.header.setVisibility(View.INVISIBLE);
        }else if(p.getType()==2){
            vh.foot.setVisibility(View.INVISIBLE);
        }else {
            vh.header.setVisibility(View.VISIBLE);
            vh.foot.setVisibility(View.VISIBLE);
        }
        vh.day.setText(p.getDay());
        vh.year.setText(p.getYear());
        vh.time.setText(p.getTime());
        return convertView;
    }

    private static class VH{
        private TextView year;
        private TextView day;
        private TextView time;
        private View header;
        private View foot;
        private ImageView imageView;
    }
}

PlayerBean

package com.test.TimeView;

/**
 * @Description: 游戏玩家个人信息
 * @Author: Liangchaojie
 * @Create On 2017/12/12 15:06
 */

public class PlayerBean {
    private String year;
    private String day;
    private String time;
    private String image;

    private int type;//这里用来存放结点的位置，0表示头部，2表示尾部，1表示中间

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public String getYear() {
        return year;
    }

    public void setYear(String year) {
        this.year = year;
    }

    public String getDay() {
        return day;
    }

    public void setDay(String day) {
        this.day = day;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }
}