Android自定義StepView仿外賣配送進(jìn)度

更新時(shí)間：2018年05月16日 11:30:58 作者：zc_shbj

這篇文章主要為大家詳細(xì)介紹了Android自定義StepView仿外賣配送進(jìn)度，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android自定義StepView配送進(jìn)度展示的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

使用

可在layout文件下設(shè)置以下屬性。

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 <declare-styleable name="StepView"> 
 <attr name="step_size" format="dimension"/><!--step的size，也就是image的大小--> 
 <attr name="line_size" format="dimension"/><!--線寬--> 
 <attr name="text_size" format="dimension"/><!--文字大小--> 
 <attr name="text_line_margin" format="dimension"/><!--文字和線之間的間距--> 
 <attr name="normal_line_color" format="color"/><!--一般線的顏色--> 
 <attr name="normal_text_color" format="color"/><!--一般文字的顏色--> 
 <attr name="target_text_color" format="color"/><!--一般文字的顏色--> 
 <attr name="passed_line_color" format="color"/><!--已經(jīng)過(guò)線的顏色--> 
 <attr name="step_count" format="integer"/><!--總step數(shù)--> 
 <attr name="current_step" format="integer"/><!--當(dāng)前step位置--> 
 <attr name="normal_step_iv" format="reference"/><!--一般圖片--> 
 <attr name="passed_step_iv" format="reference"/><!--已經(jīng)過(guò)的圖片--> 
 <attr name="target_step_iv" format="reference"/><!--當(dāng)前step圖片--> 
 <attr name="step_is_touch" format="boolean"/><!--step是否可點(diǎn)--> 
 <attr name="text_up_line" format="boolean"/><!--文字是否在線上--> 
 </declare-styleable> 
</resources>

CheckBox cbTouch = findViewById(R.id.cb_touch); 
CheckBox cbIsDown = findViewById(R.id.cb_is_down); 
final StepView stepView = findViewById(R.id.step_view); 
String[] stepTexts = new String[]{"訂單已提交", "商家已接單", "配送中", "已送達(dá)"}; 
stepView.setStepTexts(stepTexts);//傳入每一進(jìn)度的文字描述 
stepView.setCurrentStep(2);//設(shè)置當(dāng)前進(jìn)度所在位置 
stepView.setOnItemStepTouchListener(new StepView.OnItemStepTouchListener() { 
 @Override 
 public void onItemStepTouch(int postion) { 
 Log.d(TAG, "當(dāng)前點(diǎn)擊位置: "+postion); 
 } 
}); 
cbTouch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { 
 @Override 
 public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { 
 stepView.setStepIsTouch(isChecked); 
 } 
}); 
cbIsDown.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { 
 @Override 
 public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { 
 stepView.setTextUpLine(!isChecked); 
 } 
});

步驟

1、在構(gòu)造函數(shù)中初始化文字、線、step圖片的屬性。

