Làm thế nào để tăng diện tích nhấn của nút Android mà không cần mở rộng nền?

Tôi có một nút có thể kéo tùy chỉnh.

<Button
    android:layout_width="22dip"
    android:layout_height="23dip"
    android:background="@drawable/triangle" />

Có thể vẽ là một hình tam giác với nền trong suốt.

|\
| \
|__\

Tôi thấy nút này khó nhấn. Đầu tiên, nó tương đối nhỏ. Thứ hai, các pixel trong suốt không thể chạm được. Tôi muốn giữ nguyên kích thước có thể vẽ được, nhưng làm cho vùng đánh trúng có kích thước hình vuông gấp đôi kích thước của hình tam giác.

_____________
|            |
|    |\      |
|    | \     |
|    |__\    |
|____________|

bạn có thể sử dụng API TouchDelegate.

final View parent = (View) button.getParent();  // button: the view you want to enlarge hit area
parent.post( new Runnable() {
    public void run() { 
        final Rect rect = new Rect(); 
        button.getHitRect(rect); 
        rect.top -= 100;    // increase top hit area
        rect.left -= 100;   // increase left hit area
        rect.bottom += 100; // increase bottom hit area           
        rect.right += 100;  // increase right hit area
        parent.setTouchDelegate( new TouchDelegate( rect , button)); 
    } 
}); 

Bạn muốn "đệm" Nó sẽ đặt không gian bên trong khung nhìn. Margin sẽ đặt không gian bên ngoài, điều này sẽ không làm tăng diện tích đánh.

 <Button
    android:layout_width="22dip"
    android:layout_height="23dip"
    android:background="@drawable/triangle"
    android:padding="10dp" />

Bạn cần sử dụng a TouchDelegate, được định nghĩa trong tài liệu API là "Lớp người trợ giúp để xử lý các tình huống trong đó bạn muốn một chế độ xem có vùng cảm ứng lớn hơn giới hạn chế độ xem thực tế của nó"

http://developer.android.com/reference/android/view/TouchDelegate.html

Tôi thích giải pháp này hơn:

Chỉ cần thêm một phần đệm tích cực và một phần đệm tiêu cực bên trong tệp tài nguyên bố cục:

<some.View
  ..
  android:padding="12dp"
  android:margin="-12dp"
  .. />

Đây là một thay đổi rất nhỏ so với việc sử dụng TouchDelegates. Tôi cũng không muốn chạy Runnable để thêm vùng có thể nhấp vào bên trong mã Java của mình.

Một điều bạn có thể cân nhắc nếu chế độ xem phải là pixel hoàn hảo: phần đệm không phải lúc nào cũng bằng với lề . Phần đệm phải luôn ở đó chính xác như đã chỉ định. Các lề phụ thuộc vào quan điểm xung quanh và sẽ được bù đắp bằng lợi nhuận giá trị quan điểm khác.

Dựa trên câu trả lời, tôi đã tạo một hàm mở rộng kotlin để trợ giúp việc này.

/**
 * Increase the click area of this view
 */
fun View.increaseHitArea(dp: Float) {
    // increase the hit area
    val increasedArea = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().displayMetrics).toInt()
    val parent = parent as View
    parent.post {
        val rect = Rect()
        getHitRect(rect)
        rect.top -= increasedArea
        rect.left -= increasedArea
        rect.bottom += increasedArea
        rect.right += increasedArea
        parent.touchDelegate = TouchDelegate(rect, this)
    }
}

đơn giản bằng cách thêm phần đệm vào nút

 <Button
android:layout_width="wrap_contant"
android:layout_height="wrap_contant"
android:background="@drawable/triangle"
android:padding="20dp" />

Vì vậy, bằng cách làm điều này .. nút của bạn sẽ lấy chiều cao và chiều rộng của hình ảnh tam giác và sẽ thêm phần đệm 20dp vào nút mà không kéo dài hình ảnh. và nếu bạn muốn một số chiều rộng tối thiểu hoặc một số chiều cao tối thiểu, bạn có thể sử dụng thẻ minWidthvàminHeight

Trong trường hợp bạn đang sử dụng Data Binding. Bạn có thể sử dụng bộ chuyển đổi ràng buộc.

@BindingAdapter("increaseTouch")
fun increaseTouch(view: View, value: Float) {
    val parent = view.parent
    (parent as View).post({
        val rect = Rect()
        view.getHitRect(rect)
        val intValue = value.toInt()
        rect.top -= intValue    // increase top hit area
        rect.left -= intValue   // increase left hit area
        rect.bottom += intValue // increase bottom hit area
        rect.right += intValue  // increase right hit area
        parent.setTouchDelegate(TouchDelegate(rect, view));
    });
}

