1. ❗️ 스크롤하면 위가 붙는 화면을 구현하자!
<목표>
-
네이버나 많은 포털사이즈에서 사용하는 아래로 스크롤 할 시 툴바가 위에 붙는 화면을 구현하여야한다.
👉 사용자가 손쉽게 더 많은 조회 결과를 확인할 수 있다.- Sticky View Layout
- Collapsing Toolbar Layout
-
현재 페이지가 Tab Layout을 사용하여 해당 Fragment 내에 이런 화면을 구현하여야한다
<결론>
Collapsing Toolbar Layout을 이용하여 구현하도록 하자
2. 🏋️♂️ 구현하기
유튜브를 참조하여 최종 구현한 코드
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/bgGray"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@style/expandedBarTextStyle"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="top|center_horizontal"
app:expandedTitleMarginStart="60dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginTop="15dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
>
</androidx.appcompat.widget.Toolbar>코드를 살펴보자.
스타일 변화
- CollapsingToolbarLayout 속성
app:expandedTitleTextAppearance="@style/expandedBarTextStyle"
[style.xml]
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="expandedBarTextStyle">
<item name="android:textSize">25sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@android:color/black</item>
</style>
</resources>여기서 툴바의 글씨 크기, 폰트, 색상 등을 결정할 수 있다.
이 유튜브를 확인해보면
textSize="0sp", textColor="@android:color/transparent"
로 해서 처음 화면에 뜨는 툴바의 title을 아예 보이지 않도록 하였는데, 아주 좋은 아이디어같다!
- CollapsingToolbarLayout
app:expandedTitleMarginStart="60dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginTop="15dp"
기본적으로 스크롤 전에 큰 폰트로 아래 위치하던 title을 기본 툴바처럼 기본 위치에 고정하도록 만든다.
<com.google.android.material.button.MaterialButtonToggleGroup>아래에는 스크롤하면 사라질 구간을 넣어주면 되고
</com.google.android.material.appbar.AppBarLayout>밖
<androidx.core.widget.NestedScrollView>안에는 스크롤 이후에 남아있을 부분을 넣어주면 된다!
3. 결과물
스크롤 시 툴바가 글씨 크기가 축소되고 바코드 입력 부터 남게 되었다!
4. 수정사항
- 바코드 입력과 툴바 사이의 margin이 너무 적어 미학적으로 좋지 못하다. responsive하게 변화를 줄 수 있는 방법은 없을까?
