안드로이드 Toolbar

이영준·2023년 4월 4일
0

📒 툴바는 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 설정을 통해 메뉴가 보여지는 속성 설정을 할 수 있다.

  • app:showAsAction = "always" : 항상 보이게
  • app:showAsAction = "never" : 항상 overflow에 표시
  • app:showAsAction = "ifRoom" : 앱바에 공간이 있으면 표시
  • app:showAsAction = "withText" : 아이콘과 텍스트 함께 표시
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
로 할당해준다.

📌 Appbar 레이아웃으로 애니메이션 처리

CoordinatorLayout :

  • AppBarLayout 및 floatingActionButton과 같은 최상위 애플리케이션 위젯을 배치하기 위한 레이아웃

AppBarLayout :

  • 스크롤 동작을 감지하는 수직의 linearLayout
  • 하위 요소들은 layout_scrollFlags를 통해 원하는 스크롤 동작 지정 필요
  • CoordinatorLayout에서만 사용
    <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를 통해 결정한다.

🔑 CollapsingToolbarLayout

구글의 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으로 할때보다 미세하게 천천히 사라진다.

profile
컴퓨터와 교육 그사이 어딘가

0개의 댓글