Android实现时间轴

来源：互联网发布：网络出版物的图书编辑：程序博客网时间：2024/06/05 08:42

相信大家对于时间轴都不陌生，平时使用淘宝，京东查看物流的时候都会看到，我这里展示的是掌盟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;    }}

阅读全文

0 0