Android 사용자 정의 컨트롤 눈금 자 컨트롤

오늘 제 가 한 것 은 사용자 정의 눈금 자 컨트롤 입 니 다.프로젝트 수요 에 따라 눈금 자 처럼 미 끄 러 지 는 선택 을 해 야 합 니 다.사용자 정의 컨트롤 에 대한 인식 이 깊 지 않 아서 일주일 이 넘 게 걸 려 서 이 컨트롤 을 정리 하 는 것 도 심혈 을 기울 인 경험 입 니 다.또한 저 는 사용자 정의 컨트롤 에 대해 자신 만 의 인식 을 가지 게 되 었 고 쓸데없는 말 을 하지 않 았 습 니 다.먼저 간단 한 효과 도 를 보 세 요.필요 하면 직접 가 져 가서 사용 할 수 있 습 니 다.
효과 도 는 다음 과 같 습 니 다.제 간단 한 데모 일 뿐 입 니 다.효과 가 좀 추 합 니 다.양해 해 주 십시오!

효과 가 나 왔 습 니 다.다음은 코드 부분 입 니 다.딱 봐 도 일반적인 컨트롤 만 실현 하기 어렵 습 니 다.그래서 저 는 사용자 정의 View 여행 을 시 작 했 습 니 다.사용자 정의 가 끝 날 때마다 많은 것 을 얻 습 니 다.다음은 제 코드 입 니 다.

package android.tst.com.myapplication;
 
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.text.Layout;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.widget.Scroller;
 
/**
 *      。       ，        ，          。<br>
 *            widget          <br>
 * @version create：2014 8 26 
 */
@SuppressLint("ClickableViewAccessibility")
public class RulerView extends View {
 
 public interface OnValueChangeListener {
 public void onValueChange(float value);
 }
 
 public static final int MOD_TYPE_HALF = 2;
 public static final int MOD_TYPE_ONE = 10;
 private static final int ITEM_HALF_DIVIDER = 10;
 private static final int ITEM_ONE_DIVIDER = 10;
 private static final int ITEM_MAX_HEIGHT = 20;
 private static final int ITEM_MIN_HEIGHT = 10;
 private static final int TEXT_SIZE = 7;
 private float mDensity;
 private int mValue = 50, mMaxValue = 100, mModType = MOD_TYPE_HALF,
 mLineDivider = ITEM_HALF_DIVIDER;
 // private int mValue = 50, mMaxValue = 500, mModType = MOD_TYPE_ONE,
 // mLineDivider = ITEM_ONE_DIVIDER;
 
 private int mLastX, mMove;
 private int mWidth, mHeight;
 
 private int mMinVelocity;
 private Scroller mScroller;
 private VelocityTracker mVelocityTracker;
 
 private OnValueChangeListener mListener;
 
 @SuppressWarnings("deprecation")
 public RulerView(Context context, AttributeSet attrs) {
 super(context, attrs);
 
 mScroller = new Scroller(getContext());
 mDensity = getContext().getResources().getDisplayMetrics().density;
 mMinVelocity = ViewConfiguration.get(getContext())
 .getScaledMinimumFlingVelocity();
 }
 
 /**
 * 
 *      ，      ，                 
 * 
 * @param value
 *     
 * @param maxValue
 *     
 * @param model
 *       ：<br>
 *  {@link MOD_TYPE_HALF}<br>
 *  {@link MOD_TYPE_ONE}<br>
 */
 public void initViewParam(int defaultValue, int maxValue, int model) {
 switch (model) {
 case MOD_TYPE_HALF:
 mModType = MOD_TYPE_HALF;
 mLineDivider = ITEM_HALF_DIVIDER;
 mValue = defaultValue * 2;
 mMaxValue = maxValue * 2;
 break;
 case MOD_TYPE_ONE:
 mModType = MOD_TYPE_ONE;
 mLineDivider = ITEM_ONE_DIVIDER;
 mValue = defaultValue;
 mMaxValue = maxValue;
 break;
 
 default:
 break;
 }
 invalidate();
 
 mLastX = 0;
 mMove = 0;
 notifyValueChange();
 }
 
 /**
 *             
 * 
 * @param listener
 */
 public void setValueChangeListener(OnValueChangeListener listener) {
 mListener = listener;
 }
 
 /**
 *        
 * 
 * @return
 */
 public float getValue() {
 return mValue;
 }
 public void setValue(int value){
 mValue = value;
 notifyValueChange();
 postInvalidate();
 }
 public void setValueToChange(int what) {
 mValue += what;
 notifyValueChange();
 postInvalidate();
 }
 
 @Override
 protected void onLayout(boolean changed, int left, int top, int right,
 int bottom) {
 mWidth = getWidth();
 mHeight = getHeight();
 super.onLayout(changed, left, top, right, bottom);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 drawScaleLine(canvas);
 // drawWheel(canvas);
 drawMiddleLine(canvas);
 }
 