và sau đó bạn có thể sử dụng thuộc tính trên các chế độ xem như thế này

increaseTouch="@{8dp}"

Tôi không biết chắc bạn muốn nói gì khi nói "mà không tăng nền có thể vẽ được." Nếu bạn muốn nói rằng bạn không muốn bản vẽ của mình bị kéo dài ra thì một tùy chọn bạn có là lấy png nền của bạn và thêm một đường viền pixel trong suốt vào đó. Điều đó sẽ làm tăng khu vực truy cập của bạn nhưng sẽ không kéo dài hình ảnh của bạn.

Tuy nhiên, nếu ý bạn là bạn không muốn thay đổi cái có thể vẽ đó thì tôi nghĩ lựa chọn duy nhất của bạn là sử dụng các giá trị được mã hóa cứng lớn hơn cho chiều cao và chiều rộng.

thử với cái này

  <Button
        android:id="@+id/btn_profile"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:background="@android:color/transparent"
        android:drawableBottom="@drawable/moreoptionicon"
        android:onClick="click"
        android:paddingBottom="15dp"
        android:visibility="visible" />

Xem Tôi có thể tăng nút trên khu vực nhấp chuột theo lập trình không? . Chắc chắn đây là cách dễ nhất đối với tôi. Thậm chí bao gồm một chút về chỉ tạo hoạt ảnh cho đối tượng có thể nhấp thực tế trong khi cho phép nền nhận nhấp chuột. Tôi sẽ sớm áp dụng điều này cho mã của riêng tôi.

Điều này đã làm việc cho tôi:

public void getHitRect(Rect outRect) {
    outRect.set(getLeft(), getTop(), getRight(), getBottom() + 30);
}

Mặc dù thực sự, bạn nên chuyển đổi 30 thành nhúng hoặc làm một phần trăm chiều cao của nút.

Tôi chỉ cần giống nhau: khu vực có thể nhấp lớn hơn hình ảnh của nút. Tôi gói nó vào FrameLayout có kích thước lớn hơn so với nền có thể vẽ được và thay đổi thẻ Nút bên trong thành TextView. Hơn là tôi đã chỉ đạo một trình xử lý nhấp chuột làm việc với FrameLayout này, không phải với TextView bên trong. Tất cả đều hoạt động tốt!

Bạn có thể sử dụng nút trong suốt như thế này ...

<Button
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@android:color/transparent" /> 

bạn có thể tăng hoặc giảm kích thước nút theo yêu cầu của mình và sử dụng enter code hereImageView lên nút ....

<ImageView
    android:layout_width="22dip"
    android:layout_height="23dip"
    android:background="@drawable/triangle" />

Tôi đã tạo hàm cấp cao nhất cho điều này trong kotlin:

fun increaseTouchArea(view: View, increaseBy: Int) {
    val rect = Rect()
    view.getHitRect(rect)
    rect.top -= increaseBy    // increase top hit area
    rect.left -= increaseBy   // increase left hit area
    rect.bottom += increaseBy // increase bottom hit area
    rect.right += increaseBy  // increase right hit area
    view.touchDelegate = TouchDelegate(rect, view)
}

Vì mục đích này, tôi đã sử dụng ImageButton. Trong quá trình bảo vệ xml, bạn sẽ thấy hai thuộc tính sau:

• android: background - Có thể vẽ để sử dụng làm nền.
• android: scr - Đặt một nội dung có thể vẽ được làm nội dung của ImageView này.

Vì vậy, chúng tôi có hai có thể kéo: nền một và nguồn. Trong bạn ví dụ nguồn sẽ là triagle (drawable / trianlge):

|\
| \
|__\

Và nền là hình vuông (có thể vẽ / hình vuông):

_____________
|            |
|            |
|            |
|            |
|____________|

Đây là ví dụ về ImageButton xml:

<ImageButton
   ...
   android:src="@drawable/triangle"
   android:background="@drawable/square">

Kết quả:

_____________
|            |
|    |\      |
|    | \     |
|    |__\    |
|____________|

Cũng có thể vẽ hình vuông, có thể có một số trạng thái khác nhau (được nhấn, tập trung). Và bạn có thể mở rộng kích thước có thể vẽ backgroud bằng cách sử dụng đệm.

Để đề phòng, đây là ví dụ về nền có thể vẽ từ Thanh tác vụ Android Compat:

