AppBarLayout 스크롤 시 여러 요소 수납

6479 단어 Android
이 글은 Goodpatch Advent Calender 2019의 20일째입니다.
Android 앱에서 간혹 볼 수 있는 현대 스크롤
좀 힘들기 때문에 그 견해를 공유하고 싶어요.

좋은 물건



스크롤할 때 위에 제목 화면을 고정합니다
한 요소가 아닌 여러 요소로 구성하고자 하는 상황에서 다음과 같은 방법으로 실현되었다.

구현 방법


이것은 레이아웃에 대응하기 어려워서 코드로 제어되었다.

배치 구성

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/mainAppBar"
    android:layout_width="match_parent"
    android:layout_height="260dp"
    android:background="@color/colorWhite"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="@string/mission"
            app:expandedTitleMarginTop="24dp"
            app:expandedTitleMarginStart="16dp"
            app:collapsedTitleTextAppearance="@style/TextAppearance.Title.Collapsed"
            app:expandedTitleTextAppearance="@style/TextAppearance.Title.Expanded"
    >

        <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:gravity="center_vertical|start"
                android:alpha="0"
                app:layout_collapseMode="pin"
                app:contentInsetStartWithNavigation="0dp"
                app:contentInsetStart="0dp"
                app:navigationIcon="@drawable/ic_arrow_back_black_24dp"
        >
        </androidx.appcompat.widget.Toolbar>

        <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/collapsingContents"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:layout_behavior="com.package.view.HidingBehavior"
        >

            <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/button_expand_back"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_margin="16dp"
                    app:srcCompat="@drawable/ic_arrow_back_black_24dp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
            />

            <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/mission"
                    android:layout_width="256dp"
                    android:layout_height="wrap_content"
                    android:textSize="30sp"
                    android:text="@string/vision"
                    android:textColor="@android:color/black"
                    android:layout_marginTop="8dp"
                    android:layout_marginStart="16dp"
                    app:layout_constraintTop_toBottomOf="@id/button_expand_back"
                    app:layout_constraintStart_toStartOf="parent"
            />

            <androidx.appcompat.widget.AppCompatImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:scaleType="fitEnd"
                    app:srcCompat="@drawable/girls_guns"

            />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

점호

binding.mainAppBar.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener {
     override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
          val container = binding.collapsingContents
          val toolbar = binding.toolbar
          appBarLayout?.let {
               if (verticalOffset == 0) {
                   if (state != CollapsingToolbarLayoutState.EXPANDED) {
                       state = CollapsingToolbarLayoutState.EXPANDED
                       container.alpha = 1f
                       toolbar.alpha = 0f
                   }
               } else if (Math.abs(verticalOffset) >= it.totalScrollRange) {
                   if (state != CollapsingToolbarLayoutState.COLLAPSED) {
                            state = CollapsingToolbarLayoutState.COLLAPSED
                            container.alpha = 0f
                            toolbar.alpha = 1f
                        }
                   } else {
                        if (state == CollapsingToolbarLayoutState.COLLAPSED) {
                            container.alpha = 0.5f
                            toolbar.alpha = 0f
                        }
                        state = CollapsingToolbarLayoutState.INTERNEDIATE
               }
           }
       }
})

private var state: CollapsingToolbarLayoutState = CollapsingToolbarLayoutState.EXPANDED

private enum class CollapsingToolbarLayoutState {
     EXPANDED,
     COLLAPSED,
     INTERNEDIATE
}

마지막


제가 이번에 만든 코드를 공개했어요.
마음에 드는 게 있으면 연락 주세요.
https://github.com/hayato-k/CollspanToolbarLayout
코딩 테스트 - 모의고사
[프로그래머스] 다리를 지나는 트럭 (Python)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage