안드로이드 24) JetPack의 View (2)

Toolbar

1. Toolbar

• 툴바는 액션바를 개발자 뷰로 이용하기 위한 뷰
• 툴바와 액션바는 목적이 동일
• 액션바는 액티비티 윈도우가 자동 출력시켜 주는 액티비티의 구성요소
• 툴바는 개발자가 직접 핸들링하는 뷰
• 사용자가 Content 영역을 스크롤 할 때 같이 스크롤 되도록 할 때와 같이 개발자가 핸들링 해야할 때 사용

2. Toolbar 사용 방법
1) 액션바가 출력되지 않게 설정

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.AndroidEx"
    parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...

• values>themes.xml에서 액션바가 화면에 출력되지 않게 설정

2) XML 파일에 Toolbar 등록

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.Toolbar.Primary" />

3) Toolbar 적용

setSupportActionBar(binding.toolbar)

• setSupportActionBar(binding.toolbar) 구문에 의해 액티비티의 액션바에 적용되는 내용(title, action item, menu 등)이 툴바에 적용

FloatingActionButton

1. ExtendedFloatingActionButton

• FloatingActionButton(FAB)은 화면에 떠 있는 듯한 버튼을 제공하는 뷰
• FloatingActionButton 뷰가 제공되었고 많이 사용
• ExtendedFloatingActionButton은 FloatingActionButton과 동일한 목적이나 버튼에 문자열까지 출력이 가능

2. ExtendedFloatingActionButton 사용 방법
1) 레이아웃 등록

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

• icon 속성으로 이미지를 지정하면 이미지를 둥그렇게 감싸서 화면에 떠있는듯 하게 출력
• text 정보를 지정하지 않고 icon 정보만 지정되면 둥근 모양

2) Activity에서 Click 이벤트 작성

binding.fab.setOnClickListener {
    when(binding.fab.isExtended) {
        true -> binding.fab.shrink()
        false -> binding.fab.extend()
    }
}

• 코드에서 터치하면 확장되어 문자열까지 나오게 하거나 축소되어 아이콘만 나오게 하거나 등의 처리가 가능

DrawerLayout

1. DrawerLayout

• DrawerLayout은 액티비티 화면에 안보이던 내용이 왼쪽 혹은 오른쪽에서 유저 스와이프 이벤트에 의해 끌리면서 나타나는 기능을 제공

2. DrawerLayout 사용 방법
1) 레이아웃 등록

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <LinearLayout ...>
        ...
    </LinearLayout>
    
    <TextView
        android:layout_gravity="start"/>
</androidx.drawerlayout.widget.DrawerLayout>

• 레이아웃 XML 파일에서 Drawer가 출력되어야 하는 곳의 루트 태그를 DrawerLayout으로 선언
• DrawerLayout 하위에는 두 개의 뷰가 선언
  • 첫번째 하위 태그 부분을 액티비티 화면에 출력
  • 두번째 하위 태그 부분이 안보이다가 끌려 나오며 출력
• android:layout_gravity 속성값을 이용해 화면에서 나오는 방향 지정
  • left, right, start를 지정
  • start 값을 주면 언어의 쓰는 방향에 따라 left, right가 자동 결정

2) 토글 버튼

toggle = ActionBarDrawerToggle(this, binding.drawer, R.string.drawer_opened, R.string.drawer_closed)

supportActionBar?.setDisplayHomeAsUpEnabled(true)
// 스와이프로 열고 닫을 때와 토글 버튼으로 열고 닫을 때를 싱크 맞추기 위한 것
toggle.syncState()

// 토글 버튼이 메뉴 취급이 되어서 메뉴에서 실행되는 onOptionsItemSelected 함수가 실행
// onOptinosItemSelected가 토글에서 실행되면 메뉴에서의 로직이 실행되지 않도록 처리
override fun onOptionsItemSelected(item:MenuItem): Boolean {
    if(toggle.onOptionItemSelected(item)) {
        return true
    }
    return super.onOptionsItemSelected(item)
}

• 스와이프를 통해 DrawerLayout이 나오게 할 수도 있지만, 보통 툴바 영역에 토글 버튼을 같이 제공함
• drawer 토글 버튼은 ActionBarDrawerToggle 클래스에서 제공

3. NavigationView

<com.google.android.material.navigation.NavigationView
    android:id="@+id/main_drawer_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    // header 부분의 xml 파일 지정
    app:headerLayout="@layout/navigation_header"
    // menu 부분의 xml 파일 지정
    app:menu="@menu/menu_navigation" />

• 위와 같이 항목을 나열하는 화면을 구성할 때는 NavigationView를 이용하면 된다
• NavigationView는 DrawerLayout에 의해 끌리면서 출력되는 부분을 위한 뷰