public StepView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { 
 super(context, attrs, defStyleAttr); 
 init(context, attrs); 
 } 
 
 private void init(Context context, AttributeSet attrs) { 
 mLinePaint = new Paint(); 
 mLinePaint.setAntiAlias(true); 
 mTextPaint = new Paint(); 
 mTextPaint.setAntiAlias(true); 
 mPreLineLength = 0; 
 //默認(rèn)的step圖片 
 mNormalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_normal); 
 mPassedBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_passed); 
 mTargetBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_target); 
 
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.StepView); 
 //獲取xml文件中的線的顏色值、size 
 mNormalLineColor = typedArray.getColor(R.styleable.StepView_normal_line_color, Color.BLUE); 
 mPassedLineColor = typedArray.getColor(R.styleable.StepView_passed_line_color, Color.WHITE); 
 int lineSize = (int) typedArray.getDimension(R.styleable.StepView_line_size, 2); 
 //獲取xml文件中的文本的顏色值、size 
 mNormalTextColor = typedArray.getColor(R.styleable.StepView_normal_text_color, Color.BLACK); 
 mTargetTextColor = typedArray.getColor(R.styleable.StepView_target_text_color, Color.BLACK); 
 int textSize = (int) typedArray.getDimension(R.styleable.StepView_text_size, 10); 
 //獲取xml文件中的step的size，設(shè)置給step圖片的高度 
 int stepSize = (int) typedArray.getDimension(R.styleable.StepView_step_size, 0); 
 //獲取xml文件中的文本和線之間的間距 
 mTextLineMargin = (int) typedArray.getDimension(R.styleable.StepView_text_line_margin, 3); 
 //獲取xml文件中的step總數(shù) 
 mStepCount = typedArray.getInt(R.styleable.StepView_step_count, 2); 
 
 //獲取xml文件中的當(dāng)前step位置 
 mCurrentStep = typedArray.getInt(R.styleable.StepView_current_step, 0); 
 //獲取xml文件中step圖片 
 BitmapDrawable normalDrawable = (BitmapDrawable) typedArray.getDrawable(R.styleable.StepView_normal_step_iv); 
 BitmapDrawable passedDrawable = (BitmapDrawable) typedArray.getDrawable(R.styleable.StepView_passed_step_iv); 
 BitmapDrawable targetDrawable = (BitmapDrawable) typedArray.getDrawable(R.styleable.StepView_target_step_iv); 
 //獲取xml文件中step是否可點(diǎn)擊TRUE可以，F(xiàn)ALSE不可以，默認(rèn)為FALSE 
 mStepIsTouch = typedArray.getBoolean(R.styleable.StepView_step_is_touch, false); 
 //獲取xml文件中text是否在線上，TRUE在線上，F(xiàn)ALSE不在線上，默認(rèn)為FALSE 
 mTextUpLine = typedArray.getBoolean(R.styleable.StepView_text_up_line, true); 
 mTextPaint.setTextSize(textSize); 
 mLinePaint.setStrokeWidth(lineSize); 
 mNormalBitmap = normalDrawable.getBitmap();//將xml文件中指定的圖片賦給對(duì)應(yīng)的bitmap 
 mPassedBitmap = passedDrawable.getBitmap(); 
 mTargetBitmap = targetDrawable.getBitmap(); 
 mNormalBitmapWH = getBitmapWH(stepSize, mNormalBitmap); 
 mPassedBitmapWH = getBitmapWH(stepSize, mPassedBitmap); 
 mTargetBitmapWH = getBitmapWH(stepSize, mTargetBitmap); 
 if (stepSize != 0) {//如果stepSize不為0，要對(duì)其進(jìn)行壓縮處理，使其高度等于stepSize 
  mNormalBitmap = zoomImg(mNormalBitmap, mNormalBitmapWH); 
  mPassedBitmap = zoomImg(mPassedBitmap, mPassedBitmapWH); 
  mTargetBitmap = zoomImg(mTargetBitmap, mPassedBitmapWH); 
 } 
 mStepRectFs = new RectF[mStepCount];//初始化step所對(duì)應(yīng)的矩陣數(shù)組，點(diǎn)擊step時(shí)會(huì)用到，用于確定點(diǎn)擊的是哪個(gè)step 
 typedArray.recycle(); 
}

2、在onMeasure中對(duì)StepView的寬高進(jìn)行設(shè)置，并根據(jù)StepView的寬高計(jì)算每條直線的長(zhǎng)度。

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
 int widthMode = MeasureSpec.getMode(widthMeasureSpec); 
 int widthSize = MeasureSpec.getSize(widthMeasureSpec); 
 int heightMode = MeasureSpec.getMode(heightMeasureSpec); 
 int heightSize = MeasureSpec.getSize(heightMeasureSpec); 
 int width = widthSize - getPaddingLeft() - getPaddingRight();//任何模式下with都是父容器給定的with-padding值 
 int height = 0; 
 if (heightMode == MeasureSpec.EXACTLY) { 
 height = heightSize - getPaddingTop() - getPaddingBottom(); 
 } else { 
 height = dp2px(getContext(), 80); 
 } 
 setMeasuredDimension(width, height); 
 mPreLineLength = width / (mStepCount + 1);//計(jì)算每條線的長(zhǎng)度，由于線比step多一個(gè)所以加1 
}

3、開(kāi)始繪制，先畫線，再畫step和文字。

@Override 
protected void onDraw(Canvas canvas) { 
 if (mStepCount != 0) { 
 drawLine(canvas);//drawLine和drawStep分兩次循環(huán)是為了防止部分線覆蓋step 
 drawStep(canvas); 
 } 
}

4、畫線，前一條線的stopX坐標(biāo)是下一條線的startX坐標(biāo)，并根據(jù)當(dāng)前step所在的位置對(duì)lineColor進(jìn)行設(shè)置。

private void drawLine(Canvas canvas) { 
 float lineStartX = getPaddingLeft(); 
 float lineStartY = getLineStartY(); 
 float lineStopX = 0; 
 float lineStopY = lineStartY; 
 for (int i = 0; i < mStepCount + 1; i++) { 
 if (i < mCurrentStep - 1) { 
  mLinePaint.setColor(mPassedLineColor); 
 } else if (i == mCurrentStep - 1) { 
  mLinePaint.setColor(mPassedLineColor); 
 } else { 
  mLinePaint.setColor(mNormalLineColor); 
 } 
 lineStopX = lineStartX + mPreLineLength; 
 canvas.drawLine(lineStartX, lineStartY, lineStopX, lineStopY, mLinePaint); 
 lineStartX = lineStopX; 
 } 
}

5、畫step和文字。

