安卓仿IOS开关设计

作者: 骋_listen | 来源:发表于2019-01-02 15:11 被阅读0次

做安卓APP的程序猿们一定有这样的苦衷：UI们所做的原型图均是参照IOS的界面做的，很多IOS自带的组件在安卓系统上则需要开发者们根据现有的API进行自定义描绘。其中开关是APP中设置界面中不可或缺的部分，安卓自带的ToggleButton只支持点击切换状态，虽然可以通过setOnCheckedChangeListener来调整打开和关闭时不同的背景图，但要实现类似于IOS一样既可以通过点击、亦可通过滑动来改变开关的状态，则需要自定义一个ToggleButton来实现这些功能。

设计前先确定该自定义组件的基本属性：

1）需要绘制于画布上的bitmap，包括可滑动的按钮（toggleButton），状态为关闭时的背景（switchCloseBG），状态为开启时的背景（switchOpenBG）。

2）状态发生变化时的监听器，自定义一个接口OnToggleStateChangedListener，状态发生变化时回调该接口的响应。

3）定义好开关的一些状态，包括是否处于滑动中isSliding、当前状态（开关是开还是关）currentState、前一次操作完毕后开关的状态previousState。

4）定义滑块滑动的距离，currentX。

接下来就是设定开关状态变化的触发条件：

1）当我们去拖动滑块至抬手时，滑块若距离背景图片的左边缘更近，则为关闭状态，若距离右边缘更近，则为开启状态，状态变更时背景亦需变化。在滑块随手指滑动过程中，手指若未抬起，滑块随手指的滑动而滑动，并不影响相应状态。

2）当我们去点击整个开关时，滑块将自行切换至相对状态，布局亦发生相应变化。

3）若状态发生变化，需调用OnToggleStateChangedListener接口处理相应函数。

滑动开关的界面变化：

1）设计时，尽量由状态控制界面，包括正在滑动时的状态、单击后状态、抬手后状态等，任何一个动作均需调用invalidate对界面进行重绘。

代码方面，此处自定义view在监听手势变化时，需重写onTouchEvent，但点击事件也会被onTouchEvent事件优先捕获，onTouchEvent函数的入参MotionEvent一般区分手指按下(ACTION_UP)，移动(ACTION_MOVE)及手指抬起（ACTION_UP）几大状态，但如何识别出单击事件呢，此处需引入GestureDetector及OnGestrueListener。

先来看具体自定义View的完整代码。


package com.example.togglebutton.view;
 
import com.example.slidebutton.R;
import com.example.togglebutton.view.interf.OnToggleStateChangeListener;
 
import android.content.Context;
import android.gesture.Gesture;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
 
public class ToggleButton extends View implements OnGestureListener{
 
    /** 滑动开关的背景 */
    private Bitmap toggleButton;
    /** 滑动块关闭时的背景 */
    private Bitmap switchCloseBG;
    /**滑动块打开时的背景**/
    private Bitmap switchOpenBG;
    /** 设置开关的状态，打开/关闭。 默认：关闭 */
    private boolean currentState = false;
    /** 当前滑动块的移动距离 */
    private int currentX;
    /** 记录当前滑动块滑动的状态。默认，false */
    private boolean isSliding = false;
    /**记录滑块之前一次的滑动状态*/
    private boolean prviousState = false;
    /** 开关状态改变监听 */
    private OnToggleStateChangeListener onToggleStateChangeListener;
    
    private GestureDetector gestureDetector;
 
