Android 横向布置控件，纵向时间轴控件（步骤，快递，时间轴

2022-03-03 本文已影响0人卖臭豆腐的王致和

转载请注明原创出处，谢谢！

GitHub: @Ricco

效果图.jpg

横向实现逻辑

使用自定义控件，先计算得到每个圆心的x轴坐标，然后绘制出圆心，长条，文字

获取控件的宽度
通过控件的宽度减去所有边距，除以数据个数 - 1得到圆心到圆心的距离（绘制圆点和各个线段使用）
通过圆心，圆心与文字的边距，文字的高度，计算文字显示的基线（绘制文字使用）
for循环，得到每个圆心的x轴
第一个圆点到最后一个圆心绘制灰线
如果比例大于0，小于等于100，每个圆点开始到百分比绘制绿线
如果比例大于0，绘制绿圆点，否则绘制灰圆点
根据圆点位置，绘制文字

StepView.java

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import androidx.annotation.Nullable;

/**
 * 自定义进度view
 *
 * @author Fenggr
 */
public class StepView extends View {

    /**
     * 数据
     */
    private String[] mTitles = new String[]{};

    /**
     * 进度
     */
    private int[] mProgress = new int[]{};

    /**
     * 画笔
     */
    private Paint paint;

    /**
     * 控件的宽高
     */
    private int widthSize, heightSize;

    /**
     * 圆半径
     */
    private int radius;

    /**
     * 每个点的圆心x位置
     */
    private float[] proX;

    /**
     * 每段进度条的长度
     */
    private float[] bgX;

    /**
     * 第一个和最后一个圆心的padding值
     */
    private int start, end;

    /**
     * 颜色 【到达的圆，未到达的圆，到达的字，未到达的字，到达的线，未到达的线】
     */
    private int[] colors = new int[]{0xFF09BB07, 0xFFE2E2E2, 0xFF333333, 0xFF999999, 0xFF09BB07, 0xFFE2E2E2};

    /**
     * 文字基线
     */
    private float textBaseline;

    public StepView (Context context) {
        super(context);
        initView();
    }

    public StepView (Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    private void initView() {
        radius = (int) dp2px(7);
        start = (int) dp2px(21);
        end = (int) dp2px(21);
        // 圆和文字间距
        int rtPadding = (int) dp2px(3);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(dp2px(3));
        paint.setTextSize(dp2px(14));
        paint.setTextAlign(Paint.Align.CENTER);
        FontMetrics fm = paint.getFontMetrics();
        // 文字高度
        int textHeight = (int) Math.ceil(fm.bottom - fm.top);
        // 圆 + 间距 + 文字高度
        heightSize = radius * 2 + rtPadding + textHeight;
        // 因为setTextAlign(Paint.Align.CENTER);
        // textBaseline(文字基线位置) = heightSize(控件高度) - Baseline(文字基线)
        // Baseline = (FontMetrics.bottom - FontMetrics.top)/2 - FontMetrics.bottom
        textBaseline = heightSize - textHeight / 2f + fm.bottom;
    }

    public void setData(String[] titles, int[] progress) {
        // 有数据，并且长度大于1
        if (titles != null && progress != null && titles.length == progress.length && titles.length > 1) {
            this.mTitles = titles;
            this.mProgress = progress;
            proX = new float[titles.length];
            bgX = new float[titles.length];
            // post后执行，保证widthSize有值
            post(() -> {
                // 紧挨着的两个圆心的距离
                float interval = (widthSize - radius * 2f - start - end) / (titles.length - 1);
                for (int i = 0; i < titles.length; i++) {
                    // 每个圆心的位置
                    proX[i] = start + radius + interval * i;
                    // 每段背景的到达位置
                    if (mProgress[i] > 0 && mProgress[i] <= 100) {
                        bgX[i] = proX[i] + interval * mProgress[i] / 100f;
                    } else {
                        bgX[i] = proX[i];
                    }
                }
                postInvalidate();
            });
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        widthSize = MeasureSpec.getSize(widthMeasureSpec);
        // 设置控件的宽，高（圆+字+间隔）
        setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (proX == null || proX.length <= 1) {
            return;
        }
        // 背景
        // 从头到尾全灰
        paint.setColor(colors[5]);
        canvas.drawLine(proX[0], radius, proX[proX.length - 1], radius, paint);
        // 画绿
        paint.setColor(colors[4]);
        for (int i = 0; i < proX.length - 1; i++) {
            if (mProgress[i] > 0 && mProgress[i] <= 100) {
                canvas.drawLine(proX[i], radius, bgX[i], radius, paint);
            }
        }
        // 圆点
        for (int i = 0; i < proX.length; i++) {
            paint.setColor(mProgress[i] > 0 ? colors[0] : colors[1]);
            canvas.drawCircle(proX[i], radius, radius, paint);
        }
        // 文字
        for (int i = 0; i < proX.length; i++) {
            paint.setColor(mProgress[i] > 0 ? colors[2] : colors[3]);
            canvas.drawText(mTitles[i], proX[i], textBaseline, paint);
        }
    }

    private static float dp2px(float dp) {
        Resources r = Resources.getSystem();
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics());
    }
}

使用方法

stepView.setData(new String[]{"已受理","操作中","已完结"}, new int{100,50,0});

ps：

public void setData(String[] titles, int[] progress) ，使用int数组的方式，方便控制每一段的进度
2.现在的控件所以属性都是写死了，如果有需要可以自己扩展

纵向实现逻辑

使用RecyclerView通过控制item的显示隐藏即可实现

item分左右2个部分，左部分包含（上灰色线，中灰色圆点，下灰色线，中黄色圆点），右部分为数据。其中黄色圆点大于灰色圆点，并将其盖住
在adapter中判断显示隐藏

第一条数据隐藏【上灰色线】，显示【黄色大圆点】
最后一条数据隐藏【下灰色线】，隐藏【黄色大圆点】
其他数据隐藏【黄色大圆点】即可

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="32dp"
        android:layout_height="match_parent"
        android:layout_marginStart="5dp">

