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資訊助手