[Kotlin] 공부 15일차 (2022-02-02)

▷ 앱바 사용하기

   ▶ 앱바 레이아웃 - 화면 위쪽 영역 꾸미기

   ▶ 코디네이터 레이아웃 - 뷰끼리 상호 작용하기

   ▶ 캘랩싱 툴바 레이아웃 - 앱바 접히는 형태 설정하기

▷ 탭 레이아웃 - 탭 버튼 구성

▷ 내비게이션 뷰 - 드로어 화면 구성

▷ 확장된 플로팅 액션 버튼

 

 

• 앱바 사용하기

머티리얼 디자인(material design) : 모바일과 데스크톱, 그리고 그밖에 다양한 장치를 아우르는 일관된 애플리케이션 디자인 지침이다.

→ 질감이 느껴지는 표면(tactile surfaces)과 대담하고 선명한 그래픽 디자인(bold graphic design), 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션을 특징으로 한다.

 

□ 머티리얼 라이브러리 선언

implementation 'com.google.android.materail:material:1.2.1'

→ 안드로이드 스튜디오 4.1 버전부터 프로젝트나 모듈을 만들면 자동으로 머티리얼 라이브러리가 선언된다.

 

• 앱바 레이아웃 - 화면 위쪽 영역 꾸미기

앱바 : 화면 위쪽의 꾸밀 수 있는 영역

 

# 툴바 포함하기

→ 앱바를 사용할 때는 대부분 앱바 레이아웃 안에 툴바를 포함

 

□ 앱바 레이아웃에 툴바 포함

<androidx.appcompat.widget.Toolbar
	android:id="@+id/toolbar"
	android:layout_width="match_parent"
	android:layout_height="?attr/actionBarSize"/>

 

# 크기 확장하기

앱바 레이아웃을 사용하면 툴바뿐만 아니라 여러 가지 콘텐츠를 함께 표시할 수 있다.

android:layout_height="242dp"

→ layout_height 속성으로 위쪽 영역을 크게 만들 수 있다.

 

# 이미지 넣기

→ 크기 조절뿐만 아니라 다양한 콘텐츠를 함께 출력할 수 있다.

 

• 코디네이터 레이아웃 - 뷰끼리 상호 작용하기

→ 코디네이터 레이아웃(CoordinatorLayout)은 머티리얼이 아닌 제트팩의 androidx라이브러리에서 제공한다.

 

□ 코디네이터 레이아웃 선언

implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'

→ 코디네이터 레이아웃을 이용하려면 그래들 파일에 선언해야 한다.

 

# 스크롤 연동하기

→ 뷰 2개를 코디네이터 레이아웃에 넣으면 뷰에서 발생한 스크롤 정보를 코디네이터 레이아웃이 받아 다른 뷰에 전달한다. ( 뷰 2개가 함께 스크롤된다)

 

비헤이비어(behavior) : 자식 뷰끼리 상호작용 하려면 누군가는 코디네이터 레이아웃에 정보를 전달하고, 다른 누군가는 그 정보를 받을 수 있어야 한다는 의미

 

# 중첩 스크롤 뷰 사용하기

코디네이터 레이아웃을 사용하더라도 텍스트 뷰, 이미지 뷰 등은 스크롤을 연동할 수 없다.

→ androidx.core.widget.NestedScrollView를 이용한다.

 

□ 중첩 스크롤 뷰

<androidx.coordinatorlayout.widget.CoordinatorLayout ...>
	<com.google.android.material.appbar.AppBarLayout ...>
		<androidx.appcompat.widget.Toolbar ...
			app:layout_scrollFlags="scroll|enterAlways" />
		<ImageView ...
			app:layout_scrollFlags="scroll|enterAlways" />
	</com.google.android.material.appbar.AppBarLayout>
	<androidx.core.widget.NestedScrollView	 ...
		app:layout_behavior = "@string/appbar_scrolling_view_behavior">
	<androidx.core.widget.NestedScrollView />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

→ app:layout_behavior 속성은 자신의 스크롤 정보를 어느 비헤비어 클래스가 받아서 처리해야 하는지를 의미

→ app:layout_behavior의 설정값을 문자열 리소스로 지정했는데 이 문자열은 com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior 클래스명이다.

→ 이 설정으로 레이아웃 중첩 스크롤 뷰 정보를 앱바 레이아웃의 ScrollingViewBehavior 클래스에 전달한다.

→ app:layout_scrollFlags 속성이 설정된 뷰가 스크롤 정보를 수신해서 함께 스크롤된다.

 

• 캘랩싱 툴바 레이아웃 - 앱바 접히는 형태 설정하기

캘랩싱 툴바 레이아웃(CollapsingToolbarLayout) : 앱바 레이아웃 하위에 선언하여 앱바가 접힐 때 다양한 설정을 할 수 있는 뷰이다.

→ 앱바가 접힐 때 표시할 제목이나 색상 등을 지정할 수 있다.

→ 앱바 레이아웃 하위에 CollapsingToolbarLayout을 추가하여 앱바가 스크롤되어 접히거나 나타날 때 어떻게 동작해야 하는지 설정한다.

 

□ 컬랩싱 툴바 레이아웃 등록

<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" />
	<androidx.appcompat.widget.Toolbar ...
		app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>

