1. 程式人生 > >Android 時間軸 RecyclerView

Android 時間軸 RecyclerView

 1.item佈局

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

    <ImageView
        android:scaleType="fitXY"
        android:id="@+id/image_duihao"
        android:layout_width="@dimen/x48"
        android:layout_height="@dimen/x48"
        android:layout_marginStart="@dimen/x48"
        android:src="@drawable/right" />

    <View
        android:id="@+id/line1"
        android:layout_width="@dimen/x2"
        android:layout_height="@dimen/x60"
        android:layout_below="@id/image_duihao"
        android:layout_marginStart="@dimen/x71"
        android:background="#1296db" />

    <View
        android:id="@+id/line2"
        android:layout_width="@dimen/x2"
        android:layout_height="@dimen/x60"
        android:layout_below="@id/line1"
        android:layout_marginStart="@dimen/x71"
        android:background="#1296db" />

    <TextView
        android:layout_toRightOf="@id/image_duihao"
        android:id="@+id/tvTitle"
        android:textSize="@dimen/font_16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <RelativeLayout
        android:id="@+id/relative"
        android:layout_width="match_parent"
        android:layout_height="@dimen/x108"
        android:layout_toRightOf="@id/image_duihao"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tvTime"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:textColor="#5000"
            android:textSize="@dimen/font_12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/tvName"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:textSize="@dimen/font_12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/tvTime_Span"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:drawableLeft="@drawable/right"
            android:textSize="@dimen/font_12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/tvName_All"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:drawableLeft="@drawable/right"
            android:textSize="@dimen/font_12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>

</RelativeLayout>

2.Bean  這個比較嚴格 主要看介面資料如何定義了

public class DataBean {
    private String title,time,name,time_span,name_all;
    private boolean isEnd;

    public DataBean(String title, String time, String name, String time_span, String name_all, boolean isEnd) {
        this.title = title;
        this.time = time;
        this.name = name;
        this.time_span = time_span;
        this.name_all = name_all;
        this.isEnd = isEnd;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getTime() {
        return time;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getTime_span() {
        return time_span;
    }

    public void setTime_span(String time_span) {
        this.time_span = time_span;
    }

    public String getName_all() {
        return name_all;
    }

    public void setName_all(String name_all) {
        this.name_all = name_all;
    }

    public boolean isEnd() {
        return isEnd;
    }

    public void setEnd(boolean end) {
        isEnd = end;
    }
}

3.自定義資料

  //最少3條
        DataBean dataBean = new DataBean("智障錄入", "25:61", "老哥", "", "", false);
        DataBean dataBean1 = new DataBean("消滅智障", "25:61", "老第啊", "25:61-48:62", "小李子丶小福貴", false);
        DataBean dataBean2 = new DataBean("消滅智障", "25:61", "老第啊", "25:61-48:62", "", false);
        DataBean dataBean3 = new DataBean("消滅智障", "", "老第啊", "25:61-48:62", "小李子丶小福貴", false);
        DataBean dataBean4 = new DataBean("消滅智障", "25:61", "老第啊", "", "小李子丶小福貴", false);
        DataBean dataBean5 = new DataBean("任務完成", "", "", "", "", true);
        List<DataBean> list=new ArrayList<>();
        list.add(dataBean);
        list.add(dataBean1);
        list.add(dataBean2);
        list.add(dataBean3);
        list.add(dataBean4);
        list.add(dataBean5);

        Adapter_AcMain adapter_acMain = new Adapter_AcMain(R.layout.item_ac_main, list);
        mViewBinding.mRecyclerViewAcMain.setAdapter(adapter_acMain);
        mViewBinding.mRecyclerViewAcMain.setLayoutManager(new LinearLayoutManager(this));

4.Adapter

public class Adapter_AcMain extends BaseQuickAdapter<DataBean, BaseViewHolder> {


    public Adapter_AcMain(int layoutResId, @Nullable List<DataBean> data) {
        super(layoutResId, data);
    }

    @RequiresApi(api = Build.VERSION_CODES.M)
    @Override
    protected void convert(BaseViewHolder helper, DataBean item) {

        //最後一張換圖
        ImageView image_duihao = helper.getView(R.id.image_duihao);
        image_duihao.setImageResource(item.isEnd()?R.drawable.more:R.drawable.right);

        //隱藏
        View relative = helper.getView(R.id.relative);
        View line1 = helper.getView(R.id.line1);
        View line2 = helper.getView(R.id.line2);
        relative.setVisibility(item.isEnd()?View.GONE:View.VISIBLE);
        line1.setVisibility(item.isEnd()?View.GONE:View.VISIBLE);
        line2.setVisibility(item.isEnd()?View.GONE:View.VISIBLE);

        line2.setBackgroundColor(helper.getPosition()==mData.size()-2? mContext.getColor(R.color.colorAccent):Color.parseColor("#1296db"));

        if (!TextUtils.isEmpty(item.getTime())){
            helper.setText(R.id.tvTime,item.getTime());
        }
        if (!TextUtils.isEmpty(item.getName_all())){
            helper.setText(R.id.tvName_All,item.getName_all());
        }
        if (!TextUtils.isEmpty(item.getTime_span())){
            helper.setText(R.id.tvTime_Span,item.getTime_span());
        }
        if (!TextUtils.isEmpty(item.getTitle())){
            helper.setText(R.id.tvTitle,item.getTitle());
        }
        if (!TextUtils.isEmpty(item.getName())){
            helper.setText(R.id.tvName,item.getName());
        }

    }
}

如果效果要求酷炫的 可以找第三方了 github  關鍵字 stepview timeline 時間軸 流程指示