Android自訂View實現拖動選擇按鈕_Android

本文為大家分享了Android實現拖動選擇按鈕的具體代碼，供大家參考，具體內容如下

效果圖

View代碼

第一步：自訂屬性

 <declare-styleable name="DragView">  <attr name="icon_drag" format="reference"/>  <attr name="color_circle" format="color"/>  <attr name="dot_num" format="integer"/> </declare-styleable>

第二步：自訂圓形

public class CircleView extends View { /**  * 預設顏色  */ private final int DEFAULT_COLOR = Color.LTGRAY; /**  * 預設半徑dp  */ private final float DEFAULT_RADIUS = 32; private int mColor; private Paint mCirclePaint; private float mRadius; private float mCenterX; private float mCenterY; public CircleView(Context context) {  this(context, null); } public CircleView(Context context, AttributeSet attrs) {  this(context, attrs, 0); } public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DragView);  mColor = array.getColor(R.styleable.DragView_color_circle,DEFAULT_COLOR);  mCirclePaint = new Paint();  mCirclePaint.setColor(mColor);  mCenterY = mCenterX = mRadius = getMeasuredWidth() == 0?DEFAULT_RADIUS:getMeasuredWidth()/2;  array.recycle(); } public float getRadius(){  return mRadius; } public int getColor() {  return mColor; } @Override protected void onDraw(Canvas canvas) {  canvas.drawCircle(mCenterX,mCenterY,mRadius,mCirclePaint); }}

第三步：自訂拖動按鈕

