Как переместить TextView на панель инструментов через CoordinatorLayout?

Я работаю над созданием coordinator layout, состоящего из панели инструментов, относительного макета, который должен скрываться в прокрутке, макета, которая всегда статична над scrollable list и RecyclerView.

В настоящее время я его раскладываю, как хочу, как показано здесь:

Зеленый - это панель инструментов

Оранжевый - это относительный макет, который нужно скрывать на прокрутке

Red - мой статический макет, который должен оставаться выше просмотра ресайклера и двигаться вверх, но не скрывать.

Белый - это мой RecyclerView

Этот следующий снимок выглядит так, как только я просматриваю весь путь до просмотра ресайклера.

Итак, мой оранжевый вид скрывается, как я хочу, что идеально. Единственный шаг, который я пропустил, - это перемещение текста заголовка "Заголовок 1" в заголовок панели инструментов. Я видел примеры, когда они сделали что-то похожее с изображением, но не смогли повторить его с помощью привычного поведения. Я предполагаю, что это займет?

Есть ли у кого-нибудь советы о том, нужно ли изменить макет, чтобы сделать это возможным, и какие-либо рекомендации по пользовательскому поведению, если это произойдет?

<?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">  <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=""/>  </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.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>

EDIT:

У меня есть некоторый прогресс. Я думаю, что у меня есть макет, как я хочу, и у меня началось поведение. Я могу перемещать 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: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>

Ответы

Ответ 1

Вам нужно сделать панель инструментов 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" />

Ответ 2

Моя цель - переместить заголовок из желтого блока в зеленый блок.

Поскольку ваша цель - установить заголовок из желтого блока на зеленый, нет необходимости перемещать Textview в желтый блок, вы можете установить заголовок в желтом блоке с помощью свойства setTitle Панель инструментов.

setCollapseMode с помощью Toolbar вы можете установить его на 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.OnOffsetChangedListener прослушиватель вашего AppBarLayout, чтобы определить CollpasingToolbar, и он был скомпонован и задал Title в Toolbar.

Вызов метода ниже 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;
                }
            }
        });

    }

Ответ 3

Вам нужно написать настраиваемое поведение для каждого элемента, который вы хотите переместить, изменить размер, скрыть и т.д.

просто создайте класс, который простирается от CoordinatorLayout.Behavior<View> и реализует то, что вам нужно, и, наконец, установите приложение виджета: layout_behavior в пользовательское поведение, которое вы написали.

Смотрите мой исходный код на git hub CoordinatorBehavior

И для получения дополнительной информации см. этот проект GitHub saulmm CoordinatorExamples