问题
I've got three buttons inside a CollapsingToolbarLayout. When expanded, the idea is to modify a filter on the image gallery being displayed, or pop up an edit dialog. I was getting inconsistent results–the buttons were only responding to clicks intermittently.
Eventually, I realized the issue was that the clickable area was much smaller than the client rect of the view. Horizontally, they seem normal, but vertically the clickable area is much shorter than the button. In the emulator I was able to get fairly precise as to the bounds:
You can touch them normally left to right, but top to bottom is wrong.
I have been trying to cobble together this layout from various snippets from the docs, official guides, online tutorials, and open source code examples. I don't fully understand how all the fancy support/design layouts work together, or what all of the configuration attributes exactly do when combined, so it's perfectly possible the fix will be a simple change of an attribute or two. Here is my layout:
<?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>
Then, in my onViewCreated() I assign each of the buttons an OnClickListener. I can reliably and predictably trigger them, but only by clicking in that narrow vertical band pictured above.
Workaround and adjustments I have already tried:
- Switching from
ImageViews toFloatingActionButtons, and finallyImageButtons - Slapping
android:fitsSystemWindows="true"on different views, including all of them - Changing button dimensions from
wrap_contentto explicitly the size defined in theVectorDrawables they are displaying - Setting
android:minHeighton theLinearLayoutto the same explicit size as the buttons - Making the
layout_weightof each button 1.0, and setting the sum to 3.0 - Trying the
app:layout_collapseModevariously asparalaxandnoneon theLinearLayoutthat houses the buttons.
The only similar issue I've been able to find on SO is this: AppBarLayout and CollapsingToolbarLayout not able to contain Button? No satisfactory answer was ever provided, just a workaround of moving the button outside of the collapsing area.
Thoughts?
回答1:
Turns out the Toolbar actually physically stays up at the top, despite appearing to stretch down with the expanded title text. It was thus partially covering the top two thirds or so of my buttons, which I couldn't tell because the toolbar background was set to transparent. By adding a contrasting background color to the toolbar, it became very obvious what was happening.
I found and tested two simple fixes:
- add
android:layout_marginTop="?android:actionBarSize"to theLinearLayoutthat was housing the buttons, so it is drawn below the toolbar, in the y direction. - swap the order of the toolbar and the buttons in the layout XML; the last one defined is drawn on top, and the buttons become fully clickable.
来源：https://stackoverflow.com/questions/39069549/why-are-my-buttons-click-areas-too-small-inside-a-collapsingtoolbarlayout