<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
    <item android:state_focused="true" android:state_enabled="false" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_disabled_holo_dark" />
    <item android:state_focused="true" android:state_enabled="false" android:drawable="@drawable/abc_list_selector_disabled_holo_dark" />
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_background_transition_holo_dark" />
    <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_background_transition_holo_dark" />
    <item android:state_focused="true" android:drawable="@drawable/abc_list_focused_holo" />
    <item android:drawable="@android:color/transparent" />
 </selector>

Bạn có thể đặt phần đệm thành dạng xem tức là nút của bạn.

<Button
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@android:color/transparent"
        android:padding="15dp" />

Hy vọng điều này làm việc cho bạn.

Vì vậy, câu trả lời đúng, thêm phần đệm để vùng có thể chạm trở nên lớn hơn VÀ thay đổi hình ảnh của bạn từ nền thành srcCompact .

<Button
    android:layout_width="22dip"
    android:layout_height="23dip"
    android:padding="6dp"
    app:srcCompat="@drawable/triangle"/>

Để sử dụng app: scrCompat, bạn cần thêm xmlns:app="http://schemas.android.com/apk/res-auto"vào phần tử chính / cha của mình trong xml.

hoàn thành ví dụ:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/height_btn_bottom_touch_area"
android:background="@color/bg_white"
android:clipToPadding="false"
android:elevation="7dp">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stateListAnimator="@animator/selected_raise"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" >

    <ImageView
        android:id="@+id/bottom_button_bg"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:contentDescription=
            "@string/service_request_background_contentDescription"
        android:elevation="1dp"
        android:padding="6dp"
        app:srcCompat="@drawable/btn_round_blue"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" >
    </ImageView>

    <TextView
        android:id="@+id/bottom_button_text"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="1dp"
        android:gravity="center"
        android:text="@string/str_continue_save"
        android:textColor="@color/text_white"
        android:textSize="@dimen/size_text_title"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Chỉ thêm phần đệm đã khiến hộp kiểm của tôi không được căn giữa. Điều sau đây phù hợp với tôi, tuy nhiên tôi đã chỉ định kích thước cố định cho hộp kiểm (theo thông số giao diện người dùng của tôi). Ý tưởng là thêm phần đệm vào bên trái chứ không phải bên phải. Tôi cũng đã thêm phần đệm vào đầu và cuối để làm cho mục tiêu cảm ứng lớn hơn và vẫn giữ hộp kiểm ở giữa.

<CheckBox
        android:id="@+id/checkbox"
        android:layout_width="30dp"
        android:layout_height="45dp"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:button="@drawable/checkbox"
        android:checked="false"
        android:gravity="center"
       />

Tôi nghĩ câu trả lời chính xác nên sử dụng ImageButton thay vì Button. Đặt hình tam giác có thể vẽ làm "src" của ImageButton và đặt kích thước (layout_width & layout_height) như bạn muốn để dễ dàng chạm hơn và đặt ScaleType thành trung tâm để giữ lại kích thước hình tam giác.

Tôi thành thật nghĩ rằng cách dễ nhất là: -

Giả sử kích thước hình ảnh của bạn là 26dp * 26dp và bạn muốn diện tích lần truy cập là 30dp * 30dp, chỉ cần thêm khoảng đệm 2dp vào ImageButton / Button VÀ đặt kích thước thành 30dp * 30dp

Nguyên

<ImageButton
    android:layout_width="26dp"
    android:layout_height="26dp"
    android:src="@drawable/icon"/>

Khu vực đánh lớn hơn

<ImageButton
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:padding="2dp"
    android:src="@drawable/icon_transcript"/>

Giải pháp đơn giản nhất sẽ là tăng width and heighthạng mục của bạn (ví dụ: Hình ảnh, Nút, v.v.) và thêm padding; Vì vậy, khu vực có thể nhấp được lớn hơn nhưng trông ở kích thước ban đầu.

Thí dụ:

<Button
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:padding="8dp"
    android:background="@drawable/triangle" />

Xin chúc mừng, bạn đã đạt được cùng kích thước nút nhưng gấp đôi kích thước có thể nhấp!

_____________
|            |
|    |\      |
|    | \     |
|    |__\    |
|____________|

<Button
    android:layout_width="32dp"
    android:layout_height="36dp"
    android:layout_margin="5dp"
    android:background="@drawable/foo" 
/>

Kích thước của nền vẫn là 22x26dp. Chỉ cần thêm lợi nhuận.