Android自定义物流进度布局StepProgressLayo

作者: Sky_Blue | 来源:发表于2019-09-17 12:11 被阅读0次

一、实际项目效果图

效果图.png

二、效果分析

效果分析.png

条目有三种样式：第一条、中间部分、最后一条
一个条目分成三个部分，二条线加一个图标
图标大小有二种样式
二条线均可以设置显示或者隐藏

三、自定义属性

<declare-styleable name="StepProgressLayout">
        <!--第一个条目的图片、大小-->
        <attr name="step_first_image" format="reference" />
        <attr name="step_first_image_size" format="dimension" />
        <!--第一条Top线的高度-->
        <attr name="step_first_line_height" format="dimension" />
        <!--正常条目的图片、大小-->
        <attr name="step_normal_image" format="reference" />
        <attr name="step_normal_image_size" format="dimension" />
        <!--正常条目Top线的高度-->
        <attr name="step_normal_line_height" format="dimension" />
        <!--线的大小、线的颜色-->
        <attr name="step_line_size" format="dimension" />
        <attr name="step_line_color" format="color|reference" />
       <!--条目样式-->
        <attr name="step_style" format="enum">
            <enum name="first" value="0" />
            <enum name="normal" value="1" />
            <enum name="end" value="2" />
        </attr>
    </declare-styleable>

四、自定义（R.layout.layout_view_step）布局样式

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <View
        android:id="@+id/step_top_line"
        android:layout_width="1px"
        android:layout_height="22dp"
        android:background="#e6e6e6"
        app:layout_constraintBottom_toTopOf="@id/step_icon"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/step_icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/ic_supplier_on"
        app:layout_constraintBottom_toTopOf="@id/step_bottom_line"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/step_top_line" />

    <View
        android:id="@+id/step_bottom_line"
        android:layout_width="1px"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#e6e6e6"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/step_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>

布局很简单，自己看看就行
对于ConstraintLayout 不会用的自己去百度

五、自定义StepProgressLayout布局

package cn.carhouse.yctone.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.constraintlayout.widget.ConstraintLayout;

import cn.carhouse.yctone.R;

/**
 * 物流进度的View
 */
public class StepProgressLayout extends ConstraintLayout {
    private int mFirstImage;
    private int mFirstImageSize;
    private int mNormalImage;
    private int mNormalImageSize;
    private int mLineSize;
    private int mLineColor = Color.parseColor("#e6e6e6");
    private int mFirstLineHeight, mNormalLineHeight;
    private int mStepStyle = STYLE_NORMAL;// 进度样式
    private static final int STYLE_FIRST = 0;//  第一个条目样式
    private static final int STYLE_NORMAL = 1;//  正常条目样式
    private static final int STYLE_END = 2;//  最后一条条目样式

    private View mTopLine, mBottomLine;
    private ImageView mIcon;

    public StepProgressLayout(@NonNull Context context) {
        this(context, null);
    }

    public StepProgressLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StepProgressLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 加载布局
        inflate(context, R.layout.layout_view_step, this);
        // 加载自定义的属性
        obtainStyledAttributes(context, attrs);
        // 初始化View
        initViews();
    }


    private void obtainStyledAttributes(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.StepProgressLayout);
        mFirstImage = array.getResourceId(R.styleable.StepProgressLayout_step_first_image, 0);
        mFirstImageSize = (int) array.getDimension(R.styleable.StepProgressLayout_step_first_image_size, dip2px(20));
        mNormalImage = array.getResourceId(R.styleable.StepProgressLayout_step_normal_image, 0);
        mNormalImageSize = (int) array.getDimension(R.styleable.StepProgressLayout_step_normal_image_size, dip2px(11));
        mLineSize = (int) array.getDimension(R.styleable.StepProgressLayout_step_line_size, 1);
        mLineColor = array.getColor(R.styleable.StepProgressLayout_step_line_color, mLineColor);
        mFirstLineHeight = (int) array.getDimension(R.styleable.StepProgressLayout_step_first_line_height, dip2px(17));
        mNormalLineHeight = (int) array.getDimension(R.styleable.StepProgressLayout_step_normal_line_height, dip2px(17));
        array.recycle();
    }

    private void initViews() {
        mTopLine = findViewById(R.id.step_top_line);
        mBottomLine = findViewById(R.id.step_bottom_line);
        mIcon = findViewById(R.id.iv_icon);

        if (mStepStyle == STYLE_FIRST) {
            setImageResource(mFirstImage);
            setImageSize(mFirstImageSize);
            mTopLine.setVisibility(INVISIBLE);
        } else if (mStepStyle == STYLE_NORMAL || mStepStyle == STYLE_END) {
            setImageResource(mNormalImage);
            setImageSize(mNormalImageSize);
            if (mStepStyle == STYLE_END) {
                mBottomLine.setVisibility(INVISIBLE);
            }
        }
        setTopLineHeight(mFirstLineHeight);
        setLineColor(mLineColor);
        setLineSize(mLineSize);

    }

    public void setLineColor(int color) {
        if (color != 0) {
            mBottomLine.setBackgroundColor(color);
            mTopLine.setBackgroundColor(color);
        }
    }

    /**
     * 设置第一条线第一个条目的高度
     */
    public void setFirstLineHeight(int height) {
        this.mFirstLineHeight = height;
    }

    /**
     * 设置第一条线正常样式的高度
     */
    public void setNormalLineHeight(int height) {
        this.mNormalLineHeight = height;
    }

    public void setTopLineHeight(int height) {
        if (height != 0) {
            ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) mTopLine.getLayoutParams();
            params.height = height;
            mTopLine.setLayoutParams(params);
        }
    }

    /**
     * 设置线的大小
     */
    public void setLineSize(int width) {
        this.mLineSize = width;
        if (this.mLineSize != 0) {
            ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) mTopLine.getLayoutParams();
            params.width = width;
            mTopLine.setLayoutParams(params);

            params = (ConstraintLayout.LayoutParams) mBottomLine.getLayoutParams();
            params.width = width;
            mBottomLine.setLayoutParams(params);
        }
    }


    /**
     * 设置第一个图片资源
     */
    public void setHeadImageSize(int size) {
        this.mFirstImageSize = size;
        setImageSize(this.mFirstImageSize);
    }


    private void setImageResource(int resource) {
        if (resource != 0) {
            mIcon.setImageResource(resource);
        }
    }

    private void setImageSize(int size) {
        if (size >= 0) {
            ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) mIcon.getLayoutParams();
            params.height = size;
            params.width = size;
            mIcon.setLayoutParams(params);
        }
    }

    /**
     * 变成第一个条目样式
     */
    public void changeFirstStyle() {
        if (mStepStyle != STYLE_FIRST) {
            mStepStyle = STYLE_FIRST;
            mTopLine.setVisibility(INVISIBLE);
            setImageResource(mFirstImage);
            setHeadImageSize(mFirstImageSize);
            setTopLineHeight(mFirstLineHeight);
        }
    }

    /**
     * 变成正常条目样式
     */
    public void changeNormalStyle() {
        if (mStepStyle != STYLE_NORMAL) {
            mStepStyle = STYLE_NORMAL;
            mBottomLine.setVisibility(VISIBLE);
            mTopLine.setVisibility(VISIBLE);
            setImageResource(mNormalImage);
            setImageSize(mNormalImageSize);
            setTopLineHeight(mFirstLineHeight);
        }
    }

    /**
     * 最后一种样式
     */
    public void changeEndStyle() {
        if (mStepStyle != STYLE_END) {
            mStepStyle = STYLE_END;
            mTopLine.setVisibility(VISIBLE);
            mBottomLine.setVisibility(INVISIBLE);
            setImageResource(mNormalImage);
            setImageSize(mNormalImageSize);
            setTopLineHeight(mFirstLineHeight);
        }
    }

    private int dip2px(int dip) {
        return (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics()) + 0.5);
    }
}

