时间戳

首页 > 解决方案 > CollapsingToolbarLayout 包含 ViewPager 和一个搜索框。如何防止搜索框仅折叠，而 ViewPager 折叠

android - CollapsingToolbarLayout 包含 ViewPager 和一个搜索框。如何防止搜索框仅折叠，而 ViewPager 折叠

问题描述

我CollapsingToolbarLayout在我的片段中使用。它包含RelativeLayout由 aViewPager和一个EditText对齐的A 组成的 A ViewPager。当用户向下滚动时，工具栏会折叠。我想要的是当它折叠时我只想ViewPager折叠但编辑文本保持未折叠。

这是我的 XML 文件：

<?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/main_content"
    android:orientation="vertical"
    android:layout_marginBottom="10dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                android:fitsSystemWindows="true"
                app:contentScrim="@color/colorPrimaryDark"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="180dp">

                    <android.support.v4.view.ViewPager
                        android:id="@+id/view_pager"
                        android:layout_width="match_parent"
                        android:layout_height="180dp"
                        android:layout_gravity="top"
                        android:scaleType="centerCrop"
                        android:background="@drawable/loading_image"
                        android:fitsSystemWindows="true"
                        app:layout_collapseMode="pin" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/user"
                        android:text=""
                        android:gravity="center"
                        android:layout_centerInParent="true"
                        android:textSize="16sp"
                        android:textColor="#ff0000"/>
               <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:layout_below="@+id/user"
                    android:layout_marginLeft="15dp"
                    android:layout_marginRight="15dp">

                    <EditText
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="Search here"
                        android:padding="10dp"
                        android:id="@+id/srch"
                        android:textColor="#000"
                        android:maxLines="1"
                               android:background="@drawable/search_border_grey"/>

                    <ImageButton
                        android:id="@+id/button1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:src="@drawable/search_24"
                        android:layout_centerVertical="true"
                        android:background="#fff"
                        android:layout_margin="5dp"
                        android:text="Button"/>
                </RelativeLayout> 



                    <LinearLayout
                        android:id="@+id/layoutDots"
                        android:layout_width="match_parent"
                        android:layout_height="30dp"
                        android:layout_alignParentBottom="true"
                        android:layout_marginBottom="10dp"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:orientation="horizontal"></LinearLayout>
                </RelativeLayout>
                <android.support.v7.widget.Toolbar
                    android:id="@+id/collapsing_toolbar2"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin">

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



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

    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:id="@+id/root_layout"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <GridView
            android:id="@+id/customgrid"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:paddingBottom="10dp"
            android:gravity="center"
            android:horizontalSpacing="10dp"
            android:numColumns="2"
            android:verticalSpacing="3dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

我尝试在下面添加一个新布局AppBarLayout并使其在折叠时可见Toolbar，但它的用户体验很差，因为它会导致 ui 闪烁。有我的要求的解决方案。感谢您的所有回复。

标签： androidandroid-collapsingtoolbarlayoutandroid-appbarlayout

解决方案

当用户向下滚动时，工具栏会折叠。我想要的是当它折叠时我只想让 ViewPager 折叠但编辑文本保持未折叠。

您已经添加"scroll|exitUntilCollapsed"了CollapsingToolbarLayout这意味着，当它折叠时它将关闭退出视图。

为了使EditText(Search) 留在那里，我建议将其添加为子元素，然后将其锚定EditText到. 就像我们锚定一个inside一样。CoordinatorLayoutAppBarLayoutFabCoordinatorLayout

app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|center" // change it for your own porpuse

我建议的另一种方式（未测试）是添加：

app:layout_collapseMode="pin"

到您的View（EditText或那个容器），或者将标志更改为：

app:layout_scrollFlags="scroll|snap"

在CollapsingToolbarLayout.

然而，它可以通过处理AppBarLayout行为来检测它何时折叠或展开来完成：

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset)
{
    if (offset == 0)
    {
        // Fully expanded
        // make your view visible or not collapsible here maybe?
    }
    else
    {
        // Not fully expanded or collapsed
    }
}

检查：如何确定 CollapsingToolbar 已折叠？

推荐阅读