→ expandedTitleMarginBottom , expandedTitleMarginStart 속성으로 앱바가 접히지 않을 때 제목의 위치를 설정

 

# 스크롤 설정하기

→ 스크롤돼야 한다면 scroll값을 지정하고 | 연산자를 추가해 스크롤 시 어떻게 움직여야 하는지를 설정한다.

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

 

# 개별 뷰의 스크롤 설정하기

layout_collapseMode : 앱바를 스크롤할 때 앱바에 포함한 개별 뷰가 어떻게 움직여야 하는지 설정

pin	고정되어 스크롤되지 않는다
parallax	함께 스크롤된다.

 

• 탭 레이아웃 - 탭 버튼 구성

탭 레이아웃 : 탭으로 구분하는 화면에서 탭 버튼을 배치하는 레이아웃

 

□ 탭 레이아웃 등록

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height-"match_parent"
	android:orientation="vertical">
	<com.google.android.material.tabs.TabLayout
		android:id="@+id/tabs"
		android:layout_width="match_parent"
		android:layout_height="wrap_content" />
	<FrameLayout
		android:id="@+id/tabContent"
		android:layout_width="match_parent"
		android:layout_height="match_parent" />
</LinearLayout>

→ 탭 화면을 만드는 레이아웃 XML 파일

→ 사용자가 TabLayout으로 구성한 탭 버튼을 선택하면 FrameLayout 위치에 탭의 내용을 출력한다.

 

□ 코드에서 탭 버튼 정의

val tab1: TabLayout.Tab = tabLayout.newTab()
tab1.text ="Tab1"
tabLayout.addTab(tab1)

→ TabLayout.newTab() 함수로 만들어지는 TabLayout.Tab객체이고 text속성을 문자열을, icon 속성으로 이미지를 지정

→ Tab 객체를 TabLayout.addTab() 함수의 매개변수로 지정하여 탭 버튼을 추가한다.

 

□ XML 파일에서 탭 버튼 정의

<com.google.android.material.tabs.TabItem
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" 
		android:text="Tab1"/>

→ TabLayout 하위에 추가되는 TabItem 하나가 탭 버튼 하나를 의미한다.

 

# 탭 버튼 정렬하기

→ tabGravity는 탭 버튼을 정렬하는 속성이다.

→ fill 속성 : 기본값이며 탭 버튼을 가로로 등분하여 배치한다.

→ center 속성 : 탭 버튼을 가운데 정렬한다.

 

# 스크롤 설정하기

tabMode 속성은 태 ㅂ버튼을 스크롤할 수 있는지를 설정한다.

→ 기본값 : fixed(스크롤을 지원하지 않는다는 의미)

→ scrollable 설정 시 탭 버튼이 왼쪽부터 나열되고 모두 출력할 수 없다면 자동으로 가로 스크롤이 생긴다.

 

# 뷰 페이저 연동

→ 탭 레이아웃으로 탭 화면을 만들면서 뷰 페이저와 연동할 수 있다.

→ 레이아웃 XML 파일에서 TabLayout과 ViewPager2를 등록한 후 코드에서 TabLayoutMediator를 이용해 둘을 연동하면 된다.

 

□ 탭 레이아웃과 뷰 페이저 연동

TabLayoutMediator(tabLayout, viewPager) { tab, position -> 
tab.text = "Tab${(position +1)}"
}.attach()

→ TabLayoutMediator 생성자의 매개변수로 연동하고자 하는 탭 레이아웃과 뷰 페이저 객체를 전달한다.

→ 뷰 페이저의 화면이 3개이면 탭 버튼도 자동으로 3개가 나온다.

 

• 내비게이션 뷰 - 드로어 화면 구성

<com.google.android.material.navigation.NavigationView
	android:id="@+id/main_drawer_view"
	android:layout_width="wrap_context"
	android:laout_height="match_parent"
	android:layout_gravity="start"
	app:headerLayout="@layout/navigation_header"
	app:menu="@menu/menu_navigation" />

→headerLayout 속성으로 내비게이션 뷰의 위쪽을 어떻게 출력할지를 지정했고 menu 속성으로 아래쪽에 출력할 항목을 지정했다.

 

□ 항목 선택 이벤트 핸들러

binding.mainDrawerView.setNavigationItemSelectedListener{
	Log.d("kkang","navigation item click...${it.title}")
	true
}

→ DrawerLayout의 setNavigationItemSelectedListener() 함수로 이벤트 핸들러를 지정하여 처리한다.

 

• 확장된 플로팅 액션 버튼

→ 플로팅 액션 버튼(ExtendedFloatingActionButton) : 화면에 떠 있는 듯한 버튼을 제공하는 뷰

 

□ 확장된 플로팅 액션 버튼

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton 
android:text="extended FAB"
app:icon"@android:drawable/ic_input_add" />

→ text속성으로 문자열을 지정하면 이미지와 함께 출력된다.

→ icon 속성만 지정하면 둥근 모양만 나온다

 

□ 확장된 플로팅 액션 버튼 조절

binding.extendedFab.setOnClickListener{	//아이콘만 표시
	when(binding.extendedFab.isExtended){	//아이콘과 문자열 함께 표시
		true -> binding.extendedFab.shrink()
		false -> binding.extendedFab.extend()
	}
}

 

15일 차 공부 끝!