안 드 로 이 드 사용자 정의 StepView 모방 배달 진도

본 논문 의 사례 는 안 드 로 이 드 사용자 정의 StepView 배 송 진도 전시 의 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과 도

쓰다
layot 파일 에서 다음 속성 을 설정 할 수 있 습 니 다.

<?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"/><!--       --> 
 <attr name="step_count" format="integer"/><!-- step --> 
 <attr name="current_step" format="integer"/><!--  step  --> 
 <attr name="normal_step_iv" format="reference"/><!--    --> 
 <attr name="passed_step_iv" format="reference"/><!--      --> 
 <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);//           
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.구조 함수 에서 문자,선,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，   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   
 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  ，FALSE   ，   FALSE 
 mStepIsTouch = typedArray.getBoolean(R.styleable.StepView_step_is_touch, false); 
 //  xml   text     ，TRUE   ，FALSE    ，   FALSE 
 mTextUpLine = typedArray.getBoolean(R.styleable.StepView_text_up_line, true); 
 mTextPaint.setTextSize(textSize); 
 mLinePaint.setStrokeWidth(lineSize); 
 mNormalBitmap = normalDrawable.getBitmap();// xml             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        ，  step    ，          step 
 typedArray.recycle(); 
} 

2.onMeasure 에서 StepView 의 너비 와 높이 를 설정 하고 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               step 
 drawStep(canvas); 
 } 
} 

4.선 을 긋 고 앞 선의 stopX 좌 표 는 다음 선의 startX 좌표 이 며 현재 step 가 있 는 위치 에 따라 lineColor 를 설정 합 니 다.

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) {//        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 의 터치 감청.

private OnItemStepTouchListener mOnItemStepTouchListener; 
 
public void setOnItemStepTouchListener(OnItemStepTouchListener onItemStepTouchListener) { 
 mOnItemStepTouchListener = onItemStepTouchListener; 
} 
 
//   step      
public interface OnItemStepTouchListener { 
 void onItemStepTouch(int postion); 
} 

8.현재 진도 가 있 는 위 치 를 설정 하고 layot 파일 에서 current 를 통과 할 수 있 습 니 다.step 속성 을 설정 합 니 다.

//    step 
public void setCurrentStep(int currentStep) { 
 mCurrentStep = currentStep; 
 invalidate(); 
} 

9.step 에 대응 하 는 텍스트 를 설정 하고 입력 하지 않 으 면 텍스트 를 표시 하지 않 습 니 다.

//  step   texts 
public void setStepTexts(String[] stepTexts) { 
 mStepTexts = stepTexts; 
 mStepCount = mStepTexts.length; 
 mStepRectFs = new RectF[mStepCount];//   step        ，  step    ，          step 
} 

10.step 를 클릭 할 수 있 는 지 여 부 를 설정 하고 출입 하지 않 습 니 다.기본 값 은 false 이 고 클릭 할 수 없 으 며 layot 파일 에서 step 를 통과 할 수 있 습 니 다.is_touch 속성 을 설정 합 니 다.

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

11.텍스트 가 온라인 인지 여 부 를 설정 하고 기본 값 은 true 온라인 으로 전송 되 지 않 으 며 layot 파일 에서 text 를 통과 할 수 있 습 니 다.up_line 속성 을 설정 합 니 다.

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

원본 주소:StepViewDemo
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.