web-dev-qa-db-ja.com

CoordinatorLayoutを介してTextViewをツールバーに移動するにはどうすればよいですか？

ツールバーで構成される_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を移動することはできますが、ツールバーの後ろで失われています。ツールバーの上に配置したい。私の目標は、タイトルを黄色のブロックから緑色のブロックに移動することです。

テキストビューがタイトルバーの上に表示されるようにレイアウトを調整する必要がありますか？

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>
_
androidandroid-recyclerviewandroid-coordinatorlayout
12
Kyle

私の目標は、タイトルを黄色のブロックから緑色のブロックに移動することです。

目標はタイトルを黄色のブロックから緑色に設定することなので、黄色のブロックでTextviewを移動する必要はありません。黄色のブロックでタイトルを設定するには、setTitleツールバーのプロパティ。

setCollapseModeToolbarを使用すると、_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それに応じて。

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

    }
_
3
Dipali s.

ツールバー内に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" />
4
Farhana

移動、サイズ変更、非表示などを行う要素ごとにカスタム動作を作成する必要があります...

CoordinatorLayout.Behavior<View>から拡張するクラスを作成し、必要なものを実装し、最後にウィジェットapp：layout_behaviorを作成したカスタム動作に設定します。

Gitハブで私のソースコードを参照してください CoordinatorBehavior

詳細については、このGitHubプロジェクトを参照してください saulmm CoordinatorExamples

1
FarshidABZ