如何通过CoordinatorLayout将TextView移动到工具栏中?

我正在构build一个coordinator layout ,它由一个工具栏,一个隐藏在滚动上的相对布局,一个始终在scrollable list上方的静态布局和一个RecyclerView

我现在已经按照我的要求进行布置了,如下所示:

  • 绿色是工具栏
  • 橙色是滚动上隐藏的相对布局
  • 红色是我的静态布局,是留在回收站视图上移动但不隐藏。
  • 白色是我的RecyclerView

下一张图片就是我一直向上滚动回收站视图的样子。

所以我的橙色视图隐藏,因为我想要的,这是完美的。 我唯一缺less的就是将“标题1”文本视图变成工具栏的标题。 我已经看到了一些例子,他们做了一些类似的图像,但还没有能够复制它与自定义的行为。 我假设这将采取什么?

有没有人有任何build议,如果我的布局需要改变,使之成为可能,任何自定义行为的build议,如果这将是什么?

在这里输入图像说明

 <?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:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <!-- HEADER --> <RelativeLayout android:id="@+id/rel1" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_collapseMode="parallax" android:background="@color/lightGreen" android:layout_marginTop="?attr/actionBarSize" android:paddingTop="10dp" android:paddingBottom="10dp"> <TextView android:id="@+id/title1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="Resist the urge" android:textSize="35sp" android:includeFontPadding="true" android:layout_centerInParent="true"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/resistUrgeTitleTextView" android:layout_centerHorizontal="true" android:text="Use a method below to help." android:includeFontPadding="true"/> </RelativeLayout> <FrameLayout android:id="@+id/main.framelayout.title" android:layout_width="match_parent" android:layout_height="100dp" android:layout_gravity="bottom|center_horizontal" android:background="@color/lightOrange" android:orientation="vertical" app:layout_collapseMode="parallax" > <LinearLayout android:id="@+id/main.linearlayout.title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="bottom|center" android:text="Title 1" android:textColor="@android:color/white" android:textSize="30sp" app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="4dp" android:text="Subtitle" android:textColor="@android:color/white" /> </LinearLayout> </FrameLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:backgroundTint="@color/lightGreen" app:layout_collapseMode="pin" app:title=""/> <!--<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|center_horizontal" android:text="Resist the urge" android:textColor="@android:color/black" android:textSize="30sp" app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" />--> </android.support.design.widget.CollapsingToolbarLayout> <android.support.constraint.ConstraintLayout android:id="@+id/cardConstraintLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:background="@android:color/holo_red_dark" android:layout_marginTop="0dp"> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="0dp" android:layout_height="175dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0" android:paddingBottom="50dp"/> <android.support.design.widget.TabLayout android:layout_width="wrap_content" android:layout_height="20dp" android:id="@+id/viewPagerIndicator" app:tabBackground="@drawable/pager_indicator_selector_gray" app:tabGravity="center" app:tabIndicatorHeight="0dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@id/interventionCategoryViewPager" android:layout_marginBottom="10dp"/> </android.support.constraint.ConstraintLayout> <!-- </android.support.design.widget.CollapsingToolbarLayout>--> <!--<android.support.v7.widget.Toolbar android:id="@+id/main.toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" app:layout_anchor="@id/main.framelayout.title" app:theme="@style/ThemeOverlay.AppCompat.Dark" app:title="" app:layout_collapseMode="pin"> </android.support.v7.widget.Toolbar>--> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v7.widget.RecyclerView> </android.support.design.widget.CoordinatorLayout> 

编辑:

我已经取得了一点进展。 我想我有我想要的布局,我已经开始了一个行为。 我能够移动TextView,但它在工具栏后面消失了。 我希望它在工具栏的顶部。 我的目标是将标题从黄色块移到绿色块。

我是否需要调整自己的布局,使文本视图出现在标题栏的顶部?

在这里输入图像说明

