iOS 仿滴滴出行界面UI（1）

Posted 2023-05-16

参考技术A 滴滴出行首页（快车），可以上拉下拉底部菜单（tableView），但又不影响后面地图的交互使用。

找来找去网上没有Demo，就想着自己做。

一开始思路错误，想给tableview加手势和惯性滑动，做来做去总是不完美，而且麻烦。放弃了！

先上GitHub： Demo  （1.2已修改上拉不完全问题：tableview的高度没有设置对）

Demo演示：

滴滴图：

首先你要懂一点 ios 的响应链的东西，当手指触摸到屏幕后，这个触摸事件是怎么派发的。

（1）tableview其实是全屏，设置其contentInset使其下移，并设置背景色为透明。

（2）当手指触碰到屏幕时，其实是触碰在tableview上的；这里要判断手指第一下触碰在屏幕上的坐标，是在透明区域（地图）上还是tableview的不透明区域（cell）上。

（3）当在透明区域时，判断手势操作底层地图；当在tableview的不透明区域上，判断手势操作tableview。

不多说了，直接说做法。

1.创建一个继承UITableView的子类

2. 关键，在UITableView子类重写hitTest:withEvent:方法。

    2.1 关于这个方法的理解，看这里： hitTest:withEvent:方法流程 。（我也理解得不深）

-(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event

    if(point.y<0)

        return nil;

    

    return  [super hitTest:point withEvent:event];



    2.2 方法里的手指触碰点的坐标 point 在我测试过后，发现不是以屏幕左上点为原点的，而是相对于tableview的contentOffset的。这里说不太清楚，可以自己打印着看一下。

    tableview是不断滑动的，所以contentOffset也是不断改变的。

    因此，这里只要判断point的y值是正是负就可以确定手指第一下是触碰在地图上还是tableview上了。

    2.3 point.y<0时，说明手指触碰在地图上，返回nil，让其不会在tableview上触发操作。反之，则正常进行此方法。

3. 在VC的view中加入地图视图，以及UITableView子类的tableview，并设置tableview的contentInset使其下移。

注意：使tableview下移的contentInset和用来判断point.y的contentOffset不要搞混了。

GitHub： Demo  （1.2已修改上拉不完全问题：tableview的高度没有设置对）

参考文档： iOS之事件穿透

                   hitTest:withEvent:方法流程

                   [iOS开发]hitTest的一些使用（点击穿透）

安卓仿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）几大状态，但如何识别出单击事件呢，此处需引入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接口声明

package com.example.togglebutton.view.interf;

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

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