    public ToggleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        gestureDetector = new GestureDetector(context, this);
        initBitmap();
    }
 
    private void initBitmap() {
        toggleButton = BitmapFactory.decodeResource(getResources(), R.drawable.mini_taobao_normal);
        switchCloseBG = BitmapFactory.decodeResource(getResources(), R.drawable.mini_table_off);
        switchOpenBG = BitmapFactory.decodeResource(getResources(), R.drawable.mini_table_on);
    }
    
    
    
    /**
     * 移动效果的处理
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_UP:
            isSliding = false;
            //两者状态初始化为一致
            prviousState = currentState;
            // 判断当前滑动块，偏向于哪一边，如果滑动块的中心点<背景的中心点，设置为关闭状态
            int bgCenter = switchCloseBG.getWidth() / 2;
            //改变后的状态
            boolean state = currentX >= bgCenter;
            // 手指抬起时，回调监听，返回当前的开关状态
            if (state != currentState && onToggleStateChangeListener != null) {
                onToggleStateChangeListener.onToggleStateChange(state);
            }
            currentState = state;
            invalidate();
            break;
        default:
            break;
        }
        return gestureDetector.onTouchEvent(event);
    }
 
    /**
     * 测量当前控件宽高时回调
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 设置开关的宽和高
        setMeasuredDimension(switchCloseBG.getWidth(), switchCloseBG.getHeight());
    }
 
    /**
     * 绘制控件
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1,滑动开关背景绘制到控件，开启和关闭状态有不同的背景
        if(currentState){
        canvas.drawBitmap(switchOpenBG, 0, 0, null);
        }else{
            canvas.drawBitmap(switchCloseBG, 0, 0 , null);
        }
        // 2，绘制滑动块显示的位置，开启或关闭
        if (isSliding) {
            //根据手指距离背景图左边缘的距离，手指的距离为滑块中点的未知，由此算到滑块左边缘距离背景左边缘的距离
            int slideLeft = currentX - toggleButton.getWidth() / 2; 
            if (slideLeft < 0) {
                slideLeft = 0;
            } else if (slideLeft > switchCloseBG.getWidth() - toggleButton.getWidth()) {
                slideLeft = switchCloseBG.getWidth() - toggleButton.getWidth();
            }
            canvas.drawBitmap(toggleButton, slideLeft, 0, null);
        } else {
            if (currentState) {
                // 绘制打开状态
                canvas.drawBitmap(toggleButton, switchCloseBG.getWidth() - toggleButton.getWidth(), 0, null);
            } else {
                // 绘制关闭状态
                canvas.drawBitmap(toggleButton, 0, 0, null);
            }
        }
    }
 
    public void setToggleState(boolean b) {
        currentState = b;
    }
    
    public boolean getToggleState(){
        return currentState;
    }
 
    /**
     * 对外设置监听方法
     * 
     * @param listener
     */
    public void setOnToggleStateChangeListener(OnToggleStateChangeListener listener) {
        this.onToggleStateChangeListener = listener;
    }
 
    @Override
    public boolean onDown(MotionEvent e) {
        currentX = (int) e.getX();
        isSliding = true;
        invalidate();
        return true;
    }
    
 
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY) {
        return false;
    }
 
    @Override
    public void onLongPress(MotionEvent e) {
        
    }
 
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
            float distanceY) {
        currentX = (int) e2.getX();
        invalidate();
        return true;
    }
 
    @Override
    public void onShowPress(MotionEvent e) {
        
    }
 
    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        //为防止与up事件冲突，先判断up时状态是否已经改变
        if(prviousState == currentState){
            isSliding = false;
            currentState = !currentState;
            onToggleStateChangeListener.onToggleStateChange(currentState);
            invalidate();
        }
        return false;
    }
 
}

一般来说，手势的变化动作先交由onTouchEvent处理，再交由GestureDetector处理，OnGestrueListener处理滑动事件时分为快速滑动和普通滑动。

快速滑动依次回调的函数为：onDown->onShowPress->onScroll->onFling，最后抬手时回调onFling

普通滑动依次回调的函数为：onDown->onShowPress->onScroll

单击事件依次回调的函数为：onDown->onShowPress->onSingleTapUp，最后抬手时回调onSingleTapUp

可以看出的是OnGestrueListener没有单独回调OnUp函数，而onFling函数时而回调时而不回调，不好控制，故在OnUp事件便放在onTouchEvent函数自身中执行。这样一来，相当于滑动时回调(没有复写的函数不写在里面)：

onDown->onScroll->onUp

单击时回调：onDown->onUp->onSingleTapUp

故为了防止在单击时，OnUp已经将开关状态变更，增加previousState变量作为currentState的临时变量，若单击时开关状态已变更，onSingleTapUp便不做处理。

每个回调函数处理完后，需调用invalidate对view进行重绘。

下面贴出使用该ToggleButton的Activity代码及对应布局。

package com.example.togglebutton;
 
import com.example.slidebutton.R;
import com.example.togglebutton.view.ToggleButton;
import com.example.togglebutton.view.interf.OnToggleStateChangeListener;
 
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import android.app.Activity;
import android.view.View.OnClickListener;
 
public class MainActivity extends Activity implements OnToggleStateChangeListener {
 
    public ToggleButton toggleButton;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        toggleButton = (ToggleButton) findViewById(R.id.slidebutton);
        toggleButton.setToggleState(true);
        toggleButton.setOnToggleStateChangeListener(this);
        toggleButton.setLongClickable(true);
    }
 
    @Override
    public void onToggleStateChange(boolean currentState) {
        if (currentState) {
            Toast.makeText(MainActivity.this, "开关打开", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(MainActivity.this, "开关关闭", Toast.LENGTH_SHORT).show();
        }
    }
 
}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <com.example.togglebutton.view.ToggleButton
        android:id="@+id/slidebutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
 
</RelativeLayout>

OnToggleStateChangeListener接口声明

ackage com.example.togglebutton.view.interf;
 
/**
 * 开关状态改变监听事件
 * 
 * @author Administrator
 * 
 */
public interface OnToggleStateChangeListener {
    /**
     * 当开关状态改变回调此方法
     * 
     * @param currentState
     *            当前开关的最新状态
     */
    void onToggleStateChange(boolean currentState);
}

安卓仿IOS开关设计

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读