 /**
 *             
 * 
 * @param canvas
 */
 private void drawScaleLine(Canvas canvas) {
 canvas.save();
 Paint linePaint = new Paint();
 linePaint.setStrokeWidth(2);
 linePaint.setColor(Color.rgb(141, 189, 225));
 
 TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
 textPaint.setColor(Color.rgb(68, 135, 188));
 textPaint.setTextSize(TEXT_SIZE * mDensity);
 
 int width = mWidth, drawCount = 0;
 float xPosition = 0, textWidth = Layout.getDesiredWidth("0", textPaint);
 
 for (int i = 0; drawCount <= 4 * width; i++) {
 int numSize = String.valueOf(mValue + i).length();
 //  
 xPosition = (width / 2 - mMove) + i * mLineDivider * mDensity;
 if (xPosition + getPaddingRight() < mWidth) {
 if ((mValue + i) % mModType == 0) {
 linePaint.setColor(Color.rgb(68, 135, 188));
 canvas.drawLine(xPosition, getPaddingTop(), xPosition,
 mDensity * ITEM_MAX_HEIGHT, linePaint);
 
 if (mValue + i <= mMaxValue) {
 switch (mModType) {
 case MOD_TYPE_HALF:
 canvas.drawText(
  String.valueOf((mValue + i) / 2),
  countLeftStart(mValue + i, xPosition,
  textWidth),
  getHeight() - textWidth, textPaint);
 break;
 case MOD_TYPE_ONE:
 canvas.drawText(String.valueOf(mValue + i),
  xPosition - (textWidth * numSize / 2),
  getHeight() - textWidth, textPaint);
 break;
 default:
 break;
 }
 }
 } else {
 linePaint.setColor(Color.rgb(141, 189, 225));
 // linePaint.setColor(Color.rgb(68, 135, 188));
 canvas.drawLine(xPosition, getPaddingTop(), xPosition,
 mDensity * ITEM_MIN_HEIGHT, linePaint);
 }
 }
 //  
 xPosition = (width / 2 - mMove) - i * mLineDivider * mDensity;
 if (xPosition > getPaddingLeft()) {
 if ((mValue - i) % mModType == 0) {
 linePaint.setColor(Color.rgb(68, 135, 188));
 canvas.drawLine(xPosition, getPaddingTop(), xPosition,
 mDensity * ITEM_MAX_HEIGHT, linePaint);
 
 if (mValue - i >= 0) {
 switch (mModType) {
 case MOD_TYPE_HALF:
 canvas.drawText(
  String.valueOf((mValue - i) / 2),
  countLeftStart(mValue - i, xPosition,
  textWidth),
  getHeight() - textWidth, textPaint);
 break;
 case MOD_TYPE_ONE:
 canvas.drawText(String.valueOf(mValue - i),
  xPosition - (textWidth * numSize / 2),
  getHeight() - textWidth, textPaint);
 break;
 
 default:
 break;
 }
 }
 } else {
 linePaint.setColor(Color.rgb(141, 189, 225));
 canvas.drawLine(xPosition, getPaddingTop(), xPosition,
 mDensity * ITEM_MIN_HEIGHT, linePaint);
 }
 }
 
 drawCount += 2 * mLineDivider * mDensity;
 }
 
 canvas.restore();
 }
 
 /**
 *                
 * 
 * @param value
 * @param xPosition
 * @param textWidth
 * @return
 */
 private float countLeftStart(int value, float xPosition, float textWidth) {
 float xp = 0f;
 if (value < 20) {
 xp = xPosition - (textWidth * 1 / 2);
 } else {
 xp = xPosition - (textWidth * 2 / 2);
 }
 return xp;
 }
 
 /**
 *          、   。                
 * 
 * @param canvas
 */
 private void drawMiddleLine(Canvas canvas) {
 // TOOD     ，    ，         ，        
 int gap = 12, indexWidth = 2, indexTitleWidth = 24, indexTitleHight = 10, shadow = 6;
 String color = "#66999999";
 
 canvas.save();
 
 Paint redPaint = new Paint();
 redPaint.setStrokeWidth(indexWidth);
 redPaint.setColor(Color.RED);
 canvas.drawLine(mWidth / 2, 0, mWidth / 2, mHeight, redPaint);
 
 canvas.restore();
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent event) {
 int action = event.getAction();
 int xPosition = (int) event.getX();
 
 if (mVelocityTracker == null) {
 mVelocityTracker = VelocityTracker.obtain();
 }
 mVelocityTracker.addMovement(event);
 
 switch (action) {
 case MotionEvent.ACTION_DOWN:
 
 mScroller.forceFinished(true);
 
 mLastX = xPosition;
 mMove = 0;
 break;
 case MotionEvent.ACTION_MOVE:
 getParent().requestDisallowInterceptTouchEvent(true);
 mMove += (mLastX - xPosition);
 changeMoveAndValue();
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_CANCEL:
 countMoveEnd();
 countVelocityTracker(event);
 getParent().requestDisallowInterceptTouchEvent(false);
 return false;
 // break;
 default:
 break;
 }
 
 mLastX = xPosition;
 return true;
 }
 
