Android学习之 扩大控件点击触摸区域及TouchDelegate的介绍
一、背景：在项目中，有时会遇到一类尴尬的问题：比如在UI上有一个图标按钮 但是按钮显示有点小 往往用户可能要点击2、3次才能点击到触发按钮点击事件。这样便给用户带来了困扰。现在小吕自我学习与分享一下如何解决这一尴尬问题。
基本解决思路就是：扩大控件的点击触摸区域。
这里 主要会用到TouchDelegate这个类，这个类代表的就是一个触摸区域。需要对该类进一步了解的可以查看官方API。
二、下面主要通过一个代码demo来展示如何扩大一个控件的点击触摸区域：
1、首先贴出一个demo的运行效果图：
2、 上面UI布局很简单，就一个文本TextView和ImageButton，布局文件main.xml代码如下：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<LinearLayout android:id="@+id/ll_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="8"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:textSize="14dp"
android:text="@string/msg" />
<ImageButton android:id="@+id/ibtn_help"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="18dp"
android:background="@null"
android:contentDescription="@null"
android:src="@drawable/icon_i"/>
</LinearLayout>
</RelativeLayout>
3、处理扩大控件触摸区域的Activity类：MainActivity.java
package com.ice.touchdelegate;
import android.app.Activity;
import android.graphics.Rect;
import android.os.Bundle;
import android.util.Log;
import android.view.TouchDelegate;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.Toast;
public class MainActivity extends Activity {
private static final String TAG = "MainActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
View parent = findViewById(R.id.ll_parent);
final ImageButton btn_help = (ImageButton)findViewById(R.id.ibtn_help);
parent.post(new Runnable() {
@Override
public void run() {
Log.d(TAG, "Runable invoke");
// 构造一个 "矩型" 对象
Rect delegateArea = new Rect();
ImageButton delegate = btn_help;
// Hit rectangle in parent's coordinates
delegate.getHitRect(delegateArea);
Log.d(TAG, "——————————原始触摸矩阵区域————————");
Log.d(TAG, "width: "+delegateArea.width()+" | height: "+delegateArea.height());
Log.d(TAG, "left: "+delegateArea.left + " | Top: "+delegateArea.top +
" | right: "+delegateArea.right+" | bottom: "+delegateArea.bottom);
// 扩大触摸区域矩阵值
delegateArea.left -= 500;
delegateArea.top -= 500;
delegateArea.right += 500;
delegateArea.bottom += 500;
Log.d(TAG, "——————————扩大触摸区域后 矩阵区域————————");
Log.d(TAG, "width: "+delegateArea.width()+" | height: "+delegateArea.height());
Log.d(TAG, "left: "+delegateArea.left + " | Top: "+delegateArea.top +
" | right: "+delegateArea.right+" | bottom: "+delegateArea.bottom);
/**
* 构造扩大后的触摸区域对象
* 第一个构造参数表示 矩形面积
* 第二个构造参数表示 被扩大的触摸视图对象
* <也是本demo最核心用到的类之一>
*/
TouchDelegate expandedArea = new TouchDelegate(delegateArea, delegate);
if(View.class.isInstance(delegate.getParent())){
// 设置视图扩大后的触摸区域
((View)delegate.getParent()).setTouchDelegate(expandedArea);
}
}
});
btn_help.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
Toast.makeText(MainActivity.this, "哈哈 被你点到啦", Toast.LENGTH_LONG).show();
}
});
}
}
4、测试效果
要更好的体验到控件的触摸区域是否发生改变，可以修改MainActivity.java类中的扩大触摸区域矩阵值：
本demo扩大了500个单位。你可以根据自己情况扩大1000或更大，反复修改触摸区域扩展值 运行程序，点击 触发比较。 后台log日志如下图：
PS：小吕会尽量地在关键代码处添加注释 以便更好的理解，小吕会在不断的学习中完善自身。
-------------- 希望能与大家一起学习、交流。
欢迎大家扫一扫、关注我的微信公众号： Ice资讯助手