新的代码布局

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="60dp" android:background="?attr/colorPrimary" android:backgroundTint="@color/lightOrange" app:title="" android:layout_marginTop="20dp"/> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/toolbar"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="bottom|center" android:text="Test 1" android:textColor="@android:color/white" android:textSize="30sp" app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" android:elevation="100dp"/> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <LinearLayout android:id="@+id/main.framelayout.title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:background="@color/lightGreen" android:orientation="vertical" app:layout_collapseMode="parallax" android:paddingTop="50dp"> <!--<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="bottom|center" android:text="Resist The Urge" android:textColor="@android:color/white" android:textSize="30sp" app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" android:paddingTop="20dp"/>--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="4dp" android:text="Test 2." android:textColor="@android:color/white" android:paddingBottom="20dp" /> </LinearLayout> </android.support.design.widget.CollapsingToolbarLayout> <android.support.constraint.ConstraintLayout android:id="@+id/cardConstraintLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="0dp"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="0dp" android:layout_height="175dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0" android:paddingBottom="50dp"/> <android.support.design.widget.TabLayout android:layout_width="wrap_content" android:layout_height="20dp" android:id="@+id/viewPagerIndicator" app:tabBackground="@drawable/pager_indicator_selector_gray" app:tabGravity="center" app:tabIndicatorHeight="0dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@id/interventionCategoryViewPager" android:layout_marginBottom="10dp"/> </android.support.constraint.ConstraintLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v7.widget.RecyclerView> </android.support.design.widget.CoordinatorLayout> </RelativeLayout> 

Solutions Collecting From Web of "如何通过CoordinatorLayout将TextView移动到工具栏中?"

我的目标是将标题从黄色块移到绿色块。

由于您的目标是将标题从黄色块设置为绿色,因此无需在黄色块中移动Textview ,您可以使用工具栏的setTitle属性在黄色块中设置标题。

使用Toolbar setCollapseMode ,您可以将其设置为COLLAPSE_MODE_OFF/COLLAPSE_MODE_PARALLAX/COLLAPSE_MODE_PIN

CollapseMode上的更多细节

 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" app:layout_collapseMode="pin" /> // to pin in place until it reaches the bottom of the layout 

在您的AppBarLayout上实现AppBarLayout.OnOffsetChangedListener监听器,以确定CollpasingToolbar是否合拢,并相应地在Toolbar设置Title。

Activity OnCreate()方法下调用方法。

  private void setTitleOfLayout() { AppBarLayout appBarLayout = findViewById(R.id.appbar_layout); appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { boolean isShow; int scrollRange = -1; @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { if (scrollRange == -1) { scrollRange = appBarLayout.getTotalScrollRange(); } if (scrollRange + verticalOffset == 0) { // orange part is not visible so set The title if (myTitleName != null) toolbar.setTitle(myTitleName); isShow = true; } else if (isShow) { // orange part is visible so remove the title with space here make sure your are not setting null in toolbar. toolbar.setTitle(" "); isShow = false; } } }); } 

您必须在工具栏中创buildTextView并根据需要设置重力。 对于你的问题,没有必要采取工具栏,你也可以使用布局。 这是我的坐标布局。 您可以在其中轻松调整工具栏内的TextView。

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ads="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.sashwati.metrimonial.activity.MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay" app:elevation="0dp"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@drawable/gradientcolor" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay"> <!-- app:layout_scrollFlags="scroll|enterAlways"--> <com.sashwati.metrimonial.utils.CustomFontTextView android:id="@+id/toolbar_title" style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Dhakar Matrimonial" android:textColor="@android:color/white" android:textSize="@dimen/middium_text_size" app:fontName="raleway_regular" /> <ImageView android:id="@+id/iv_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginRight="@dimen/middium_padding" android:padding="@dimen/small_padding" android:src="@android:drawable/stat_notify_chat" /> <ImageView android:id="@+id/iv_universerch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:padding="@dimen/small_padding" android:src="@mipmap/search" /> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> 

你必须为你想要移动的每个元素编写一个自定义的行为,resize,隐藏等…

只需创build一个从CoordinatorLayout.Behavior<View>扩展的类并实现你想要的,最后将widget app:layout_behavior设置为你写的自定义行为。

在git hub CoordinatorBehavior上查看我的源代码

有关更多信息,请参阅此GitHub项目saulmm CoordinatorExamples

只要把你想要移动的代码放在工具栏中,粘贴就可以粘贴到工具栏的开关标签之间

 <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="your text here"/> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout>