Android UI:用ItemDecoration實現物流時間軸

阿新 • • 發佈：2022-03-26

昨天看到有人實現了這個ui,但是主要在佈局裡寫的。當然我之前也是在佈局裡寫的，但是貌似見過用ItemDecoration實現的。於是我評論說讓他用ItemDecoration試一下，他回覆我想多了。好吧，不管想的多不多，我自己試下就知道可行不可行了。當然是可行的，不然我也不會寫這篇文章了。還發現了這樣寫的優點。

佈局簡單
可複用
對ItemDecoration更瞭解

佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    android:orientation="vertical"
    android:padding="15dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/tv_describe"
        tools:text="客戶簽收"
        android:textSize 
="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_marginTop="5dp"
        android:textSize="12sp"
        tools:text="2018-6-1"
        android:id="@+id/tv_time"
        android:layout_width="match_parent"
        android:layout_height 
="wrap_content" />
</LinearLayout>

佈局是再簡單不過了（用佈局實現過的心裡清楚）。

ItemDecoration

package com.xunevermore.timelinedecor;

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by Administrator on 2018/6/1 0001.
 * com.xunevermore.timelinedecor
 */

public class TimelineDecoration extends RecyclerView.ItemDecoration {


    private int width;//時間軸寬度
    private int top;//圓距離item頂部高度
    private Drawable goingDrawable;//綠色對勾圓
    private int goingDrawableSize;//綠色對勾圓的直徑
    private int dividerHeight;//線條粗細

    private int lintColor = 0xff999999;//線條顏色
    private Paint mPaint;

    private int ovalRadius = 12;//灰色圓的半徑


    public TimelineDecoration(int width, int top, Drawable goingDrawable,int goingDrawableSize, int dividerHeight) {
        this.width = width;
        this.top = top;
        this.goingDrawableSize = goingDrawableSize;
        this.goingDrawable = goingDrawable;
        this.dividerHeight = dividerHeight;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.set(width, 0, 0, dividerHeight);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            int top = child.getTop();
            int bottom = child.getBottom();

            //豎直線

            int left = parent.getPaddingLeft() + width / 2;
            c.drawRect(left,
                    i==0?this.top+goingDrawableSize:top,//第一個item線有空一段
                    left + dividerHeight,
                    bottom + dividerHeight,
                    mPaint);

            //小圓點

            int ovalCenterX = top + this.top + ovalRadius;
            if (i == 0) {
                goingDrawable.setBounds(left-goingDrawableSize/2,top+this.top,left+goingDrawableSize/2,top+this.top+goingDrawableSize);
                goingDrawable.draw(c);
            } else {
                c.drawCircle(left, ovalCenterX, ovalRadius, mPaint);
            }


            //分割線
            mPaint.setColor(lintColor);
            c.drawRect(parent.getPaddingLeft() + width, bottom, parent.getWidth() - parent.getPaddingRight(), bottom + dividerHeight, mPaint);


        }

    }
}

Activity

package com.xunevermore.timelinedecor;

import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.TypedValue;
import android.widget.TextView;

import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;

import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        BaseQuickAdapter<String,BaseViewHolder> adapter = new BaseQuickAdapter<String, BaseViewHolder>(R.layout.item_transport,
                Arrays.asList(getResources().getStringArray(R.array.transport_list))) {
            @Override
            protected void convert(BaseViewHolder helper, String item) {
                TextView tvDescribe = helper.getView(R.id.tv_describe);
                TextView tvTime = helper.getView(R.id.tv_time);
                tvDescribe.setText(item);
                tvTime.setText("2018-06-01 12:00");

                int position = helper.getAdapterPosition();
                tvDescribe.setTextColor(position==0?0xff4caf65:0xff999999);
                tvTime.setTextColor(position==0?0xff4caf65:0xff999999);

            }
        };

        recyclerView.addItemDecoration(new TimelineDecoration(getDimen(R.dimen.time_line_width),
                getDimen(R.dimen.time_line_top),
                ContextCompat.getDrawable(this,R.drawable.ic_check_circle),
                getDimen(R.dimen.time_going_size),
                1));
        recyclerView.setAdapter(adapter);

    }

    private int getDimen(int dimeRes){
        return (int) getResources().getDimension(dimeRes);
    }


}