LoginSignup
6
4

More than 5 years have passed since last update.

スクロールに合わせてToolbarにタイトルを表示する

Last updated at Posted at 2019-03-26

レイアウト

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:fitsSystemWindows="false"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            >

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:fitsSystemWindows="false"
                >

                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="false"
                    app:contentScrim="?attr/colorPrimary"
                    android:minHeight="?attr/actionBarSize"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    >

                    <ImageView
                        android:id="@+id/imageView"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:transitionName="title_image"
                        android:contentDescription="@null"
                        app:layout_collapseMode="parallax"
                        app:srcCompat="@android:color/darker_gray"
                        />

                    <androidx.appcompat.widget.Toolbar
                        android:id="@+id/toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        app:layout_collapseMode="pin"
                        >
                        <TextView
                            android:id="@+id/title"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:textSize="18sp"
                            android:textStyle="bold"
                            android:textColor="@color/white"
                            android:text="@string/title"
                            />
                    </androidx.appcompat.widget.Toolbar>
                </com.google.android.material.appbar.CollapsingToolbarLayout>

            </com.google.android.material.appbar.AppBarLayout>

            <include android:id="@+id/content"
                     layout="@layout/content"
                />

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

あとはこんな感じにスクロールに合わせてアルファを調整する

        // スクロールに合わせてタイトルを表示する
        binding.appBar.addOnOffsetChangedListener(
            AppBarLayout.OnOffsetChangedListener { appBar, i ->
                binding.title.alpha = Math.abs(i / appBar.totalScrollRange.toFloat())
            }
        )

スクロールするとふわっと出てくる

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4