CollapsingToolbarLayout 中 ImageView 的 OnClickListener

Question

我在 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>

这里是 Activity:

@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;
    }
};

Answer 1

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

我最后得到的是：

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

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

Answer 2

你能试试这两个东西吗:

1.Remove 来自 CollapsingToolbarLayout 的这两件事：

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

并将其放在工具栏中：
```
 app:layout_collapseMode="pin"
```

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

Answer 3

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

CollapsingToolbarLayout 中 ImageView 的 OnClickListener

OnClickListener for the ImageView in side CollapsingToolbarLayout

android

android-layout

android-view

material-design

android-toolbar