• 정보 제공보다는 개인 정리 목적의 포스팅입니다.

구현 내용

예시 이미지

위와 같이 스크롤하면 상단부분이 접히고, Tablayout 부분이 상단에 붙는 프래그먼트를 구현했다.
(탭레이아웃은 뷰페이저와 함께 사용하여 세 가지 프래그먼트를 이어줬다.)

레이아웃 구조

<CoordinatorLayout>
	<AppBarLayout>
    	<CollapsingToolbarLayout>
        	<ConstraintLayout>
            	다양한 요소들...
            </ConstraintLayout>
        </CollapsingToolbarLayout>
        <TabLayout/>
    </AppBarLayout>
    <ViewPager2/>
</CoordinatorLayout>
               

CoordinatorLayout

CoordinatorLayout은 두 가지 주요 사용 사례를 위한 것입니다.

• 최상위 애플리케이션 데코 또는 크롬 레이아웃으로
• 하나 이상의 하위 뷰와의 특정 상호 작용을 위한 컨테이너

AppbarLayout

• 기본적으로 그림자가 생기기 때문에 background 는 @null / elevation은 0dp로 지정

CollapsingToolbarLayout

• 아래 코드를 사용해준다.

app:layout_scrollFlags="scroll|exitUntilCollapsed">

• 이때 titleEnabled 를 false 로 지정 하면 CollapsingToolbarLayout 에서 별도로 title text 를 draw 하지 않기 때문에 app:title 에 설정 한 text 가 보이지 않게 되고, 이 상태에선 Toolbar 에 설정 된 title text 가 보이게 됩니다. 출처

Tablayout

• 고정시켜줄 것이기 때문에 layout_collapseMode="pin"으로 지정해준다.

Viewpager

뷰페이저를 이용하여 프래그먼트를 연결해준다.
각 프래그먼트에는 Nastedscroll을 적용하여 스크롤할 수 있게 만들어준다.

굉장히 도움이 많이 된 포스팅