为什么在CollapsingToolbarLayout中我的按钮的单击区域太小?

Ion*_*ham 6 android android-layout material-design android-design-library

我在A里面有三个按钮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>
Run Code Online (Sandbox Code Playgroud)

然后,在我中,为onViewCreated()每个按钮分配一个OnClickListener。我可以可靠且可预见地触发它们,但只能单击上图所示的狭窄垂直带。

我已经尝试过的解决方法和调整:

  • ImageViews 切换到FloatingActionButtons,最后切换到ImageButtons
  • android:fitsSystemWindows="true"上的不同意见,其中包括所有的
  • 将按钮尺寸从wrap_content显式更改为VectorDrawable它们所显示的s中定义的尺寸
  • 设置android:minHeightLinearLayout相同的明确大小的按钮
  • layout_weight每个按钮的设为1.0,并将总和设置为3.0
  • 在装有按钮的和上进行app:layout_collapseMode各种尝试。paralaxnoneLinearLayout

我能够在SO上找到的唯一类似问题是:AppBarLayout和CollapsingToolbarLayout无法包含Button?没有提供令人满意的答案,只是将按钮移到折叠区域之外的解决方法。

有什么想法吗?

Ion*_*ham 5

事实证明Toolbar,尽管似乎随着扩展的标题文本而向下伸展,但实际停留在顶部的位置。因此,它部分覆盖了我按钮的前三分之二左右,由于工具栏背景设置为透明,我无法得知。通过向工具栏添加对比的背景色,正在发生的事情变得非常明显。

我发现并测试了两个简单的修复程序:

  1. 添加android:layout_marginTop="?android:actionBarSize"LinearLayout用于容纳按钮的,因此它沿y方向绘制在工具栏下方。
  2. 交换布局XML中的工具栏和按钮的顺序;最后定义的一个绘制在顶部,并且按钮变得完全可单击。