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

问题描述 投票：11回答：3

我正在努力构建一个由工具栏组成的coordinator layout，一个隐藏在滚动上的相对布局，一个始终位于scrollable list上面的静态布局，以及一个RecyclerView。

我现在按照我的要求进行布局，如下所示：

  • 绿色是工具栏
  • 橙色是隐藏在滚动上的相对布局
  • 红色是我的静态布局，它要保持在回收者视图之上并向上移动但不能隐藏。
  • 白色是我的RecyclerView

下一张图片就是我在回收器视图中向上滚动的样子。

所以我的橙色视图隐藏在我想要的地方，这是完美的。我唯一缺少的就是将“标题1”文本视图移动到工具栏的标题中。我已经看过他们已经用图像做了类似的事情的例子，但是还没有能够通过自定义行为复制它。我假设这会是什么？

有没有人对我的布局是否需要改变以使其成为可能有任何建议，以及任何有关自定义行为的建议，如果这将是什么？

enter image description here

<?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，但它在工具栏后面丢失了。我想让它放在工具栏的顶部。我的目标是将标题从黄色块移动到绿色块中。

我是否需要调整布局以使textview可以显示在标题栏的顶部？

enter image description here

新代码布局

<?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>
android android-recyclerview android-coordinatorlayout
3个回答
4
投票

您必须在工具栏中创建TextView并根据需要设置重力。对于您的问题，没有必要采取工具栏，您也可以使用布局。这是我的坐标布局。您可以在其中轻松调整工具栏内的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" />

3
投票

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

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

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中设置Title。

在OnCreate()的Activity上调用以下方法。

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

    }
1
投票

您必须为要移动，调整大小，隐藏等的每个元素编写自定义行为...

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

请参阅github qazxsw poi上的源代码

有关更多信息，请参阅此GitHub项目CoordinatorBehavior

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.