天天看點

簡單實作時間線

效果圖:

簡單實作時間線

主要思路:重複的有規律的東西用list展示

主要代碼:

RecyclerView 子項布局:
           
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    >

    <LinearLayout
        android:id="@+id/ll_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:background="@color/line_gray"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:layout_marginBottom="16dp"
        android:gravity="center"
        >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2019/8/28  上午"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="11:34"/>

        <TextView
            android:id="@+id/tv_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="繪制時間線"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginLeft="8dp">

        <View
            android:layout_width="2dp"
            android:layout_height="8dp"
            android:background="@color/black"
            android:layout_gravity="center"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/orange_oval"
            android:layout_gravity="center"/>

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="@color/black"
            android:layout_gravity="center"/>


    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:background="@color/line_gray"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:layout_marginBottom="16dp"
        android:gravity="center">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2019/8/28  上午"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="11:34"/>

        <TextView
            android:id="@+id/tv_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="繪制時間線"/>

    </LinearLayout>


</LinearLayout>
           

擴充卡:

此處使用了第三方庫:BaseRecyclerViewAdapterHelper

implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.46'
           
package com.example.demos2019_7_31.adapter;

import android.view.View;
import com.chad.library.adapter.base.BaseItemDraggableAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import com.example.demos2019_7_31.R;
import java.util.List;

/**
 * @author :Jasmine
 * @date :  2019/8/28 11:39
 * @description : 時間線擴充卡
 */
public class TimeLineAdapter  extends BaseItemDraggableAdapter<String, BaseViewHolder> {

   private boolean flag = false;

    public TimeLineAdapter(List data) {
        super(R.layout.time_line_recyler_item,data);
    }

    @Override
    protected void convert(BaseViewHolder helper, String item) {

       if (flag){
           // 右邊布局
           helper.setText(R.id.tv_2,item);
           helper.getView(R.id.ll_1).setVisibility(View.INVISIBLE);
           flag = false;
       }else {
           // 左邊布局
           helper.setText(R.id.tv_1,item);
           helper.getView(R.id.ll_2).setVisibility(View.INVISIBLE);
           flag = true;
       }

    }
}