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