为什么我的按钮在 CollapsingToolbarLayout 中的点击区域太小?
Why are my buttons' click areas too small inside a CollapsingToolbarLayout?
我在 CollapsingToolbarLayout
中有三个按钮。展开时,想法是修改正在显示的图片库上的过滤器,或者弹出一个编辑对话框。我得到的结果不一致——按钮只间歇性地响应点击。
最终,我意识到问题是可点击区域比视图的客户端矩形小得多。在水平方向上,它们看起来很正常,但在垂直方向上,可点击区域比按钮短得多。在模拟器中,我能够相当精确地确定边界:
你可以从左到右正常触摸它们,但从上到下是错误的。
我一直在尝试从文档、官方指南、在线教程和开源代码示例的各种片段中拼凑出这个布局。我不完全理解所有花哨的 support/design 布局是如何协同工作的,或者所有配置属性在组合时究竟做了什么,所以修复很可能是对一两个属性的简单更改。这是我的布局:
<?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。我可以可靠且可预测地触发它们,但只能通过单击上图所示的窄垂直带。
我已经尝试过的解决方法和调整:
- 从
ImageView
s 切换到 FloatingActionButton
s,最后 ImageButton
s
- 在不同的视图上打
android:fitsSystemWindows="true"
,包括 所有 个
- 将按钮尺寸从
wrap_content
更改为它们显示的 VectorDrawable
中明确定义的尺寸
- 将
LinearLayout
上的 android:minHeight
设置为与按钮相同的明确大小
- 将每个按钮的
layout_weight
设置为 1.0,并将总和设置为 3.0
- 在放置按钮的
LinearLayout
上以 paralax
和 none
的形式尝试 app:layout_collapseMode
。
我在 SO 上找到的唯一类似问题是: 没有提供令人满意的答案,只是将按钮移到折叠区域之外的解决方法。
想法?
事实证明 Toolbar
实际上在物理上停留在顶部,尽管看起来随着扩展的标题文本向下延伸。因此它部分覆盖了我按钮的前三分之二左右,我无法分辨,因为工具栏背景设置为透明。通过向工具栏添加对比色背景,发生的事情变得非常明显。
我发现并测试了两个简单的修复:
- 将
android:layout_marginTop="?android:actionBarSize"
添加到包含按钮的 LinearLayout
中,使其在 y 方向上绘制在工具栏下方。
- 交换布局中工具栏和按钮的顺序XML;最后一个定义的绘制在顶部,按钮变得完全可点击。
我在 CollapsingToolbarLayout
中有三个按钮。展开时,想法是修改正在显示的图片库上的过滤器,或者弹出一个编辑对话框。我得到的结果不一致——按钮只间歇性地响应点击。
最终,我意识到问题是可点击区域比视图的客户端矩形小得多。在水平方向上,它们看起来很正常,但在垂直方向上,可点击区域比按钮短得多。在模拟器中,我能够相当精确地确定边界:
你可以从左到右正常触摸它们,但从上到下是错误的。
我一直在尝试从文档、官方指南、在线教程和开源代码示例的各种片段中拼凑出这个布局。我不完全理解所有花哨的 support/design 布局是如何协同工作的,或者所有配置属性在组合时究竟做了什么,所以修复很可能是对一两个属性的简单更改。这是我的布局:
<?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。我可以可靠且可预测地触发它们,但只能通过单击上图所示的窄垂直带。
我已经尝试过的解决方法和调整:
- 从
ImageView
s 切换到FloatingActionButton
s,最后ImageButton
s - 在不同的视图上打
android:fitsSystemWindows="true"
,包括 所有 个 - 将按钮尺寸从
wrap_content
更改为它们显示的VectorDrawable
中明确定义的尺寸 - 将
LinearLayout
上的android:minHeight
设置为与按钮相同的明确大小 - 将每个按钮的
layout_weight
设置为 1.0,并将总和设置为 3.0 - 在放置按钮的
LinearLayout
上以paralax
和none
的形式尝试app:layout_collapseMode
。
我在 SO 上找到的唯一类似问题是:
想法?
事实证明 Toolbar
实际上在物理上停留在顶部,尽管看起来随着扩展的标题文本向下延伸。因此它部分覆盖了我按钮的前三分之二左右,我无法分辨,因为工具栏背景设置为透明。通过向工具栏添加对比色背景,发生的事情变得非常明显。
我发现并测试了两个简单的修复:
- 将
android:layout_marginTop="?android:actionBarSize"
添加到包含按钮的LinearLayout
中,使其在 y 方向上绘制在工具栏下方。 - 交换布局中工具栏和按钮的顺序XML;最后一个定义的绘制在顶部,按钮变得完全可点击。