Android自定義StepView仿外賣配送進(jìn)度
本文實(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)過線的顏色--> <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)過的圖片--> <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文件中指定的圖片賦給對應(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,要對其進(jìn)行壓縮處理,使其高度等于stepSize mNormalBitmap = zoomImg(mNormalBitmap, mNormalBitmapWH); mPassedBitmap = zoomImg(mPassedBitmap, mPassedBitmapWH); mTargetBitmap = zoomImg(mTargetBitmap, mPassedBitmapWH); } mStepRectFs = new RectF[mStepCount];//初始化step所對應(yīng)的矩陣數(shù)組,點(diǎn)擊step時會用到,用于確定點(diǎn)擊的是哪個step typedArray.recycle(); }
2、在onMeasure中對StepView的寬高進(jìn)行設(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坐標(biāo)是下一條線的startX坐標(biāo),并根據(jù)當(dāng)前step所在的位置對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)沒有傳入對應(yīng)的texts時不需要劃線 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) {//畫文本時的基準(zhǔn)點(diǎn)是left.bottom,使其中心點(diǎn)與step的中心點(diǎn)對其 bottom = y - mTextLineMargin; } else { bottom = y + bitmapH + mTextLineMargin + textHeight; } canvas.drawText(text, x - textWidth / 2, bottom, mTextPaint); }
6、對觸摸事件進(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)聽。
private OnItemStepTouchListener mOnItemStepTouchListener; public void setOnItemStepTouchListener(OnItemStepTouchListener onItemStepTouchListener) { mOnItemStepTouchListener = onItemStepTouchListener; } //每一個step的觸摸監(jiān)聽 public interface OnItemStepTouchListener { void onItemStepTouch(int postion); }
8、設(shè)置當(dāng)前進(jìn)度所在位置,也可在layout文件中通過current_step屬性進(jìn)行設(shè)置。
//設(shè)置當(dāng)前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ù)組,點(diǎn)擊step時會用到,用于確定點(diǎn)擊的是哪個step }
10、設(shè)置step是否可點(diǎn)擊,不出入默認(rèn)為false不可點(diǎn)擊,也可在layout文件中通過step_is_touch屬性進(jìn)行設(shè)置。
public void setStepIsTouch(boolean stepIsTouch) { mStepIsTouch = stepIsTouch; }
11、設(shè)置文字是否在線上,不傳入默認(rèn)為true在線上,也可在layout文件中通過text_up_line屬性進(jìn)行設(shè)置。
public void setTextUpLine(boolean textUpLine) { mTextUpLine = textUpLine; invalidate(); }
源碼地址:StepViewDemo
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android仿外賣購物車功能
- Android仿百度外賣自定義下拉刷新效果
- Android仿美團(tuán)下拉菜單(商品選購)實(shí)例代碼
- Android仿美團(tuán)分類下拉菜單實(shí)例代碼
- Android編程實(shí)現(xiàn)仿美團(tuán)或淘寶的多級分類菜單效果示例【附demo源碼下載】
- Android仿美團(tuán)淘寶實(shí)現(xiàn)多級下拉列表菜單功能
- Android模仿美團(tuán)頂部的滑動菜單實(shí)例代碼
- 模仿美團(tuán)點(diǎn)評的Android應(yīng)用中價格和購買欄懸浮固定的效果
- Android使用RecyclerView仿美團(tuán)分類界面
- Android仿美團(tuán)外賣菜單界面
相關(guān)文章
android事件分發(fā)機(jī)制的實(shí)現(xiàn)原理
本篇文章主要介紹了android事件分發(fā)機(jī)制的實(shí)現(xiàn)原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09詳解Android權(quán)限管理之Android 6.0運(yùn)行時權(quán)限及解決辦法
本篇文章主要介紹Android權(quán)限管理之Android 6.0運(yùn)行時權(quán)限及解決辦法,具有一定的參考價值,有興趣的可以了解一下。2016-11-11Android編程實(shí)用技術(shù)小結(jié)
這篇文章主要介紹了Android編程實(shí)用技術(shù),實(shí)例匯總了開機(jī)啟動receiver、service使用、AlarmManager發(fā)送廣播及停止AlarmManager等相關(guān)技巧,需要的朋友可以參考下2016-01-01Android創(chuàng)建和使用數(shù)據(jù)庫SQLIte
這篇文章主要為大家詳細(xì)介紹了Android創(chuàng)建和使用數(shù)據(jù)庫SQLIte的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-05-05淺談Android開發(fā)者2017年最值得關(guān)注的25個實(shí)用庫
本篇文章主要介紹了Android開發(fā)者2017年最值得關(guān)注的25個庫,非常具有實(shí)用價值,需要的朋友可以參考下2017-09-09Android長按imageview把圖片保存到本地的實(shí)例代碼
本文通過代碼給大家介紹了Android長按imageview把圖片保存到本地的實(shí)現(xiàn)方法,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-12-12如何在Android中實(shí)現(xiàn)左右滑動的指引效果
本篇文章是對在Android中實(shí)現(xiàn)左右滑動指引效果的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06Android SharedPreferences存儲用法詳解
這篇文章主要為大家詳細(xì)介紹了Android SharedPreferences存儲用法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02自定義Adapter并通過布局泵LayoutInflater抓取layout模板編輯每一個item實(shí)現(xiàn)思路
自定義Adapter并通過布局泵LayoutInflater抓取layout模板編輯每一個item,下面我們開始學(xué)習(xí)這一篇的內(nèi)容,感興趣的朋友可以了解下哈2013-06-06