CollapsingTollbar 스크롤 하면서 아이콘 위치 변경하기

CollapsingTollbar 스크롤 하면서 아이콘 위치 변경하기

구조

<CoordinatorLayout>
    <AppBarLayout>
      <CollapsingToolbarLayout
        android:id="@+id/collapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="188dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <Toolbar/>
      <ConstraintLayout/>
      <ConstraintLayout/>      
    </CollapsingToolbarLayout>
  </AppBarLayout>

  <RecyclerView/>
</CoordinatorLayout>

• RecyclerView를 스크롤 할 때, AppBarLayout안의 Toolbar를 제외한 나머지 영역들은 Toolbar사이즈 만큼 위로 Collapse 된다.

Toolbar 속성

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
           android:layout_width="match_parent"
        android:layout_height="120dp"
            app:layout_collapseMode="pin" />

첫번째 ConstraintLayout

• CollapsingToolbarLayout 은 child view 의 parallax scroll 속성을 지원 합니다.
  대게 parallax scroll 기능을 구현 할 때 이동 해야 할 포지션에 특정 multiplier 값을 곱해서 구현이 되는데,이 multiplier 값을 지정 해 줄 수도 있습니다. (default 는 0.5 입니다)

app:layout_collapseParallaxMultiplier //0.0 ~ 1.0

• 1 : Collapsing 내부에 child view는 아예 collapsing 되지 않고 그자리에 가만히 있는다

  • 스크롤 할 때 움직이지 않는다.
  • 이 영역은 아래 메인 스크롤 영역(Recyclerview, NestedScrollview등)이 위로 올라온다
  • 위로 올라오는영역은 1로 설정된 영역을 위로 덮는다.

• 0 : 스크롤할 때 Toolbar 사이즈만큼 Toolbar 영역 안쪽에 붙는다

• 이 속성과 parallax 값을 설정하지 않으면 Toolbar태그의 사이즈 만큼 Collapse(사라짐)된다

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/watchlist_header_pin_height"
    android:layout_marginLeft="@dimen/content_margin"
    android:layout_marginRight="@dimen/content_margin"
    app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="1">

  <View
    android:id="@+id/addTobtnBg"
    android:layout_width="@dimen/dimen_36"
    android:layout_height="@dimen/dimen_36"
    android:layout_marginBottom="@dimen/dimen_14"
    android:background="?attr/btn_big"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

    <Button
    android:id="@+id/addToBtn"
    android:layout_width="@dimen/dimen_30"
    android:layout_height="@dimen/dimen_30"
    android:layout_marginRight="@dimen/dimen_3"
    android:layout_marginBottom="@dimen/dimen_17"
    android:background="?attr/btn_top"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

OffsetChangeListener 등록

• onOffsetChanged 함수의 verticaloffset은 처음 0상태에서 스크롤올렸을때 appbarLayout의 totaloffset(getTotalScrollRange())만큼의 값을 가진다.
  • getTotalScrollRange() : 187이라면 verticalOffset 은 0에서 스크롤 하여 위로 올렸을때 -187까지의 값을 갖는다.
• ratio = offset(verticalOffset) / totalOffset 의 계산으로 스크롤을 얼마나 올렸는지 계산할 수 있다.
• setAplha (흐림정도 조절) , setTranslationX(x위치이동)을 통해 스크롤시 위치 변경이 가능하다

    AppBarLayout.OnOffsetChangedListener mAppBarOffsetChangedListener = new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, final int verticalOffset) {
            appBarLayout.post(new Runnable() {
                @Override
                public void run() {
                    if (getViewModel().isEdit()) {
                        return;
                    }

                    int totalOffset = getBinding().appbarLayout.getTotalScrollRange();
                    int offset = Math.abs(verticalOffset);

                    float ratio = 0; // 0: 펼침
                    if (offset != 0) {
                        ratio = (float) offset / (float) totalOffset;
                    }
                    mTitleBarHeight = totalOffset - offset;
//                    LogUtil.d("[ANIMATION] " + totalOffset + " " + offset + " " + ratio);

                    getBinding().addTobtnBg.setTranslationX(ADD_BTN_X * ratio);
                    getBinding().addTobtnBg.setTranslationY(ADD_BTN_Y * ratio);

                    getBinding().addToBtn.setTranslationX(ADD_BTN_X * ratio);
                    getBinding().addToBtn.setTranslationY(ADD_BTN_Y * ratio);

                    getBinding().addTobtnBg.setAlpha(Math.max(1.0f - (ratio * 1.5f), 0f));
                    getBinding().addToBtn.setAlpha(Math.min(ratio * 1.5f, 1f));

                    getBinding().friendsBody.setAlpha(1.0f - ratio);
                }
            });
        }
    };

    static final float ADD_BTN_X = UIUtil.getPxFromDp(37) * -1.0f;
    static final float ADD_BTN_Y = UIUtil.getPxFromDp(75) * -1.0f;

전체 레이아웃

<?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:fitsSystemWindows="true"
        android:background="#00000000"
        >

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="84dp"
                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="1">







                <com.google.android.material.floatingactionbutton.FloatingActionButton
                    android:id="@+id/addToBtn"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginRight="30dp"
                    android:layout_marginBottom="17dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintRight_toRightOf="parent" />



            </androidx.constraintlayout.widget.ConstraintLayout>


            <androidx.constraintlayout.widget.ConstraintLayout
                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" />

                <!-- Header line -->
                <View
                    android:id="@+id/headerLine"
                    android:layout_width="match_parent"
                    app:layout_constraintTop_toTopOf="parent"
                    android:layout_height="match_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"
                    tools: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"
                    tools:text="공개" />



                <!-- 수익률 타이틀 -->
                <TextView
                    android:id="@+id/totalRateTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="6dp"
                    android:text="전체 :"
                    android:textSize="11dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toRightOf="@+id/totalCount"
                    app:layout_constraintTop_toTopOf="parent" />

            </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>

코드

package com.example.scrollingactivityjava;

import android.content.Context;
import android.os.Bundle;

import com.google.android.material.appbar.AppBarLayout;
import com.google.android.material.appbar.CollapsingToolbarLayout;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class ScrollingActivity extends AppCompatActivity {



    public static float getDpToPx(Context ctx, int dp) {
        float d = ctx.getResources().getDisplayMetrics().density;
        return dp * d;
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_scrolling);

        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);
        setSupportActionBar(toolbar);
        CollapsingToolbarLayout toolBarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);


        FloatingActionButton addToBtn = findViewById(R.id.addToBtn);

        toolBarLayout.setTitle(getTitle());
        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;
                }
//                    LogUtil.d("[ANIMATION] " + totalOffset + " " + offset + " " + ratio);

                float X = ADD_BTN_X * ratio;
                float Y = ADD_BTN_Y * ratio;
                addToBtn.setTranslationX(X);
                addToBtn.setTranslationY(Y);

                addToBtn.setAlpha(Math.min(ratio * 1.5f, 1f));
            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_scrolling, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}