Android 开发小技巧1： Button 点击区域过小

效果

点击区域太小，用户体验太差

代码如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_24"
        android:layout_marginTop="@dimen/dp_12"
        android:background="@color/colorAccent">

        <ImageButton
            android:layout_width="@dimen/dp_10"
            android:layout_height="@dimen/dp_18"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/dp_15"
            android:background="@drawable/mine_back_white_arraw" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="xxxx"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_17" />


        <ImageButton
            android:layout_width="@dimen/dp_18"
            android:layout_height="@dimen/dp_18"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="@dimen/dp_20"
            android:background="@drawable/find_famous_share" />
    </RelativeLayout>


</RelativeLayout>

调整后效果

 

具体代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_44"
        android:background="@color/colorAccent">

        <ImageButton
            android:layout_width="@dimen/dp_30"
            android:layout_height="@dimen/dp_38"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/dp_15"
            android:padding="@dimen/dp_10"
            android:src="@drawable/mine_back_white_arraw" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="xxxx"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_17" />


        <ImageButton
            android:layout_width="@dimen/dp_38"
            android:layout_height="@dimen/dp_38"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="@dimen/dp_20"
            android:padding="@dimen/dp_10"
            android:src="@drawable/find_famous_share" />
    </RelativeLayout>


</RelativeLayout>

 

修改关键

 

1.放大了原来布局背景的高，上下添加了10dp的高度

 android:layout_height="@dimen/dp_44"

           

2.图片宽高同样放大  宽 + 20dp   高 + 20dp

android:layout_width="@dimen/dp_30"
android:layout_height="@dimen/dp_38"

3.ImageButton 添加 padding 10dp，放大点击范围

android:padding="@dimen/dp_10"

4.图片背景，background属性 切换为 scr属性（否则会被拉大，变形）

android:src="@drawable/mine_back_white_arraw" 

5.这样点击区域就比原来的上下左右都大了 10dp

6.关键关键使用 ImageButton