CollapsingToolbarLayout包含ViewPager和其中的一个搜索框。当ViewPager折叠时,如何防止搜索框仅折叠

时间:2018-10-07 09:21:28

标签: android android-collapsingtoolbarlayout android-appbarlayout

我在片段中使用CollapsingToolbarLayout。它包含一个RelativeLayout,该ViewPagerEditText和在ViewPager顶部对齐的ViewPager组成。当用户向下滚动时,工具栏将折叠。我想要的是当它折叠时我只想使<?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> 折叠而“编辑文本”保持不折叠。

这是我的XML文件:

AppBarLayout

我尝试在Toolbar下添加新的布局,并使其在{{1}}崩溃时可见,但是它具有糟糕的用户体验,因为这会导致ui闪烁。有我需要的解决方案吗?感谢您的所有答复。

1 个答案:

答案 0 :(得分:2)

  

当用户向下滚动时,工具栏将折叠。我想要的是什么时候   它折叠了,我只想使ViewPager折叠,但要编辑文本   保持不崩溃。

您已在"scroll|exitUntilCollapsed"中添加了CollapsingToolbarLayout,这意味着视图折叠时将关闭视图。

为了使EditText(搜索)留在其中,我建议将EditText作为子项添加到CoordinatorLayout内,然后将其锚定到{{1} }。就像我们在AppBarLayout中锚定Fab一样。

CoordinatorLayout

我建议(未测试)的另一种方式是添加:

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

检查:How can i determine that CollapsingToolbar is collapsed?