Android自定義StepView仿外賣配送進度
更新時間：2018年05月16日 11:30:58 作者：zc_shbj
這篇文章主要為大家詳細介紹了Android自定義StepView仿外賣配送進度，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Android自定義StepView配送進度展示的具體代碼，供大家參考，具體內(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)過線的顏色--> <attr name="step_count" format="integer"/><!--總step數(shù)--> <attr name="current_step" format="integer"/><!--當前step位置--> <attr name="normal_step_iv" format="reference"/><!--一般圖片--> <attr name="passed_step_iv" format="reference"/><!--已經(jīng)過的圖片--> <attr name="target_step_iv" format="reference"/><!--當前step圖片--> <attr name="step_is_touch" format="boolean"/><!--step是否可點--> <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[]{"訂單已提交", "商家已接單", "配送中", "已送達"};
stepView.setStepTexts(stepTexts);//傳入每一進度的文字描述
stepView.setCurrentStep(2);//設(shè)置當前進度所在位置
stepView.setOnItemStepTouchListener(new StepView.OnItemStepTouchListener() {
@Override
public void onItemStepTouch(int postion) {
Log.d(TAG, "當前點擊位置: "+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;
//默認的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文件中的當前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是否可點擊TRUE可以，F(xiàn)ALSE不可以，默認為FALSE
mStepIsTouch = typedArray.getBoolean(R.styleable.StepView_step_is_touch, false);
//獲取xml文件中text是否在線上，TRUE在線上，F(xiàn)ALSE不在線上，默認為FALSE
mTextUpLine = typedArray.getBoolean(R.styleable.StepView_text_up_line, true);
mTextPaint.setTextSize(textSize);
mLinePaint.setStrokeWidth(lineSize);
mNormalBitmap = normalDrawable.getBitmap();//將xml文件中指定的圖片賦給對應(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，要對其進行壓縮處理，使其高度等于stepSize
mNormalBitmap = zoomImg(mNormalBitmap, mNormalBitmapWH);
mPassedBitmap = zoomImg(mPassedBitmap, mPassedBitmapWH);
mTargetBitmap = zoomImg(mTargetBitmap, mPassedBitmapWH);
}
mStepRectFs = new RectF[mStepCount];//初始化step所對應(yīng)的矩陣數(shù)組，點擊step時會用到，用于確定點擊的是哪個step
typedArray.recycle();
}
2、在onMeasure中對StepView的寬高進行設(shè)置，并根據(jù)StepView的寬高計算每條直線的長度。
@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);//計算每條線的長度，由于線比step多一個所以加1
}
3、開始繪制，先畫線，再畫step和文字。
@Override
protected void onDraw(Canvas canvas) {
if (mStepCount != 0) {
drawLine(canvas);//drawLine和drawStep分兩次循環(huán)是為了防止部分線覆蓋step
drawStep(canvas);
}
}
4、畫線，前一條線的stopX坐標是下一條線的startX坐標，并根據(jù)當前step所在的位置對lineColor進行設(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) {//當沒有傳入對應(yīng)的texts時不需要劃線
drawText(canvas, i, bitmapLeft + currentBitmapWH[1] / 2, bitmapTop, currentBitmapWH[1]);//傳入step中點坐標
}
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) {//畫文本時的基準點是left.bottom,使其中心點與step的中心點對其
bottom = y - mTextLineMargin;
} else {
bottom = y + bitmapH + mTextLineMargin + textHeight;
}
canvas.drawText(text, x - textWidth / 2, bottom, mTextPaint);
}
6、對觸摸事件進行處理。
@Override
public boolean onTouchEvent(MotionEvent event) {
if (!mStepIsTouch) {//不能點擊返回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));//獲取被點擊的點的位置
if (touchStep != -1) {
mCurrentStep = touchStep + 1;
invalidate();
}
break;
}
return true;
}
7、step的觸摸監(jiān)聽。
private OnItemStepTouchListener mOnItemStepTouchListener;
public void setOnItemStepTouchListener(OnItemStepTouchListener onItemStepTouchListener) {
mOnItemStepTouchListener = onItemStepTouchListener;
}
//每一個step的觸摸監(jiān)聽
public interface OnItemStepTouchListener {
void onItemStepTouch(int postion);
}
8、設(shè)置當前進度所在位置，也可在layout文件中通過current_step屬性進行設(shè)置。
//設(shè)置當前step
public void setCurrentStep(int currentStep) {
mCurrentStep = currentStep;
invalidate();
}
9、設(shè)置step對應(yīng)的文字，不傳入不會顯示文字。
//設(shè)置step對應(yīng)的texts
public void setStepTexts(String[] stepTexts) {
mStepTexts = stepTexts;
mStepCount = mStepTexts.length;
mStepRectFs = new RectF[mStepCount];//初始化step所對應(yīng)的矩陣數(shù)組，點擊step時會用到，用于確定點擊的是哪個step
}
10、設(shè)置step是否可點擊，不出入默認為false不可點擊，也可在layout文件中通過step_is_touch屬性進行設(shè)置。
public void setStepIsTouch(boolean stepIsTouch) {
mStepIsTouch = stepIsTouch;
}
11、設(shè)置文字是否在線上，不傳入默認為true在線上，也可在layout文件中通過text_up_line屬性進行設(shè)置。
public void setTextUpLine(boolean textUpLine) {
mTextUpLine = textUpLine;
invalidate();
}
源碼地址：StepViewDemo
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了android事件分發(fā)機制的實現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
詳解Android權(quán)限管理之Android 6.0運行時權(quán)限及解決辦法
本篇文章主要介紹Android權(quán)限管理之Android 6.0運行時權(quán)限及解決辦法，具有一定的參考價值，有興趣的可以了解一下。2016-11-11
這篇文章主要介紹了Android編程實用技術(shù),實例匯總了開機啟動receiver、service使用、AlarmManager發(fā)送廣播及停止AlarmManager等相關(guān)技巧,需要的朋友可以參考下2016-01-01
Android創(chuàng)建和使用數(shù)據(jù)庫SQLIte
這篇文章主要為大家詳細介紹了Android創(chuàng)建和使用數(shù)據(jù)庫SQLIte的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-05-05
淺談Android開發(fā)者2017年最值得關(guān)注的25個實用庫
本篇文章主要介紹了Android開發(fā)者2017年最值得關(guān)注的25個庫，非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Android LayoutParams使用案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
Android長按imageview把圖片保存到本地的實例代碼
本文通過代碼給大家介紹了Android長按imageview把圖片保存到本地的實現(xiàn)方法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-12-12
本篇文章是對在Android中實現(xiàn)左右滑動指引效果的方法進行了詳細的分析介紹，需要的朋友參考下2013-06-06
Android SharedPreferences存儲用法詳解
這篇文章主要為大家詳細介紹了Android SharedPreferences存儲用法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
自定義Adapter并通過布局泵LayoutInflater抓取layout模板編輯每一個item實現(xiàn)思路
自定義Adapter并通過布局泵LayoutInflater抓取layout模板編輯每一個item，下面我們開始學習這一篇的內(nèi)容，感興趣的朋友可以了解下哈2013-06-06