一津畸、實際項目效果圖
效果圖.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布局不一樣抱环，自己稍作調(diào)整就好。
六纸巷、列表條目（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方法里面的邏輯就好，實際開發(fā)用自己的Adapter
- 源碼：https://github.com/wenkency/views
