使用TouchDelegate扩展按键的点击区域

项目中会有各种各样的button和imageView 但是 如果你的点击不灵敏 用户体验无疑是很差的

为了增强用户体验 我们需要写一个自定义的button或者imageButton用户增强点击区域 

       这里用到了TouchDelegate 谷歌官方文档中描述

Helper class to handle situations where you want a view to have a larger touch area than its actual view bounds. The view whose touch area is changed is called the delegate view. This class should be used by an ancestor of the delegate. To use a TouchDelegate, first create an instance that specifies the bounds that should be mapped to the delegate and the delegate view itself. 

简单说就是帮助类---帮助我们增大点击区域 被改变的点击区域叫做delegateview 用TouchDelegate 要创建被点击的view和其映射

我认为实际上这个东西也是一个view 不过这个view 它映射着你想要增大点击区域的那个view 而这个view是看不到的 但是点击区域是真实存在的

这里可能有点乱 我画一张图 说明下

来看一下 它的常量 我们查文档

其实这个非常好理解 如果你不查文档大概也能想象的到 一个view 它的范围无非是上 下 左 右 这么几个 

如果 我们要增加或者缩小一个按钮的点击范围 （可能有人说 还要缩小么 这个 如果在进行精确操作的时候 肯定会用到 ）的时候 我们就可以进行范围的增大或者缩小了

下面 我们来建立一个工程

IbDemo

在这个demo里 我们就一放两个按钮 一个大的 一个小的

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 
    android:background="@drawable/bg"
    >

    <ImageButton
        android:id="@+id/ib_small"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/one"
        />
    <ImageButton
        android:id="@+id/ib_big"
        android:layout_below="@id/ib_small"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/two"
        />

</RelativeLayout>

代码已经简单的不能再简单 这里imageView会报警告线 原因是因为没有加上内容描述 谷歌是推荐开发者在使用按钮或者imageVIew的时候 最好加上内容描述的 

我们只需在每个imageButton上面加上  android:contentDescription="@null" 即可 后面的@null 你也可以改成你想要的内容描述 

下面 我们实现两个按钮的监听 

package com.akira.ibdemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {

    private ImageButton small;
	private ImageButton big;


	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }


    private void initView() {
		small = (ImageButton) findViewById(R.id.ib_small);
		big = (ImageButton) findViewById(R.id.ib_big);
		small.setOnClickListener(this);
		big.setOnClickListener(this);
	}


	@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }


	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.ib_small:
			int sWidth = small.getWidth();
			int sHeight = small.getHeight();
			int as = sHeight*sWidth;
			Toast.makeText(this, as+"", Toast.LENGTH_LONG).show();
			break;
		
		case R.id.ib_big:
			int bWidth = big.getWidth();
			int bHeight = big.getHeight();
			int bs = bHeight*bWidth;
			Toast.makeText(this, bs+"", Toast.LENGTH_LONG).show();
			break;
			default:
			break;
		}
		
	}
    
}

这里 就吐司一下两个的宽高之乘 注意： 这里算出的是px 

运行发现 one比two小 这个是肯定的 

但是 如果将imageButton放到布局之外 就会出现同样的数字 这个有兴趣的可以自己试试 

思路很简单 得到父view的实例 调用addView方法去加载两个按钮 然后去布局 这个时候你就会发现不同的效果

下面 我们想让one 也能达到同样的效果