美文网首页
简单自定义滑动控件

简单自定义滑动控件

作者: L明明 | 来源:发表于2017-06-02 12:45 被阅读0次

    先上个效果图

    1.控件主代码

    public class SlideView extends View {
    
        private float width = -1;
        private float height = -1;
        private Paint bluePaint = null;
        private Paint whitePaint = null;
        private Paint textPaint = null;
        private float strokeWidth = 3;
        private float contentBoundary = 10;
        private float btnRadius = -1;
        private float currentX = -1;
        private float minX = -1;
        private float maxX = -1;
    
        private boolean clicked = false;
        private OnSlideListener listener;
    
    
        public SlideView(Context context) {
            this(context, null);
        }
    
        public SlideView(Context context, AttributeSet attrs) {
            this(context, attrs, -1);
        }
    
        public SlideView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            bluePaint = new Paint();
            bluePaint.setAntiAlias(true);
            bluePaint.setColor(Color.parseColor("#099CE9"));
            whitePaint = new Paint();
            whitePaint.setAntiAlias(true);
            whitePaint.setColor(Color.parseColor("#FFFFFF"));
            textPaint = new Paint();
            textPaint.setColor(Color.parseColor("#909090"));
            textPaint.setTextSize(26);
            textPaint.setTextAlign(Paint.Align.CENTER);
    
        }
    
        public void setOnSlideListener(OnSlideListener listener) {
            this.listener = listener;
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            //根据控件的宽高设置内部数值
            if (width != getMeasuredWidth() || height != getMeasuredHeight()) {
                width = getMeasuredWidth();
                height = getMeasuredHeight();
                btnRadius = (height - (contentBoundary * 2)) / 2;
                minX = contentBoundary + btnRadius;
                maxX = width - contentBoundary - btnRadius;
                currentX = minX;
                invalidate();
            }
        }
    
        /**
         * 恢复到原始状态
         */
        public void reset() {
            currentX = minX;
            invalidate();
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            getParent().requestDisallowInterceptTouchEvent(true);
            float x = event.getX();
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    if (x >= currentX - btnRadius && x <= currentX + btnRadius) {
                        clicked = true;
                    }
    
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (!clicked) {
                        return true;
                    }
                    if (x < minX) {
                        currentX = minX;
                    } else if (x > maxX) {
                        currentX = maxX;
                    } else {
                        currentX = x;
                    }
                    invalidate();
                    break;
                case MotionEvent.ACTION_UP:
                    clicked = false;
                    if (listener != null) {
                        if (currentX < maxX) {
                            listener.onCancel(this);
                        } else {
                            listener.onComplete(this);
                        }
                    }
                    currentX = minX;
                    invalidate();
                    break;
            }
            return true;
        }
    
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if (width == -1 || height == -1) {
                return;
            }
            canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
                    | Paint.FILTER_BITMAP_FLAG));
            drawRounRect(canvas, 0, 0, width, height, bluePaint);
            drawRounRect(canvas, strokeWidth, strokeWidth, width - strokeWidth, height - strokeWidth, whitePaint);
            drawRounRect(canvas, contentBoundary, contentBoundary, currentX + btnRadius, height - contentBoundary, bluePaint);
    
        }
    
        /**
         * 画半圆的矩形
         */
        private void drawRounRect(Canvas canvas, float l, float t, float r, float b, Paint paint) {
            float h2 = (b - t) / 2;
            canvas.drawCircle(l + h2, t + h2, h2, paint);
            canvas.drawCircle(r - h2, t + h2, h2, paint);
            canvas.drawRect(l + h2, t, r - h2, b, paint);
        }
    
    }
    

    2.监听类代码

    public interface OnSlideListener {
        void onComplete(View v);
    
        void onCancel(View v);
    }
    
    

    3.在布局文件中调用控件

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.sandu.mavenproject.widget.SlideView
            android:id="@+id/slide_view"
            android:layout_width="match_parent"
            android:layout_height="@dimen/px100dp"
            android:layout_marginLeft="@dimen/px30dp"
            android:layout_marginRight="@dimen/px30dp"
            android:layout_marginTop="@dimen/px20dp" />
    
    </RelativeLayout>
    

    4.在activity中设置回调

       SlideView slideView = (SlideView) findViewById(R.id.slide_view);
            slideView.setOnSlideListener(new OnSlideListener() {
                @Override
                public void onComplete(View v) {
                    Toast.makeText(MainActivity.this, "滑动成功", Toast.LENGTH_SHORT).show();
                }
    
                @Override
                public void onCancel(View v) {
                    Toast.makeText(MainActivity.this, "滑动取消", Toast.LENGTH_SHORT).show();
                }
            });
    

    补充一下
    为了解决控件的横向滑动与纵向滑动的冲突,添加了下面代码

      getParent().requestDisallowInterceptTouchEvent(true);
    

    相关文章

      网友评论

          本文标题:简单自定义滑动控件

          本文链接:https://www.haomeiwen.com/subject/xaxufxtx.html