提供了一些常用方法，每个公司的UI布局不一样，自己稍作调整就好。

六、列表条目（R.layout.supplier_item_express_track_item）布局技巧

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <!--换成你的View的位置-->
    <your view packet .StepProgressLayout
        android:id="@+id/step_view"
        android:layout_width="50dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/v_item_bottom_line"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:step_first_image="@drawable/ic_supplier_express_first"
        app:step_normal_image="@drawable/ic_supplier_express_normal"
        app:step_style="normal" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="17dp"
        android:layout_marginRight="24dp"
        android:lineSpacingMultiplier="1.2"
        android:text="[深圳市] 快件已签收，感谢您！，期[深圳市] 快件已签收快件已签收快件已签收快件已签收快件已签收"
        android:textColor="@color/c_aa"
        android:textSize="14dp"
        app:layout_constraintLeft_toRightOf="@id/step_view"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/step_view" />

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginRight="24dp"
        android:lineSpacingMultiplier="1.2"
        android:text="2016-07-12  12 : 30"
        android:textColor="@color/c_aa"
        android:textSize="14dp"
        app:layout_constraintLeft_toLeftOf="@id/tv_name"
        app:layout_constraintLeft_toRightOf="@id/step_view"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_name" />

    <View
        android:id="@+id/v_item_bottom_line"
        android:layout_width="0dp"
        android:layout_height="2px"
        android:layout_marginTop="14dp"
        android:background="@color/line_bg"
        app:layout_constraintLeft_toLeftOf="@id/tv_name"
        app:layout_constraintLeft_toRightOf="@id/step_view"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_time" />
</androidx.constraintlayout.widget.ConstraintLayout>

用底部的线来约束限制左边自己定义View的高度

七、列表Adapter测试代码

mRecyclerView.setAdapter(new XQuickAdapter<String>(getAppActivity(), items, R.layout.supplier_item_express_track_item) {
            @Override
            public void convert(XQuickViewHolder holder, String item, int position) {
                StepProgressLayout step = holder.getView(R.id.step_view);
                TextView tvName = holder.getView(R.id.tv_name);
                TextView tvTime = holder.getView(R.id.tv_time);
                // 第一个位置
                if (position == 0) {
                    step.changeFirstStyle();
                    holder.setBold(tvName, true);
                    holder.setBold(tvTime, true);
                    tvName.setTextColor(Color.parseColor("#FFDD2828"));
                    tvTime.setTextColor(Color.parseColor("#FFDD2828"));
                } else {
                    // 最后一个位置
                    if (position == getCount() - 1) {
                        step.changeEndStyle();
                    } else {
                        step.changeNormalStyle();
                    }
                    holder.setBold(tvName, false);
                    holder.setBold(tvTime, false);
                    tvName.setTextColor(Color.parseColor("#FFAAAAAA"));
                    tvTime.setTextColor(Color.parseColor("#FFAAAAAA"));
                }
            }
        });

看convert方法里面的逻辑就好，实际开发用自己的Adapter

Android自定义物流进度布局StepProgressLayo

一、实际项目效果图

二、效果分析

三、自定义属性

四、自定义（R.layout.layout_view_step）布局样式

五、自定义StepProgressLayout布局

六、列表条目（R.layout.supplier_item_express_track_item）布局技巧

七、列表Adapter测试代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android应用开发那些事

移动端

Android开发学习

Android自定义控件

APP开发经验总结

Android