前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[android] 切换按钮-自定义控件-拖动效果

[android] 切换按钮-自定义控件-拖动效果

作者头像
唯一Chat
发布2019-09-10 15:31:27
1.2K0
发布2019-09-10 15:31:27
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

重写View的onTouchEvent()方法,传递进来MotionEvent对象

调用MotionEvent对象的getAction()方法,获取当前动作

switch判断一下当前动作

事件为MotionEvent.ACTION_DOWN是手指第一次触摸屏幕

事件为MotionEvent.ACTION_MOVE是手指在屏幕上移动

事件为MotionEvent.ACTION_UP是手指离开屏幕

当手指触摸到屏幕

定义手指最后的坐标lastX

调用MotionEvent对象的getX() 方法,得到lastX的值

当手指在屏幕上移动

定义手指横向移动的距离dis

调用getX()-lastX就是移动的距离

定义滑动按钮的左边就是这个移动的距离

判断slideBtnLeft位于合理的位置,0到背景图的宽度-滑动按钮的宽度

调用invalidate()方法,刷新视图

onClick事件和onTouchEvent是有冲突

定义一个标志isDrag变量,如果有拖动发生,就把这个变量赋值true

在onCllick()方法里面对这个变量进行判断

当手指抬起的时候

判断当前slideBtnLeft来确定当前按钮是开还是关的状态

slideBtnLeft比较 maxLeft的一半就能判断当前状态

代码语言:javascript
复制
package com.tsh.myswitchbtn;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;

public class MyToggleBtn extends View implements OnClickListener {
    //背景图片
    private Bitmap bitmapBackground;
    //按钮图片
    private Bitmap bitmapBtn;
    private Paint paint;
    /**
     * 布局文件中使用
     * @param context
     * @param attrs
     */
    public MyToggleBtn(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    /**
     * 初始化view
     */
    private void initView() {
        bitmapBackground=BitmapFactory.decodeResource(getResources(), R.drawable.switch_background);
        bitmapBtn=BitmapFactory.decodeResource(getResources(), R.drawable.slide_button);
        paint=new Paint();
        paint.setAntiAlias(true);
        //点击事件
        setOnClickListener(this);
    }
    /**
     * 计算大小
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(bitmapBackground.getWidth(), bitmapBackground.getHeight());
    }
    //当前状态
    private boolean currentState=false;
    //滑动按钮的当前left
    private float slideBtnLeft=0;
    /**
     * 绘制view
     */
    @Override
    protected void onDraw(Canvas canvas) {
        //绘制背景
        canvas.drawBitmap(bitmapBackground, 0, 0, paint);
        //绘制滑动按钮
        canvas.drawBitmap(bitmapBtn, slideBtnLeft, 0, paint);
    }
    private boolean isDrag=false;
    /**
     * 点击事件
     */
    @Override
    public void onClick(View v) {
        //解决与移动事件的冲突
        if(!isDrag){
            currentState = !currentState;
            flushState();
        }

    }

    private int lastX;
    /**
     * 触摸事件
     */
    private int firstX;
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch(event.getAction()){
            //手指按下
            case MotionEvent.ACTION_DOWN:
                firstX=lastX=(int) event.getX();
                isDrag=false;
            break;
            //手指移动
            case MotionEvent.ACTION_MOVE:
                //解决与点击事件冲突
                if(Math.abs(event.getX()-firstX)>5){
                    isDrag=true;
                }
                
                int dis=(int) event.getX()-lastX;
                slideBtnLeft=slideBtnLeft+dis;
                lastX=(int) event.getX();
            break;
            //手指抬起
            case MotionEvent.ACTION_UP:
                if(isDrag){
                    int maxLeft = bitmapBackground.getWidth()
                            - bitmapBtn.getWidth();
                    if (slideBtnLeft >= maxLeft / 2) {
                        currentState = true;
                    } else {
                        currentState = false;
                    }
                    flushState();
                }
            break;
        }
        flushView();
        
        return true;
    }
    /**
     * 刷新状态
     */
    private void flushState() {
        if (currentState == true) {
            slideBtnLeft = bitmapBackground.getWidth()
                    - bitmapBtn.getWidth();
        } else {
            slideBtnLeft = 0;
        }
        invalidate();
    }
    /**
     * 刷新视图
     */
    private void flushView() {
        int maxLeft=bitmapBackground.getWidth()-bitmapBtn.getWidth();
        slideBtnLeft=(slideBtnLeft>0) ? slideBtnLeft : 0;
        slideBtnLeft=(slideBtnLeft<maxLeft) ? slideBtnLeft:maxLeft;
        invalidate();
    }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-05-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档