 private void countVelocityTracker(MotionEvent event) {
 mVelocityTracker.computeCurrentVelocity(1000);
 float xVelocity = mVelocityTracker.getXVelocity();
 if (Math.abs(xVelocity) > mMinVelocity) {
 mScroller.fling(0, 0, (int) xVelocity, 0, Integer.MIN_VALUE,
 Integer.MAX_VALUE, 0, 0);
 }
 }
 
 private void changeMoveAndValue() {
 int tValue = (int) (mMove / (mLineDivider * mDensity));
 if (Math.abs(tValue) > 0) {
 mValue += tValue;
 mMove -= tValue * mLineDivider * mDensity;
 if (mValue <= 0 || mValue > mMaxValue) {
 mValue = mValue <= 0 ? 0 : mMaxValue;
 mMove = 0;
 mScroller.forceFinished(true);
 }
 notifyValueChange();
 }
 postInvalidate();
 }
 
 private void countMoveEnd() {
 int roundMove = Math.round(mMove / (mLineDivider * mDensity));
 mValue = mValue + roundMove;
 mValue = mValue <= 0 ? 0 : mValue;
 mValue = mValue > mMaxValue ? mMaxValue : mValue;
 
 mLastX = 0;
 mMove = 0;
 
 notifyValueChange();
 postInvalidate();
 }
 
 private void notifyValueChange() {
 if (null != mListener) {
 if (mModType == MOD_TYPE_ONE) {
 mListener.onValueChange(mValue);
 }
 if (mModType == MOD_TYPE_HALF) {
 mListener.onValueChange(mValue / 2f);
 }
 }
 }
 
 @Override
 public void computeScroll() {
 super.computeScroll();
 if (mScroller.computeScrollOffset()) {
 if (mScroller.getCurrX() == mScroller.getFinalX()) { // over
 countMoveEnd();
 } else {
 int xPosition = mScroller.getCurrX();
 mMove += (mLastX - xPosition);
 changeMoveAndValue();
 mLastX = xPosition;
 }
 }
 }
 
 @Override
 public boolean dispatchTouchEvent(MotionEvent event) {
 getParent().requestDisallowInterceptTouchEvent(true);
 return super.dispatchTouchEvent(event);
 }
}

이것 은 제 사용자 정의 View 부분의 코드 입 니 다.다음은 레이아웃 에서 사 용 됩 니 다.

<TextView
 android:id="@+id/tv_values"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:padding="10dp"
 android:gravity="center"
 android:textColor="@android:color/holo_red_dark"/>
 <android.tst.com.myapplication.RulerView
 android:id="@+id/rv_view"
 android:layout_width="match_parent"
 android:layout_height="60dp"/>
 
<LinearLayout
 android:layout_width="match_parent"
 android:orientation="horizontal"
 android:layout_height="wrap_content">
 
 <Button
 android:id="@+id/btn_jia"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:text="+"
 android:textSize="25sp"
 android:gravity="center"
 android:layout_marginRight="15dp"
 android:layout_weight="1"/>
 <Button
 android:id="@+id/btn_jian"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:text="-"
 android:layout_marginLeft="15dp"
 android:textSize="25sp"
 android:gravity="center"
 android:layout_weight="1"/>
</LinearLayout>

위 와 같이 효과 도 에 따라 저 는 TextView 를 표시 해 야 합 니 다.그리고 제 사용자 정의 눈금 자 컨트롤 입 니 다.다음은 두 개의 Button 컨트롤 추가 입 니 다.
이제 액 티 비 티 에서 의 사용 입 니 다.
먼저 TextView 의 값 을 업데이트 하려 면 Handler 가 필요 합 니 다.

Handler handler = new Handler() {
 @Override
 public void handleMessage(Message msg) {
  tv_values.setText(rv_view.getValue() + "Kg");
 };
 };

그 다음은 관련 작업 을 초기 화 하 는 것 입 니 다.

private void deployRulerView(){
 rv_view= (RulerView) findViewById(R.id.rv_view);
 btn_jia= (Button) findViewById(R.id.btn_jia);
 btn_jian= (Button) findViewById(R.id.btn_jian);
 tv_values= (TextView) findViewById(R.id.tv_values);
 //  RulerView    
 rv_view.setValue(60);
 //        
 rv_view.initViewParam(60, 200, RulerView.MOD_TYPE_ONE);
 rv_view.setValueChangeListener(new RulerView.OnValueChangeListener() {
  @Override
  public void onValueChange(float value) {
  handler.sendMessage(new Message());
  }
 });
 tv_values.setText(60+"KG");
 //           
 btn_jia.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  rv_view.setValueToChange(1);
  }
 });
 btn_jian.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  rv_view.setValueToChange(-1);
  }
 });
 }

여기까지 의 모든 과정 이 완성 되 었 습 니 다.좋 지 않 은 곳 에서 마음껏 토로 하면 전체 과정 에서 가장 복잡 한 것 은 사용자 정의 에서 그 리 는 과정 입 니 다.그러나 모든 문 제 는 마음 을 가 라 앉 히 고 잘 이 루어 질 때 모든 문 제 는 존재 하지 않 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.