侧 CollapsingToolbarLayout 中 ImageView 的 OnClickListener答案

【问题标题】：OnClickListener for the ImageView in side CollapsingToolbarLayout侧 CollapsingToolbarLayout 中 ImageView 的 OnClickListener
【发布时间】：2017-08-20 10:47:33
【问题描述】：

我在CollapsingToolbarLayout 中有一个ImageView，我想在它上面附加一个View.OnClickListerner。然而，点击似乎不会触发监听器。

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/view_nade_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/view_nade_appbar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@null"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/view_nade_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/view_nade_backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|enterAlways|snap"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/view_nade_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="pin"
            android:paddingTop="24dp">

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


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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


</android.support.v4.widget.NestedScrollView>

<com.github.clans.fab.FloatingActionButton
    android:id="@+id/view_nade_fab"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:src="@drawable/ic_mode_edit_white_24dp"
    app:fab_colorNormal="?android:attr/colorAccent"
    app:fab_colorPressed="?android:attr/colorAccent"
    app:layout_anchor="@id/view_nade_appbar"
    app:layout_anchorGravity="bottom|right|end"/>

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

这是活动：

@BindView(R.id.view_nade_backdrop) ImageView mBackdrop;
@BindView(R.id.view_nade_appbar) AppBarLayout mAppbar;
@BindView(R.id.view_nade_collapsing_toolbar) CollapsingToolbarLayout mCollapsingToolbar;
@BindView(R.id.view_nade_toolbar) Toolbar mToolbar;

private final View.OnClickListener mOnBackdropClickListener = (v) ->
{
    final Intent intent = new Intent(ViewNadeActivity.this, GalleryActivity.class);
    intent.putExtra(GalleryActivity.EXTRA_PHOTO_URIS, ListUtils.join(mUtilityData.getImgUris(this)));
    startActivity(intent);
};


@Override
protected void onCreate(Bundle 
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_view_nade);

    ButterKnife.bind(this);

    setSupportActionBar(mToolbar);

    mBackdrop.setOnClickListener(mOnBackdropClickListener);
}

编辑：这是我附加到CollapsingToolbarLayout 的OnTouchListener（信用：@azizbekian）

private final View.OnTouchListener mOnToolbarTouchListener = new View.OnTouchListener()
{
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent)
    {
        int action = motionEvent.getActionMasked();
        if(mBackdropBounds != null && (action == MotionEvent.ACTION_DOWN
                || action == MotionEvent.ACTION_UP
                || action == MotionEvent.ACTION_CANCEL))
        {
            if(mBackdropBounds.contains((int) motionEvent.getRawX(), (int) motionEvent.getRawY()))
            {
                if(mBackdrop != null)
                {
                    mBackdrop.dispatchTouchEvent(motionEvent);
                    return true;
                }
            }
        }
        return false;
    }
};

【问题讨论】：

标签： android android-layout material-design android-view android-toolbar

【解决方案1】：

如果您打开show layout bounds，您会看到ImageView 顶部的布局实际上不会让您的点击事件到达ImageView。

我最终得到的是：

等到CollapsingToolbarLayout 完全展开后
一旦展开，您可以获得ImageView 的Rect（此Rect 包含视图层次结构中的视图坐标）
一旦你有了那个矩形，你应该在CollapsingToolbarLayout监听触摸事件
如果该触摸事件的 x,y 位置在您在上一步中保存的 Rect 内，那么您应该拦截该触摸事件并将该 MotionEvent 委托给 ImageView。

作为一个实现，您可以看到this 项目。 mMapLogoRect 是CollapsingToolbarLayout 中ImageView 的Rect。

【讨论】：

由于某种原因，OnTouchListener 永远不会在CollapsingToolbarLayout 上触发。我用完整的 xml 代码更新了 anwser。

【解决方案2】：

我发现了问题。 Toolbar 的高度设置为 wrap_content，这使它在扩展时扩展到整个 AppBarLayout 并消耗所有触摸事件。对于任何出现的人，您有 2 个解决方案。您可以执行@azizbekian 建议的操作，但将侦听器注册到Toolbar 而不是CollapsingToolbarLayout，或者将Toolbar 的layout_height 属性更改为固定值（例如android:layout_height="?attr/actionBarSize"），但在在这种情况下，它不会触发对 ImageView 顶部的点击，而 Toolbar 实际上是。

【讨论】：

【解决方案3】：

你能不能试试这两件事：

1.从CollapsingToolbarLayout中去掉这两个东西：

app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"

并把它放在工具栏中：
```
 app:layout_collapseMode="pin"
```

这样做：先用 1 测试，然后用 2 测试，然后再用两者测试。还要确保将 ImageView 的高度设置为更大的值，例如 200dp。如果有任何标准使它起作用，请告诉我。然后我会相应地编辑它。

【讨论】：