Почему области кликов моих кнопок слишком малы внутри CollapsingToolbarLayout?

У меня есть три кнопки внутри CollapsingToolbarLayout. При расширении идея состоит в том, чтобы изменить фильтр в отображаемой галерее изображений или открыть диалоговое окно редактирования. Я получал противоречивые результаты — кнопки реагировали только на щелчки с перерывами.

В конце концов я понял, что проблема заключалась в том, что интерактивная область была намного меньше, чем клиентский прямоугольник представления. По горизонтали они кажутся обычными, но по вертикали кликабельная область намного короче кнопки. В эмуляторе я смог довольно точно определить границы:

Зона кликабельности

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

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".activity.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="?android:actionBarSize"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:contentScrim="?attr/colorPrimary"
            android:background="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            android:theme="@style/Widget.Design.CollapsingToolbar">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:paddingTop="32dp"
                android:paddingBottom="64dp"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="none"
                android:background="@android:color/transparent"
                android:orientation="horizontal">

                <ImageButton android:id="@+id/btnTags"
                             android:layout_width="64dp"
                             android:layout_height="64dp"
                             android:layout_weight="0.3"
                             android:src="@drawable/ic_tag"
                             android:tint="?android:attr/buttonTint"
                             android:background="@drawable/ripple" />

                <ImageButton android:id="@+id/btnAlbums"
                             android:layout_width="64dp"
                             android:layout_height="64dp"
                             android:layout_weight="0.3"
                             android:src="@drawable/ic_albums"
                             android:tint="?android:attr/buttonTint"
                             android:background="@drawable/ripple" />

                <ImageButton android:id="@+id/btnNewAlbum"
                             android:layout_width="64dp"
                             android:layout_height="64dp"
                             android:layout_weight="0.3"
                             android:src="@drawable/ic_new_album"
                             android:tint="?android:attr/buttonTint"
                             android:background="@drawable/ripple" />

            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbarMain"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="@string/app_name"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/LouvreTheme.ToolbarStyle"/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <co.moonmonkeylabs.realmrecyclerview.RealmRecyclerView
        android:id="@+id/recyclerAlbumGrid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="?android:attr/background"
        app:rrvLayoutType="Grid"
        app:rrvGridLayoutSpanCount="@integer/grid_span"
        app:rrvIsRefreshable="false"
        app:rrvSwipeToDelete="false" />

</android.support.design.widget.CoordinatorLayout>

Затем в моем onViewCreated() я назначаю каждой из кнопок OnClickListener. Я могу надежно и предсказуемо активировать их, но только нажав на узкую вертикальную полосу, изображенную выше.

Обходной путь и корректировки, которые я уже пробовал:

  • Переключение с ImageViews на FloatingActionButtons и, наконец, ImageButtons
  • Наложение android:fitsSystemWindows="true" на разные представления, включая все из них
  • Изменение размеров кнопок с wrap_content на размер, указанный в VectorDrawable, которые они отображают.
  • Установка android:minHeight на LinearLayout того же явного размера, что и кнопки
  • Сделать layout_weight каждой кнопки равным 1,0 и установить сумму 3,0.
  • Пробуем app:layout_collapseMode по-разному, как paralax и none на LinearLayout с кнопками.

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

Мысли?


person Ionoclast Brigham    schedule 21.08.2016    source источник
comment
Возможно, линейный макет уменьшился, потому что у вас есть android:paddingTop=32dp android:paddingBottom=64dp — вы можете проверить это, добавив цвет для макета здесь android:background=@android:color/transparent, чтобы увидеть, какой это размер — в этом случае вместо этого используйте поля или оберните линейный макет относительным макетом, например, относительный макет --- линейный макет --> ваши кнопки   -  person Tasos    schedule 22.08.2016
comment
@Tasos Настройка android:background="@android:color/holo_red_dark" на LinearLayout фактически делает весь макет панели инструментов красным, чего я не ожидал. Но это точно не обрезание посередине в кнопках.   -  person Ionoclast Brigham    schedule 22.08.2016
comment
Ok. Попробуйте эти настройки в LinearLayout и посмотрите, поможет ли это --- android:layout_centerInParent=true android:gravity=center_horizontal android:orientation=vertical   -  person Tasos    schedule 22.08.2016
comment
Делая его вертикальным, обрезается только область щелчка верхнего значка. Те, что ниже, кликабельны по всей видимой области. Явно что-то странное, когда выкладывается расширенный вид.   -  person Ionoclast Brigham    schedule 22.08.2016
comment
Я еще не измерял пиксель идеально, но похоже, что область от нижней части строки состояния до верхней части кликабельной зоны имеет ту же высоту, что и панель инструментов. Это должно быть подсказкой...   -  person Ionoclast Brigham    schedule 22.08.2016


Ответы (1)


Оказывается, Toolbar на самом деле физически остается вверху, несмотря на то, что он растягивается вниз с расширенным текстом заголовка. Таким образом, он частично закрывал верхние две трети или около того моих кнопок, чего я не мог сказать, потому что фон панели инструментов был прозрачным. Добавив контрастный цвет фона на панель инструментов, стало очень очевидно, что происходит.

Я нашел и протестировал два простых исправления:

  1. добавьте android:layout_marginTop="?android:actionBarSize" к LinearLayout, в котором находились кнопки, чтобы он был нарисован под панелью инструментов в направлении y.
  2. поменять местами панель инструментов и кнопки в макете XML; последняя определенная отображается сверху, и кнопки становятся полностью активными.
person Ionoclast Brigham    schedule 27.08.2016
comment
Почему вы не поместили кнопки в качестве меню панели инструментов в первую очередь? - person Eugen Pechanec; 27.08.2016
comment
Таким образом, меньше контроля над размещением и внешним видом. В конечном итоге на них будет пара строк с макетом и содержимым, которые могут меняться в зависимости от состояния приложения. - person Ionoclast Brigham; 29.08.2016