一、实际项目效果图
效果图.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
- 源码：https://github.com/wenkency/views
