一、背景:在项目中,有时会遇到一类尴尬的问题:比如在UI上有一个图标按钮 但是按钮显示有点小 往往用户可能要点击2、3次才能点击到触发按钮点击事件。这样便给用户带来了困扰。现在小吕自我学习与分享一下如何解决这一尴尬问题。
基本解决思路就是:扩大控件的点击触摸区域。
这里 主要会用到TouchDelegate这个类,这个类代表的就是一个触摸区域。需要对该类进一步了解的可以查看官方API。
二、下面主要通过一个代码demo来展示如何扩大一个控件的点击触摸区域:
1、首先贴出一个demo的运行效果图:
2、 上面UI布局很简单,就一个文本TextView和ImageButton,布局文件main.xml代码如下:
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();
}
});
}
}
要更好的体验到控件的触摸区域是否发生改变,可以修改MainActivity.java类中的扩大触摸区域矩阵值:
本demo扩大了500个单位。你可以根据自己情况扩大1000或更大,反复修改触摸区域扩展值 运行程序,点击 触发比较。 后台log日志如下图:
PS:小吕会尽量地在关键代码处添加注释 以便更好的理解,小吕会在不断的学习中完善自身。
-------------- 希望能与大家一起学习、交流。
欢迎大家扫一扫、关注我的微信公众号: Ice资讯助手