自定義View-5-拖動選擇按鈕

效果圖

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();
     }
 });