public class DragView extends RelativeLayout implements View.OnTouchListener { private Drawable mDragIcon;//拖動表徵圖 private ImageView mDragView;//拖動表徵圖ImageView private int mCircleColor;//圓的顏色 private Context mContext;//上下文 private int mDotNum;//節點數量 private int mWidth;//組件的寬度 private int mHight;//組件的高度 private int mCircleRadius;//園的半徑 private int mDragWidth;//拖動表徵圖的寬度 private int mLineWidth,mLineHeight;//中間線的長寬 private float mStartX;//開始拖動的螢幕座標 private float mCurX;//開始拖動的觸點座標 private float mMinX;//拖動範圍的最小值 private float mMaxX;//拖動範圍的最大值 private OnNodeSelect mOnNodeSelect;//回調介面 public DragView(Context context) {  this(context,null); } public DragView(Context context, AttributeSet attrs) {  this(context, attrs,0); } public DragView(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.DragView);  mDragIcon=array.getDrawable(R.styleable.DragView_icon_drag);  mCircleColor=array.getColor(R.styleable.DragView_color_circle,Color.WHITE);  mDotNum=array.getInt(R.styleable.DragView_dot_num,2);  array.recycle();  mContext=context;  initView(); } /**  *視圖初始化，這個方法的作用是把所有的視圖添加進來，並做一些初始化的配置  * 其實可以用LayoutInflater把xml的布局檔案載入進來，這樣比較簡便  */ public void initView(){  for (int i=0;i<mDotNum;i++){   CircleView circleView=new CircleView(mContext);   circleView.setOnTouchListener(this);   addView(circleView);  }  View view=new View(mContext);  view.setBackgroundColor(mCircleColor);  addView(view);  // TODO: 2016/4/21 top not right  mDragView=new ImageView(mContext);  mDragView.setImageDrawable(mDragIcon);  mDragView.setOnTouchListener(this);  addView(mDragView); } /**  *這一步主要是為了測量、配置每個view的大小，以便於後面觸摸事件的處理  */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  super.onMeasure(widthMeasureSpec, heightMeasureSpec);  mWidth=getMeasuredWidth();  mHight=getMeasuredHeight();  mCircleRadius=dp2px(mContext,32);  mDragWidth=dp2px(mContext,50);  mLineWidth=mWidth-mDragWidth;  mLineHeight=mCircleRadius/2;  int count=getChildCount();  for (int i=0;i<count;i++){   View view=getChildAt(i);   LinearLayout.LayoutParams params;   if (view instanceof CircleView){    params=new LinearLayout.LayoutParams(mCircleRadius,mCircleRadius);    view.setLayoutParams(params);   }else if (view instanceof ImageView){    params=new LinearLayout.LayoutParams(mDragWidth,mDragWidth);    view.setLayoutParams(params);   }else {    params=new LinearLayout.LayoutParams(mLineWidth,mLineHeight);    view.setLayoutParams(params);   }  } } /**  *這一步主要是為了放置每個view的位置，如果用LayoutInflater載入布局檔案，那這一步就可以省略了  */ @Override protected void onLayout(boolean changed, int l, int t, int r, int b) {//  super.onLayout(changed, l, t, r, b);  if (changed){   int count =getChildCount();   int dLeft=0;   int dTop=mHight/2-mDragWidth/2;   int cLeft=mDragWidth/2-mCircleRadius/2;   int cTop=dTop+mDragWidth/2-mCircleRadius/2;   int lLeft=mDragWidth/2;   int lTop=dTop+mDragWidth/2-mLineHeight/2;   mMinX=dLeft;   mMaxX=dLeft+mLineWidth;   int cIndex=0;   int cSpace=0;   for (int i=0;i<count;i++){    View view=getChildAt(i);    if (view instanceof CircleView){     cLeft=cLeft+cSpace;     view.layout(cLeft,cTop,cLeft+mCircleRadius,cTop+mCircleRadius);     cIndex++;     cSpace=cIndex*mLineWidth;    }else if (view instanceof ImageView){     view.layout(dLeft,dTop,dLeft+mDragWidth,dTop+mDragWidth);    }else {     view.layout(lLeft,lTop,lLeft+mLineWidth,lTop+mLineHeight);    }   }  } } /**  *觸碰事件的處理，這是自訂view比較重要的地方  */ @Override public boolean onTouch(View v, MotionEvent event) {  if (v instanceof ImageView){   switch (event.getAction()) {    case MotionEvent.ACTION_DOWN:     mStartX = (int) event.getRawX();     mCurX = v.getTranslationX();//擷取view的位移量     v.setPressed(true);     break;    case MotionEvent.ACTION_MOVE:     float x = mCurX + event.getRawX() - mStartX;     if (x >= 0 && x <= mMaxX - mMinX) {      v.setTranslationX(mCurX + event.getRawX() - mStartX);     }     break;    case MotionEvent.ACTION_UP:    case MotionEvent.ACTION_CANCEL:     int distance=(int) (event.getRawX()-mStartX);     if (distance>0){      if (Math.abs(distance)>mLineWidth/2){       v.setTranslationX(mCurX + event.getRawX() - mStartX);       setAnim(mLineWidth,1);      }else {       v.setTranslationX(mCurX + event.getRawX() - mStartX);       setAnim(0,0);      }     }else if (distance<0){      if (Math.abs(distance)>mLineWidth/2){       v.setTranslationX(mCurX + event.getRawX() - mStartX);       setAnim(0,0);      }else {       v.setTranslationX(mCurX + event.getRawX() - mStartX);       setAnim(mLineWidth,1);      }     }     break;   }  }else if (v instanceof CircleView){   switch (event.getAction()) {    case MotionEvent.ACTION_UP:     if (event.getRawX()>getDisplayWidth()/2){      setAnim(mLineWidth,1);     }else {      setAnim(0,0);     }     break;   }  }  return true; } //設定平移動畫 private void setAnim(float moveX, final int scrollPosition) {  ObjectAnimator animator = ObjectAnimator.ofFloat(mDragView, "translationX", mDragView.getTranslationX(), moveX);  animator.setDuration(300);  animator.start();  if (mOnNodeSelect != null) {   mOnNodeSelect.onNodeSelect(scrollPosition);  } } public void setNodeSelectListener(OnNodeSelect onNodeSelect) {  mOnNodeSelect = onNodeSelect; } //事件回調介面 public interface OnNodeSelect {  void onNodeSelect(int position); } //dp轉px public int dp2px(Context context, float dpValue) {  final float scale = context.getResources().getDisplayMetrics().density;  return (int) (dpValue * scale + 0.5f); } //擷取螢幕寬度 public int getDisplayWidth(){  DisplayMetrics metrics=new DisplayMetrics();  ((Activity)mContext).getWindowManager().getDefaultDisplay().getMetrics(metrics);  return metrics.widthPixels; }}

使用方法

布局檔案：

 <com.pengkv.apple.weight.DragView  android:id="@+id/view_drag"  android:layout_width="200dp"  app:icon_drag="@drawable/ic_drag"  app:color_circle="#CCCCCC"  app:dot_num="2"  android:layout_height="60dp"/>

頁面代碼：

 dragView=(DragView)view.findViewById(R.id.view_drag); dragView.setNodeSelectListener(new DragView.OnNodeSelect() {  @Override  public void onNodeSelect(int position) {   Toast.makeText(getActivity(),"我選擇了"+position,Toast.LENGTH_SHORT).show();  } });

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。