📒 툴바는 UI 설계 요소로서 App bar(==Action bar)라고 부르며 버전에 따라 구현체가 상이하다.
하지만 툴바는 ActionBar와 달리
툴바를 만들고 코드 상으로 속성을 할당할 수 있다.
toolbar = findViewById(R.id.toolbar)
// toolbar.title = "hello"
// toolbar.background = resources.getDrawable(R.color.teal_200, theme)
toolbar.apply {
title = "hello"
//background = resources.getDrawable(R.color.teal_200, theme)
// background = ColorDrawable(resources.getColor(R.color.teal_200,theme))
background = ResourcesCompat.getDrawable(resources, R.color.teal_200, theme)
}
여러개의 속성을 수정할 때는 apply 표준함수를 쓰는 방식이 가독성이 좋다.
또한 resources 파일을 접근하여 속성값을 주기 위한 방법에는 위처럼 여러 가지가 존재한다.
toolbar.inflatemenu(menuXML)
을 통해 메뉴를 결합하고,
XML상에서
showAsAction 설정을 통해 메뉴가 보여지는 속성 설정을 할 수 있다.
toolbar.apply {
inflateMenu(R.menu.menu_main)
}
이 경우 기존에 메뉴를 create 할 때처럼 onOptionsItemSelected를 오버라이딩 하여 메뉴 선택에 따른 실행을 정의하는 것이 아닌
toolbar.setOnMenuItemClickListener {
when (it.itemId) {
R.id.action_search -> {
Log.d(TAG, "onCreate: action_search")
}
R.id.action_setting -> {
Log.d(TAG, "onCreate: action_setting")
}
else -> {
Log.d(TAG, "onCreate: other..")
}
}
true
}
위처럼 setOnMenuItemClickListener
로 할당해준다.
CoordinatorLayout :
AppBarLayout :
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
</com.google.android.material.appbar.AppBarLayout>
스크롤에 따라 어떻게 동작할지는
layout_scrollFlags
를 통해 결정한다.
구글의 material design에서 제공하는 레이아웃으로 툴바를 펼쳤다가 접을 수 있도록 한다.
기존의 툴바를 CollapsingToolbarLayout에 담고 AppBarLayout에 넣어 구현한다.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
app:title="collapse test"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#FF6B60"
app:expandedTitleGravity="center">
<androidx.appcompat.widget.Toolbar
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
툴바의 속성을 보면
app:layout_collapseMode="pin"
으로 되어있는데 이렇게 하면 툴바 영역이 고정되지만 none
으로 하면 아래로 스크롤을 할 때 레이아웃 영역과 함께 사라진다.
parallax
로 하면 none으로 할때보다 미세하게 천천히 사라진다.