private void drawStep(Canvas canvas) { 
 float lineStartX = getPaddingLeft(); 
 float lineStartY = getLineStartY(); 
 Bitmap currentBitmap; 
 int[] currentBitmapWH; 
 float lineStopX; 
 float bitmapLeft; 
 float bitmapTop; 
 for (int i = 0; i < mStepCount; i++) { 
 if (i < mCurrentStep - 1) { 
  currentBitmap = mPassedBitmap; 
  currentBitmapWH = mPassedBitmapWH; 
  mTextPaint.setColor(mNormalTextColor); 
 } else if (i == mCurrentStep - 1) { 
  currentBitmap = mTargetBitmap; 
  currentBitmapWH = mTargetBitmapWH; 
  mTextPaint.setColor(mTargetTextColor); 
 } else { 
  currentBitmap = mNormalBitmap; 
  currentBitmapWH = mNormalBitmapWH; 
  mTextPaint.setColor(mNormalTextColor); 
 } 
 lineStopX = lineStartX + mPreLineLength; 
 bitmapLeft = lineStopX - currentBitmapWH[0] / 2; 
 bitmapTop = lineStartY - currentBitmapWH[1] / 2; 
 canvas.drawBitmap(currentBitmap, bitmapLeft, bitmapTop, null); 
 mStepRectFs[i] = new RectF(bitmapLeft, bitmapTop, bitmapLeft + currentBitmapWH[0], bitmapTop + currentBitmapWH[1]); 
 if (mStepTexts != null) {//當(dāng)沒(méi)有傳入對(duì)應(yīng)的texts時(shí)不需要?jiǎng)澗€ 
  drawText(canvas, i, bitmapLeft + currentBitmapWH[1] / 2, bitmapTop, currentBitmapWH[1]);//傳入step中點(diǎn)坐標(biāo) 
 } 
 lineStartX = lineStopX; 
 } 
} 
 
private void drawText(Canvas canvas, int i, float x, float y, float bitmapH) { 
 String text = mStepTexts[i]; 
 int[] textWH = getTextWH(text); 
 int textWidth = textWH[0]; 
 int textHeight = textWH[1]; 
 float bottom = 0; 
 if (mTextUpLine) {//畫文本時(shí)的基準(zhǔn)點(diǎn)是left.bottom,使其中心點(diǎn)與step的中心點(diǎn)對(duì)其 
 bottom = y - mTextLineMargin; 
 } else { 
 bottom = y + bitmapH + mTextLineMargin + textHeight; 
 } 
 canvas.drawText(text, x - textWidth / 2, bottom, mTextPaint); 
}

6、對(duì)觸摸事件進(jìn)行處理。

@Override 
public boolean onTouchEvent(MotionEvent event) { 
 if (!mStepIsTouch) {//不能點(diǎn)擊返回FALSE不處理 
 return false; 
 } 
 switch (event.getAction()) { 
 case MotionEvent.ACTION_DOWN: 
  float x = event.getX(); 
  float y = event.getY(); 
  int touchStep = getTouchStep(new PointF(x, y));//獲取被點(diǎn)擊的點(diǎn)的位置 
  if (touchStep != -1) { 
  mCurrentStep = touchStep + 1; 
  invalidate(); 
  } 
  break; 
 } 
 return true; 
}

7、step的觸摸監(jiān)聽(tīng)。

private OnItemStepTouchListener mOnItemStepTouchListener; 
 
public void setOnItemStepTouchListener(OnItemStepTouchListener onItemStepTouchListener) { 
 mOnItemStepTouchListener = onItemStepTouchListener; 
} 
 
//每一個(gè)step的觸摸監(jiān)聽(tīng) 
public interface OnItemStepTouchListener { 
 void onItemStepTouch(int postion); 
}

8、設(shè)置當(dāng)前進(jìn)度所在位置，也可在layout文件中通過(guò)current_step屬性進(jìn)行設(shè)置。

//設(shè)置當(dāng)前step 
public void setCurrentStep(int currentStep) { 
 mCurrentStep = currentStep; 
 invalidate(); 
}

9、設(shè)置step對(duì)應(yīng)的文字，不傳入不會(huì)顯示文字。

//設(shè)置step對(duì)應(yīng)的texts 
public void setStepTexts(String[] stepTexts) { 
 mStepTexts = stepTexts; 
 mStepCount = mStepTexts.length; 
 mStepRectFs = new RectF[mStepCount];//初始化step所對(duì)應(yīng)的矩陣數(shù)組，點(diǎn)擊step時(shí)會(huì)用到，用于確定點(diǎn)擊的是哪個(gè)step 
}

10、設(shè)置step是否可點(diǎn)擊，不出入默認(rèn)為false不可點(diǎn)擊，也可在layout文件中通過(guò)step_is_touch屬性進(jìn)行設(shè)置。

public void setStepIsTouch(boolean stepIsTouch) { 
 mStepIsTouch = stepIsTouch; 
}

11、設(shè)置文字是否在線上，不傳入默認(rèn)為true在線上，也可在layout文件中通過(guò)text_up_line屬性進(jìn)行設(shè)置。

public void setTextUpLine(boolean textUpLine) { 
 mTextUpLine = textUpLine; 
 invalidate(); 
}

源碼地址：StepViewDemo

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android自定義StepView仿外賣配送進(jìn)度

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具