[CollapsingToolbarLayout] 삼성 메시지, 삼성 설정 앱 클론 코딩 (scrollFlags = "snap", AppbarLayout, Toolbar)

[CollapsingToolbarLayout] 삼성 메시지, 삼성 설정 앱 클론 코딩 (scrollFlags = "snap", AppbarLayout, Toolbar)

        final float ADD_BTN_X = getDpToPx(this, 37) * -1.0f;
        final float ADD_BTN_Y = getDpToPx(this, 75) * -1.0f;
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        CollapsingToolbarLayout toolBarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);

        ConstraintLayout constraintLayout = findViewById(R.id.two_cl);
        constraintLayout.setAlpha(0);
        FloatingActionButton addToBtn = findViewById(R.id.addToBtn);
        AppBarLayout appBarLayout = findViewById(R.id.app_bar);
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                int totalOffset = appBarLayout.getTotalScrollRange();
                int offset = Math.abs(verticalOffset);

                float ratio = 0; // 0: 펼침
                if (offset != 0) {
                    ratio = (float) offset / (float) totalOffset;
                }
                addToBtn.setAlpha(1 - ratio * 2 + 0.1f);
                constraintLayout.setAlpha((ratio - 0.5f) * 2 + 0.1f);
            }
        });

xml

구조 개략

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <Toolbar
                app:layout_collapseMode="pin"
                app:layout_ancor="@id/~~">
                <최상단툴바영역/>
            </Toolbar>
            <LinearLayout
                app:layout_collpaseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.3">
                <아래영역스크롤되면서사라질뷰들/>
            </LinearLayout>



        </CollapsingToolbarLayout>
        <위영역이Collapsing되면서최상단툴바영역에붙을영역/>
    </AppBarLayout>
    <NestedScrollView
           app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <내부/>
    </NestedScrollView>
</CoordinatorLayout>

layout_collapseParallaxMultipler

app:layout_collapseParallaxMultipler="0.3"

• 0.0~1.0까지의 값이 있으며 default 는 0.5이다
• 0.3으로 셋팅하면 해당영역이 스크롤up하면서 사라지는데 이때 흐림정도가 1->0.3만큼 남아있다가 스크롤영역에 의해 사라진다
• 0으로 하면 스크롤up할때, 스크롤 영역에 의해 완전히 사라지기 전에 1->0(visibility:gone)되고 난 후에 스크롤 영역에 의해 사라진다

layout_scrollFlags

• 중요한점!! 반정도 스크롤 됐을 때 자동으로 expand, collapse 되게 하는 플래그 : snap

app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"

구현xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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=".ScrollingActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:background="#00000000"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/black"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:toolbarId="@+id/toolbar">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="42dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.ScrollingActivityJava.PopupOverlay" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="140dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0">


                <com.google.android.material.floatingactionbutton.FloatingActionButton
                    android:id="@+id/addToBtn"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toLeftOf="parent"

                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />


            </androidx.constraintlayout.widget.ConstraintLayout>


            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/two_cl"
                android:layout_width="match_parent"
                android:layout_height="42dp"
                android:layout_gravity="bottom"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/white" />

                <View
                    android:id="@+id/headerLine"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/totalCount"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="11dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    android:text="총 100개" />

                <TextView
                    android:id="@+id/groupInfoState"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="6dp"
                    android:textSize="11dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toRightOf="@+id/totalCount"
                    app:layout_constraintTop_toTopOf="parent"
                    android:text="공개" />

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

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

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


</androidx.coordinatorlayout.widget.CoordinatorLayout>

구현화면