Как увеличить область нажатия кнопки Android без масштабирования фона?

У меня есть кнопка с настраиваемым рисунком.

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

Выдвижной элемент представляет собой треугольник с прозрачным фоном.

|\
| \
|__\

Мне трудно нажать на эту кнопку. Во-первых, он относительно небольшой. Во-вторых, нельзя использовать прозрачные пиксели. Я хотел бы, чтобы размер рисунка был того же размера, но чтобы область попадания имела квадратную форму, вдвое превышающую размер треугольника.

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

вы можете использовать TouchDelegate API.

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)); 
    } 
}); 

Вы хотите "отступ". Он поместит пространство внутри представления. Margin выведет пространство снаружи, что не увеличит площадь попадания.

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

Вам необходимо использовать TouchDelegate, который определен в документации API как «Вспомогательный класс для обработки ситуаций, когда вы хотите, чтобы область касания представления была больше, чем его фактические границы представления».

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

Я предпочитаю это решение:

Просто добавьте положительный отступ и отрицательный отступ внутри файла ресурсов макета:

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

Это очень небольшое изменение по сравнению с использованием TouchDelegates. Я также не хочу запускать Runnable для добавления интерактивной области внутри моего Java-кода.

Если представление должно быть идеальным по пикселям, вы можете подумать об одном: отступы не всегда равны марже . Набивка всегда должна быть там точно так , как указано. Маржа зависит от окружающих взглядов и будет компенсирована с маржинальными значениями других представлений.

Основываясь на ответе, я создал функцию расширения kotlin, чтобы помочь с этим.

/**
 * 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)
    }
}

просто добавив отступ к кнопке

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

Таким образом, ваша кнопка примет высоту и ширину треугольного изображения и добавит к кнопке отступ 20dp, не растягивая само изображение. и если вы хотите какую - то минимальная ширину или высоту некоторых hinimum вы можете использовать minWidthи minHeightтег

Если вы используете привязку данных. Вы можете использовать адаптер привязки.

@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));
    });
}

а затем вы можете использовать атрибут для таких представлений

increaseTouch="@{8dp}"

Я не знаю точно, что вы имеете в виду под «без увеличения возможности рисования фона». Если вы имеете в виду, что вы просто не хотите, чтобы ваш объект для рисования растягивался, тогда один из вариантов, который у вас есть, - взять фон png и добавить к нему дополнительную прозрачную границу пикселей. Это увеличит зону попадания, но не растянет изображение.

Если, однако, вы имеете в виду, что вы вообще не хотите изменять эту возможность рисования, я думаю, что ваш единственный вариант - использовать большие жестко закодированные значения для высоты и ширины.

попробуйте с этим

  <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" />

См. Могу ли я программно увеличить площадь кнопок в области щелчка? . Для меня это наверняка самый простой способ. Даже включает небольшую анимацию только фактического объекта, на который можно нажимать, позволяя фону получать щелчки. Скоро я буду применять это к своему собственному коду.

Это сработало для меня:

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

Хотя на самом деле вам следует преобразовать 30 в опускание или сделать процент от высоты кнопки.

Мне просто нужно было то же самое: кликабельная область больше изображения кнопки. Я обернул его в FrameLayout размером больше, чем фоновый рисунок, и изменил внутренний тег Button на TextView. Затем я поручил обработчику кликов работать с этим FrameLayout, а не с внутренним TextView. Все работает хорошо!

Вы можете использовать прозрачную кнопку вот так ...

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

вы можете увеличить или уменьшить размер кнопки по своему усмотрению и использовать enter code hereImageView до кнопки ....

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

Я создал для этого функцию верхнего уровня в 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)
}

Для этого я использовал ImageButton. В определении xml вы увидите эти два атрибута:

• android: background - чертеж для использования в качестве фона.
• android: scr - Устанавливает возможность рисования в качестве содержимого этого ImageView.

Итак, у нас есть два чертежа: фоновый и исходный. В вашем примере источником будет треугольник (drawable / trianlge):

|\
| \
|__\

И фон квадратный (вытяжной / квадратный):

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

Вот пример ImageButton xml:

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

Результат:

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

Также квадратный, может иметь несколько разных состояний (нажат, сфокусирован). И вы можете увеличить размер фона с помощью прокладок.

На всякий случай вот пример фона, который можно рисовать из панели действий 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>

Вы можете установить отступ для представления, то есть вашей кнопки.

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

Надеюсь, что это работает для вас.

Итак, правильный ответ, добавьте отступы к сенсорной области, увеличьте и измените изображение с фона на srcCompact .

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

Чтобы использовать app: scrCompat, вам нужно добавить xmlns:app="http://schemas.android.com/apk/res-auto"к вашему основному / родительскому элементу в xml.

пример завершен:

<?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>

Простое добавление заполнения приводило к тому, что мой флажок не центрировался. Следующее сработало для меня, однако я указал фиксированный размер для флажка (в соответствии с моей спецификацией пользовательского интерфейса). Идея заключалась в том, чтобы добавить отступ слева, а не справа. Я добавил отступы сверху и снизу, увеличив сенсорную цель и сохранив флажок в центре.

<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"
       />

Я думаю, что правильный ответ должен использовать ImageButton вместо Button. Задайте для вытягиваемого треугольника значение «src» ImageButton и установите размер (layout_width и layout_height), как вы хотите, для более легкого касания, и установите ScaleType в центр, чтобы сохранить размер треугольника.

Я честно считаю, что самый простой способ: -

Скажем, размер вашего изображения составляет 26dp * 26dp, и вам нужна область попадания 30dp * 30dp, просто добавьте отступ 2dp к вашему ImageButton / Button и установите размер 30dp * 30dp

Оригинал

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

Большая зона поражения

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

Самым простым решением было бы увеличить размер width and heightвашего элемента (например, изображения, кнопки и т. Д.) И добавитьpadding ; Таким образом, интерактивная область больше, но выглядит в исходном размере.

Пример:

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

Поздравляем, вы получили такой же размер кнопки, но в два раза больше, чем при нажатии!

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

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

Размер фона по-прежнему 22x26dp. Просто добавьте маржу.