在項目中有時會用到流程信息,比如申請信用卡,申請貸款等等,需要填寫各方面的信息,此時就會用到進度導航的view,接下來給大家介紹一下具體實現流程,廢話不多說先來效果圖看看!
6795911881.gif
代碼如下:
/**
* Description:
* - - - - - - - - - - - - - - - - - - -
* Created by HUI on 17/3/16.
* - - - - - - - - - - - - - - - - - - -
* Version 1.0.0
*/
public class StepView extends View {
private static final int minHorizontalSpace = 100; //左右兩側保留的最小距離
private int circleRadius = 30; //圓半徑
private float circleMultiple = 1.5f; //當前進度圓與正常圓的比例
private int mWidth;
private int paddingLeft;
private int paddingRight;
private int paddingBottom;
private int paddingTop;
private Paint circlePaint; //畫圓畫筆
private Paint textPaint; //文字畫筆
private Paint linePaint; //進度線畫筆
private int stepNum = 0;
private int currentStep = 0; //當前步驟(從0開始)
private int lineDoneColor = Color.parseColor("#FFB90F");
private int lineDefaultColor = Color.parseColor("#FFE4E1");
private int circleSelectColor = Color.parseColor("#FFB90F");
private int circleDefaultColor = Color.parseColor("#FFE4E1");
private int textSelectColor = Color.parseColor("#FFB90F");
private int textDefaultColor = Color.parseColor("#FFE4E1");
private String[] titles;
public StepView(Context context) {
super(context);
init();
}
public StepView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public StepView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
//初始化進度圓畫筆
circlePaint = new Paint();
circlePaint.setColor(circleDefaultColor);
circlePaint.setAntiAlias(true);
circlePaint.setStyle(Paint.Style.FILL);
//初始化文字畫筆
textPaint = new Paint();
textPaint.setColor(textDefaultColor);
textPaint.setAntiAlias(true);
textPaint.setTextSize(40);
textPaint.setTextAlign(Paint.Align.CENTER);
//初始化進度線畫筆
linePaint = new Paint();
linePaint.setColor(lineDefaultColor);
linePaint.setAntiAlias(true);
linePaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widhtSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
//左右兩邊要保留一定距離,否則顯示不完全
paddingLeft = Math.max(getPaddingLeft(), minHorizontalSpace);
paddingRight = Math.max(getPaddingRight(), minHorizontalSpace);
paddingBottom = getPaddingBottom();
paddingTop = getPaddingTop();
mWidth = widhtSize;
//對整體View的高度控制,保證可以完整顯示
int mHeight = (int) Math.min(heightSize, 2 * circleMultiple * circleRadius + 120) + paddingTop + paddingBottom;
heightMeasureSpec = MeasureSpec.makeMeasureSpec(mHeight, MeasureSpec.EXACTLY);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
if (titles == null || titles.length == 0) {
return;
}
//①計算進度線的長度
int space = (mWidth - stepNum * circleRadius * 2 - paddingLeft - paddingRight) / (stepNum - 1);
//進度線和進度圓的Y坐標
float mY = circleMultiple * circleRadius + paddingTop;
//②畫進度線
float lineLeft; //左起點
float lineRight;//右終點
for (int i = 0; i < stepNum; i++) {
linePaint.setColor(i <= currentStep ? lineDoneColor : lineDefaultColor);
lineLeft = Math.max(i, 1) * 2 * circleRadius + Math.max(i - 1, 0) * space + paddingLeft;
lineRight = Math.max(i, 1) * 2 * circleRadius + i * space + paddingLeft;
RectF rectf = new RectF(lineLeft, mY - 4, lineRight, mY + 4);
canvas.drawRect(rectf, linePaint);
}
//③畫進度圓
float x; //圓心橫坐標
for (int i = 0; i < stepNum; i++) {
circlePaint.setColor(i <= currentStep ? circleSelectColor : circleDefaultColor);
x = (float) ((i * 2 + 1) * circleRadius + i * space) + paddingLeft;
canvas.drawCircle(x, mY, i == currentStep ? circleRadius * circleMultiple : circleRadius, circlePaint);
}
//④進度圓內的文字
for (int i = 0; i < stepNum; i++) {
textPaint.setColor(i == currentStep ? textDefaultColor : textSelectColor);
canvas.drawText(i == currentStep ? (i + 1) + "" : "", (i * 2 + 1) * circleRadius + i * space + paddingLeft, mY + 13, textPaint);
}
//⑤具體進度文案
float textY = mY + circleMultiple * circleRadius + 80;
for (int i = 0; i < stepNum; i++) {
textPaint.setColor(i <= currentStep ? textSelectColor : textDefaultColor);
canvas.drawText(titles[i], (i * 2 + 1) * circleRadius + i * space + paddingLeft, textY, textPaint);
}
}
//設置進度標題數組
public void setTitles(String[] titles) {
this.titles = titles;
this.stepNum = titles.length;
postInvalidate();
}
//獲取總進度數
public int getStepNum() {
return stepNum;
}
//設置當前進度
public void setCurrentStep(int currentStep) {
this.currentStep = currentStep;
postInvalidate();
}
//獲取當前進度
public int getCurrentStep() {
return currentStep;
}
}
在布局layout中引用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.summer.tree.widget.StepView
android:id="@+id/sv"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:paddingTop="10dp"
android:paddingBottom="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#d2d2d2"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal">
<Button
android:id="@+id/last"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="后退"/>
<Button
android:id="@+id/next"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="前進"/>
</LinearLayout>
</LinearLayout>
在代碼中使用:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
mNavView.setNavigationItemSelectedListener(this);
String[] titles = new String[]{"個人信息", "申請資料", "聯系人", "確認信息"};
//設置進度標題
stepView.setTitles(titles);
//后退按鈕
mLastBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int step = sv.getCurrentStep();
//設置進度
stepView.setCurrentStep(Math.max((step - 1) % stepView.getStepNum(), 0));
}
});
//前進按鈕
mNextBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int step = sv.getCurrentStep();
//設置進度
stepView.setCurrentStep((step + 1) % stepView.getStepNum());
}
});
}
可以根據產品的不同配置畫筆風格以及樣式等等,自己可以添加修改的方法.
