코틀린 공부37

컬랩싱 툴바 레이아웃 – 앱바 접히는 형태 설정하기

 컬랩싱 툴바 레이아웃(CollapsingToolbarLayout)은 앱바 레이아웃 하위에 선언하여 앱바가 접힐 때 다양한 설정을 할 수 있는 뷰입니다. 앱바 레이아웃 하위에 CollapingToolbarLayout을 추가하여 앱바가 스크롤되어 접히거나 나타날 때 어떻게 동작해야 하는지 설정합니다.

 

컬랩싱 툴바 레이아웃 등록

<androidx.coordinatorlayout.widget.CoordinatorLayout .. 생략. ... > 
	<com.google.android.material.appbar.AppBarLayout ... 생략 ... > 
    	<com.google.android.material.appbar.CollapsingToolbarLayout ...생략 ...
			app:contentScrim="?attr/colorPrimary" 
			app:expandedTitleMarginBottom="50dp" 
			app:expandedTitleMarginStart="48dp" 
			app:layout_scrollFlags="scroll|exitUntilCollapsed" 
			app:title="AppBar Title"> 
			<ImageView ... 생략 ...
				app:layout_collapseMode="parallax" /> 
			<android.appcompat.widget.Toolbar ... 생략 ...
				app:layout_collapseMode="pin" /> 
        </com.google.android.material.appbar.CollapsingToolbarLayout> 
    </com.google.android.material.appbar.AppBarLayout> 
	<androidx.recyclerview.widget.RecyclerView ... 생략 ...
		app:Layout_behavior="@string/appbar_scrolling_view_behavior" /> 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

컬랩싱 툴바 레이아웃 title 속성으로 앱바의 제목을 설정했으며 expandedTitleMarginStart, expandedTitleMarginBottom  속성으로 앱바가 접히지 않았을 때 제목의 위치를 설정했습니다. 그리고 앱바가 접히면서 내용이 정상으로 출력되지 못하는 상황이라면 contentScrim 속성에 지정한 색상으로 앱바를 출력합니다.

 

스크롤 설정하기

 앱바가 스크롤될지를 설정하는 layout_scroll Flags 입니다. 스크롤되어야 한다면  scroll값을 지정하고  | 연산자를 추가해 스크롤 시 어떻게 움직여야 하는지를 설정합니다.

속성	설명
scroll | enterAlways	스크롤 시 완전히 사라졌다가 거꾸로 스크롤 시 처음부터 다시 나타납니다.
scroll | enterAlwaysCollapsed	스크롤 시 완전히 사라졌다가 거꾸로 스크롤 시 처음부터 나타나지 않고 메인 콘텐츠 부분이 끝까지 스크롤된 다음에 나타납니다.
scroll | exitUntilCollapsed	스크롤 시 모두 사라지지 않고 툴바를 출력할 정도의 한 줄만 남을 때까지 스크롤됩니다.

 

scroll | enterAlways 속성값

app:layout_scrollFlags="scroll | enterAlways"

scroll | enterAlwaysCollapsed 속성 값

app: Layout_scrollFlags="scroll | enterAlwaysCollapsed"

scroll | exitUntilCollapsed 속성 값

app:layout_scrollFlags="scroll | exituntilCollapsed"

---

개별 뷰의 스크롤 설정하기

 

 하위 뷰마다 스크롤 설정은 layout_collapse Mode 속성으로 합니다. 속성 지정은 pin과 parallax로 할 수 있습니다.

속성	설명
pin	고정되어 스크롤되지 않습니다.
parallax	함께 스크롤됩니다.

 

개별 뷰의 스크롤 설정

<com.google.android material.appbar.Collapsing ToolbarLayout ... 생략 ...
	app:layout_scrollFlags="scroll|exitUntilCollapsed"> 
    <ImageView ... 생략 ...
		app:layout_collapseMode="parallax" /> 
    <androidx.appcompat.widget.Toolbar ... 생략 ...
		app:layout_collapseMode="pin" /> 
</com.google.android.material.appbar.CollapsingToolbarLayout>

---