Android订单流程view（超简单！）

最新推荐文章于 2024-08-08 07:33:31 发布

原创

最新推荐文章于 2024-08-08 07:33:31 发布 · 4.8k 阅读

11 ·

CC 4.0 BY-SA版权

本文介绍了如何使用自定义View轻松实现Android订单流程视图，通过定义属性、继承View并重写onMeasure和onDraw方法，展示了完整的过程。提供了一个GitHub项目链接和群号供交流。

前言：最近在做rn、h5然后时不时的再来一点android的需求，尼玛～～感觉不要不要的啊，思维都混淆了都，不管咋样，多学点技术还是不错的，所以还是加油吧！

项目github地址：
https://github.com/913453448/ProcessDemo

欢迎入群：群号:511276976

在群里看到小伙伴发了这么一个需求，先看看最终效果图：

这里写图片描述

这里写图片描述
怎么样，效果还是很不错的吧？群里有人说切四张图的、recycleview的、各种的都有啊，但是最简单的就是通过自定义view来实现了～接下来让我们来实现下这个（订单流程view）。

首先我们定义好我们的自定义属性：

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ProcessView">
        <!--滑动圆点的半径-->
        <attr name="thumb_radius" format="dimension"/>
        <!--到达的颜色-->
        <attr name="color_reached" format="color"/>
        <!--未到达的颜色-->
        <attr name="color_unreached" format="color"/>
        <!--textsize的大小-->
        <attr name="textsize" format="dimension"/>
        <!--text的颜色-->
        <attr name="text_color" format="color"/>
        <!--线的宽度-->
        <attr name="line_width" format="dimension"/>
        <!--状态文字数组-->
        <attr name="texts" format="reference"/>
    </declare-styleable>
</resources>

然后就是我们的老套路了，创建一个叫ProcessView的类继承view，然后定义好我们需要的属性：

/**
 * Created by leo on 17/3/27.
 */

public class ProcessView extends View {
   
   
    /**
     * 默认线宽度
     */
    private static final float D_LINE_WIDTH = 3;
    /**
     * 默认滑动圆点半径
     */
    private static final float D_THUMB_RADIUS = 10;
    /**
     * 默认textsize
     */
    private static final float D_TEXT_SIZE = 13f;
    private static final int D_REACH_COLOR = 0xFFF1AE0D;
    private static final int D_UNREACH_COLOR = Color.WHITE;
    private static final int D_TEXT_COLOR = Color.WHITE;

    private Paint linePaint;
    private TextPaint textPaint;
    private Paint thumbPaint;

    private float mTextSize = xx2px(TypedValue.COMPLEX_UNIT_SP, D_TEXT_SIZE);
    private float mLineWidth = xx2px(TypedValue.COMPLEX_UNIT_DIP, D_LINE_WIDTH);
    private float mThumbRadius = xx2px(TypedValue.COMPLEX_UNIT_DIP, D_THUMB_RADIUS);
    private int mReachedColor = D_REACH_COLOR;
    private int mUnreachedColor = D_UNREACH_COLOR;
    private int mTextColor = D_TEXT_COLOR;

    //当前进度
    private float mProgress = 0.0f;
    //所有的状态文字
    private String[] texts;

    public ProcessView(Context context) {
        this(context, null);
    }

    public ProcessView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ProcessView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        obtainStyledAttrs(context, attrs, defStyleAttr);
        initViews();
    }

    /**
     * 获取我们的自定义属性
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    private void obtainStyledAttrs(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ProcessView, defStyleAttr, 0);
        texts = a.hasValue(R.styleable.ProcessView_texts) ?
                getResources().getStringArray(a.getResourceId(R.styleable.ProcessView_texts, 0)) : texts;
        mLineWidth = a.hasValue(R.styleable.ProcessView_line_width) ?
                a.getDimensionPixelSize(R.styleable.Proces