1. Toolbar
앱의 상단에 위치해 있으며, 가장 기본적인 형태는 한쪽에는 활동 제목을 표시하고 다른 쪽에는 더보기 메뉴를 표시한다.
툴바(앱 바)는 이렇게 간단한 형태로도 유용한 정보를 사용자에게 제공하고 일관된 디자인과 분위기를 Android 앱에 제공하도록 지원한다.
1.1. Toolbar? ActionBar?
Toolbar를 언급하면 연관되어 나오는 것이 ActionBar이다.
나도 처음에는 두 개가 같은? 개념인 줄 알았는데, 같은 개념은 아니었다. 다음에서 이유를 봐보자.
앱 바 설정하기 | Android 개발자 | Android Developers
앱 바 설정하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 가장 기본적인 형태의 작업 모음은 한쪽에는 활동 제목을 표시하고 다른 쪽에는 더보기 메뉴
developer.android.com
안드로이드는 예전부터 ActionBar가 기본으로 존재했고, 커스터마이징 해서 각 앱에 맞게 변경해서 사용했다.
예전에는 AppBar를 만들때 ActionBar클래스를 사용하여 만들어졌는데 그래서 AppBar를 ActionBar라고 부르기도 한다.
AppBar == ActionBar라고 취급을 하는데 Toolbar는 왜 나온 것일까?
이유는 ActionBar(App Bar)의 업데이트에 있다.
Android 3.0 (API Level 11)부터는 기본 테마를 사용하는 모든 액티비티에 ActionBar가 App Bar로 제공되었는데 하지만 App Bar기능이 다양한 Android 출시를 통해 점차적으로 네이티브 ActionBar에 추가되어 왔다.
이 결과로 기기에 설치된 ActionBar가 설치된 안드로이드 버전에 따라 다르게 동작하는 결과를 낳게 되었고 이는 개발자와 사용자 모두에게 불편함을 주게 되었다.
그래서 구글에서는 이러한 버전에 따라 동작이 달라지는 파편화 문제를 해결하고 하위 호환성(버전마다 일관된 동작)을 제공하기 위해 지원 라이브러리 (Support Library)를 새로 제시하였다.
이것이 바로 Toolbar이다.
ToolBar는 Android 5.0 (API Level 21)부터 추가된 위젯으로 앱에서 가장 중요한 액션 또는 자주 사용되는 액션들을 제공하는 앱바(AppBar)를 만들 때 사용된다.
ToolBar의 v7 AppCompat지원 라이브러리 버전에 추가되고 있어서 이 지원 라이브러리를 사용할 수 있는 모든 기기에서 이들 기능을 사용할 수 있다.
1.2. Toolbar 기본 사용법
1. 먼저, style (theme)에서 액션바가 지정이 되어있으면 NoActionBar로 바꾸어준다.
style로 ActionBar가 지정이 되어있으면 Toolbar를 사용할 수 없기 때문이다.
<html />
<style name="Base.Theme.Week1" parent="Theme.Material3.DayNight.NoActionBar">
<!-- Customize your theme here. -->
</style>
2. Toolbar를 사용할 액티비티에 툴바를 선언한다.
<html />
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:title="@string/app_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- custom view -->
</androidx.constraintlayout.widget.ConstraintLayout>
Toolbar에도 굉장히 많은 속성이 있어 필요한 것이 있으면 찾아서 적용을 하면 된다.
3. kotlin으로도 툴바를 제어하는 것이 가능하다.
<kotlin />
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
// 툴바 객체 가져오기
val toolbar = findViewById<Toolbar>(R.id.toolbar)
// 앱바를 툴바로 지정
setSupportActionBar(toolbar)
val actionbar = supportActionBar
actionbar.xxx // -> 툴바 제어
}
++ 2023.08.11 업데이트
2. Custom AppBar
화면의 상단은 창에서 기본으로 제공하는 Material의 ActionBar 혹은 뷰의 일종으로 커스텀 할 수 있는 Toolbar로 구성할 수 있다. Toolbar 등은 타이틀 문자열, 앱 아이콘 이미지, 메뉴 등을 구성하는 것이 주목적이다.
AppBarLayout은 이 Toolbar를 포함하여 Toolbar 이외에 액티비티 상단을 조금 더 넓게 구성하거나 이미지를 포함하는 등 다양하게 구성할 수 있다.
AppBarLayout에서 커스텀을 할 때, 스크롤을 하면 appbar가 사라지거나 변화하는 효과를 주고싶을 때가 있는데, 이때 CollapsingToolbarLayout을 사용한다. CollapsingToolbarLayout은 동적인 상단바를 만드는데 사용된다.
CollapsingToolbarLayout을 사용하기 위해서는 CoordinatorLayout이 상위 레이아웃으로 반드시 있어야 한다.
CoordinatorLayout는 자식뷰에 behavior를 지정할 수 있는데, behavior는 스크롤, 드래그, 스와이드, 플링 등, 뷰의 다양한 움직임이나 애니메이션에 따른 상호작용을 구현하기 위해 사용된다. 이 behavior 속성을 사용하여 스크롤 시에 상단바가 반응하도록 만들어야 하므로, 반드시 CoordinatorLayout을 사용해야 한다.
<css />
<androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.appbar.CollapsingToolbarLayout>
<androidx.appcompat.widget.Toolbar>
<FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<!-- ...계층구조 사이에 필요한 뷰 넣기 -->
androidx.coordinatorlayout.widget.CoordinatorLayout: CollapsingToolbarLayout을 사용하기 위해 선언해야하는 상위 레이아웃이다. behavior를 통해 움직임, 애니메이션을 지정할 수 있다.
com.google.android.material.appbar.AppBarLayout: 앱바의 최상단 레이아웃을 지정한다.
com.google.android.material.appbar.CollapsingToolbarLayout: 스크롤시 동적인 움직임을 나타내는 앱바를 만들기 위해 사용한다.
androidx.appcompat.widget.Toolbar: 스크롤 후에도 계속 남아있을 기본 툴바(앱바)를 정의한다. (하위 레이아웃에 컴포넌트 정의)
코드를 통해 다양하게 앱바를 조정해볼 수 있다.
<kotlin />
// 스크롤 시에 앱바를 바뀌게한다.
private fun initAppBar() {
// 앱바의 상태 변경을 감지해서 스크롤시 일정 스크롤을 넘어가면 alpha값을 바꾸어 투명/불투명하게 한다.
binding?.appBar?.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
val topPadding = 300f.dpToPx(this)
// 실제 스크롤된 값 계산
val realAlphaScrollHeight = appBarLayout.measuredHeight - appBarLayout.totalScrollRange
val abstractOffset = abs(verticalOffset)
// 스크롤시 offset값 계산
val realAlphaVerticalOffset = if (abstractOffset - topPadding < 0) 0f else abstractOffset - topPadding
//300dp 이상 스크롤이 되면 alpha값을 0으로 만들어 앱바를 투명하게
if (abstractOffset < topPadding) {
binding?.toolbarBackgroundView?.alpha = 0f
return@OnOffsetChangedListener
}
val percentage = realAlphaVerticalOffset / realAlphaScrollHeight
// 스크롤이 된 percentage를 계산하여 스크롤된 정도의 alpha값을 계속 바꿔줌
binding?.toolbarBackgroundView?.alpha = 1 - (if (1 - percentage * 2 < 0) 0f else 1 - percentage * 2)
})
initActionBar()
}
// 앱바 기본 초기화
private fun initActionBar() = with(binding) {
// 아이콘 제거
this?.toolbar?.navigationIcon = null
// 액션바(앱바)의 좌우 여백 없애기
this?.toolbar?.setContentInsetsAbsolute(0, 0)
// 액션바 지정
setSupportActionBar(binding?.toolbar)
supportActionBar?.let {
// 액션바 설정
it.setHomeButtonEnabled(false)
it.setDisplayHomeAsUpEnabled(false)
it.setDisplayShowHomeEnabled(false)
}
}
<-- 필요시 추가내용 업데이트 -->
ref.
Toolbar | Android Developers
developer.android.com
'Android' 카테고리의 다른 글
| fragment & lifecycle (0) | 2023.09.15 |
|---|---|
| [Android] Serializable - Parcelable (0) | 2023.09.01 |
| [Android] RecyclerView (0) | 2023.08.10 |
| [Android] TabLayout의 불편한 점을 덜어주는 ViewPager2 적용기 (0) | 2023.08.09 |
| [Android] Activity Lifecycle - 2 (0) | 2023.08.02 |