        <View
            android:id="@+id/vTopLine"
            android:layout_width="2dp"
            android:layout_height="10dp"
            android:layout_centerHorizontal="true"
            android:background="#CCCCCC" />

        <View
            android:id="@+id/vDot"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="@drawable/shape_cccccc_1000dp" />

        <View
            android:id="@+id/vBottomLine"
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_below="@id/vDot"
            android:layout_centerHorizontal="true"
            android:background="#CCCCCC" />

        <ImageView
            android:id="@+id/ivDot2"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="6dp"
            android:background="@drawable/shape_e39c55_1000dp"
            android:contentDescription="@null"
            android:src="@drawable/ic_check_white_24dp" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tvDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="6dp"
            android:layout_marginEnd="5dp"
            android:textSize="14sp"
            tools:text="2022-03-03 15:17:32" />

        <TextView
            android:id="@+id/tvContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="5dp"
            android:layout_marginBottom="10dp"
            tools:text="xxx将订单状态操作为已派单" />
    </LinearLayout>
</LinearLayout>

ativity.xml

<androidx.recyclerview.widget.RecyclerView
                        android:id="@+id/rvLogStep"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:layout_marginBottom="10dp"
                        app:layoutManager="androidx.recyclerview.widget.StaggeredGridLayoutManager"
                        app:spanCount="1"
                        tools:itemCount="3"
                        tools:listitem="@layout/item" />

Adapter.java

public class LogStepAdapter extends BaseQuickAdapter<Bean, BaseViewHolder> {
    public LogStepAdapter() {
        super(R.layout.item);
    }

    @Override
    protected void convert(@NonNull BaseViewHolder helper, Bean item) {
        helper.setText(R.id.tvDate, "" + item.getDate())
                .setText(R.id.tvContent, "" + item.getContent())
                .setTextColor(R.id.tvDate, helper.getLayoutPosition() == 0 ? 0xFFE39C55 : 0xFF333333)
                .setTextColor(R.id.tvContent, helper.getLayoutPosition() == 0 ? 0xFFE39C55 : 0xFF666666)
                .setVisible(R.id.ivDot2, helper.getLayoutPosition() == 0) // 第一个显示黄色对勾
                .setGone(R.id.vTopLine, helper.getLayoutPosition() != 0) // 第一个隐藏上面的线
                .setGone(R.id.vBottomLine, helper.getLayoutPosition() != mData.size() - 1); // 最后一个隐藏下面的线
        TextView tvDate = helper.getView(R.id.tvDate);
        TextView tvContent = helper.getView(R.id.tvContent);
        if (helper.getLayoutPosition() == 0) {
            tvDate.setTextSize(14);
            tvContent.setTextSize(14);
        } else {
            tvDate.setTextSize(12);
            tvContent.setTextSize(12);
        }
    }
}

Android 横向布置控件，纵向时间轴控件（步骤，快递，时间轴

转载请注明原创出处，谢谢！

横向实现逻辑

纵向实现逻辑

猜你喜欢

热点阅读