android - 如何通过 CoordinatorLayout 将 TextView 移动到 Toolbar 中？

Question

我正在构建一个协调器布局，它由一个工具栏组成，一个在滚动时隐藏的相对布局，一个始终位于可滚动列表上方的静态布局，和一个 RecyclerView。

我目前已经按照我的意愿对其进行了布局，如下所示:

• 绿色是工具栏
• 橙色是在滚动时隐藏的相对布局
• 红色是我的静态布局，它位于回收站 View 之上，并且向上移动但不隐藏。
• 白色是我的 RecyclerView

下一张图片是我向上滚动回收站 View 后的样子。

所以我的橙色 View 会按照我的意愿隐藏，这很完美。我唯一缺少的步骤是将“Title 1” TextView 移动到成为工具栏的标题。我见过一些例子，他们对图像做了类似的事情，但还不能用自定义行为复制它。我假设这将需要什么？

是否有人对我的布局是否需要更改以实现此目的有任何建议，以及对自定义行为的任​​何建议(如果需要的话)？

<?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，但它在工具栏后面迷路了。我希望它位于工具栏的顶部。我的目标是将标题从黄色 block 移到绿色 block 中。

我是否需要调整我的布局以使 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>

Answer 1

My goal is to move the title from the yellow block into the green block.

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

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

More Detail on 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 中。

在 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;
                }
            }
        });

    }