安卓仿IOS开关设计

Posted zcchange1025

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了安卓仿IOS开关设计相关的知识,希望对你有一定的参考价值。

做安卓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)几大状态,但如何识别出单击事件呢,此处需引入GestureDetectorOnGestrueListener


先来看具体自定义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便不做处理。

每个回调函数处理完后,需调用invalidateview进行重绘。

 

下面贴出使用该ToggleButtonActivity代码及对应布局。

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接口声明

package com.example.togglebutton.view.interf;

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


最终附上源码附件:目前不知为何上传不了资源

 

 

 

以上是关于安卓仿IOS开关设计的主要内容,如果未能解决你的问题,请参考以下文章

Css仿ios的开关按钮

iOS仿安卓手势解锁

仿25ge封装的APP封装源码-可以封装安卓和IOS

仿苹果系统应用的apk

ios和安卓的动画原理是啥

Demo