为什么在CollapsingToolbarLayout中我的按钮的单击区域太小? [英] Why are my buttons' click areas too small inside a CollapsingToolbarLayout?

问题描述

我在CollapsingToolbarLayout中有三个按钮.展开后，其想法是修改正在显示的图库上的过滤器，或弹出一个编辑对话框.我得到的结果不一致-这些按钮只是间歇性地响应点击.

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>

然后，在我的onViewCreated()中，为每个按钮分配一个OnClickListener.我可以可靠且可预测地触发它们，但只能单击上方的狭窄垂直带.

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:

• 从ImageView s切换到FloatingActionButton s，最后是ImageButton s
• 将android:fitsSystemWindows="true"放在不同的视图上，包括所有的
• 将按钮的尺寸从wrap_content更改为显示的VectorDrawable中定义的尺寸
• 将LinearLayout上的android:minHeight设置为与按钮相同的显式尺寸
• 将每个按钮的layout_weight设置为1.0，并将总和设置为3.0
• 在容纳按钮的LinearLayout上尝试app:layout_collapseMode和none的方式不同.

• Switching from ImageViews to FloatingActionButtons, and finally ImageButtons
• Slapping android:fitsSystemWindows="true" on different views, including all of them
• Changing button dimensions from wrap_content to explicitly the size defined in the VectorDrawables they are displaying
• Setting android:minHeight on the LinearLayout to the same explicit size as the buttons
• Making the layout_weight of each button 1.0, and setting the sum to 3.0
• Trying the app:layout_collapseMode variously as paralax and none on the LinearLayout that houses the buttons.

我在SO上发现的唯一类似问题是:

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.

有想法吗?

推荐答案

事实证明Toolbar实际上似乎停留在顶部，尽管看上去会随着扩展的标题文本而缩小.因此，它部分覆盖了我按钮的前三分之二左右，由于工具栏背景设置为透明，我无法得知.通过在工具栏上添加对比色的背景色，很明显地看到了正在发生的事情.

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:

1. 将android:layout_marginTop="?android:actionBarSize"添加到容纳按钮的LinearLayout中，以便在y方向上将其绘制在工具栏下方.
2. 在布局XML中交换工具栏和按钮的顺序；最后定义的一个绘制在顶部，并且按钮变得完全可单击.

1. add android:layout_marginTop="?android:actionBarSize" to the LinearLayout that was housing the buttons, so it is drawn below the toolbar, in the y direction.
2. 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.

这篇关于为什么在CollapsingToolbarLayout中我的按钮的单击区域太小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！