[41일차 Android] ToolBar

 

 

 

출처 : 안드로이드 앱스쿨 2기 윤재성 강사님 수업 PPT

 

 

 

📖 ToolBar

• 안드로이드에서 ActionBar를 보다 자유롭게 사용할 수 있도록 Toolbar라는 View를 제공하고 있다.
• Toolbar를 이용해 탭 등 다양한 기능을 이용할 수 있도록 제공하고 있으며 기본적인 부분은 ActionBar와 동일하다.

 

 

예제 코드

menu/main_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item1"
        android:icon="@android:drawable/ic_menu_add"
        android:title="메뉴1"
        app:showAsAction="always" />
    <item
        android:id="@+id/item2"
        android:icon="@android:drawable/ic_menu_search"
        android:title="메뉴2"
        app:showAsAction="always" />
</menu>

 

 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="SecondActivity 실행" />
</LinearLayout>

 

 

 

activity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".SecondActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="SecondActivity"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />
</LinearLayout>

 

 

 

MainActivity.kt

class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        activityMainBinding.run {
            toolbar.run {
                // 타이틀
                title = "ToolBar"
                // 타이틀 글자 색상
                setTitleTextColor(Color.WHITE)
                // 옵션 메뉴를 구성
                inflateMenu(R.menu.main_menu)
                
                // 상단 메뉴를 눌러주면 동작하는 리스너
                setOnMenuItemClickListener {
                    // 사용자가 누른 메뉴의 id로 분기한다.
                    when(it?.itemId){
                        R.id.item1 -> {
                            textView.text = "메뉴1을 눌렀습니다."
                        }
                        R.id.item2 -> {
                            textView.text = "메뉴2를 눌렀습니다."
                        }
                    }
                    false
                }
            }
			
            // Activity 이동
            button.setOnClickListener {
                val newIntent = Intent(this@MainActivity, SecondActivity::class.java)
                startActivity(newIntent)
            }
        }
    }
}

• ToolBar는 setOnMenuItemClickListener를 이용하여 메뉴 선택 시의 기능을 정의한다.
  • ActionBar는 onOptionsItemSelected 함수를 이용하여 메뉴 선택 시의 기능을 정의한다.

 

 

 

SecondActivity.kt

class SecondActivity : AppCompatActivity() {

    lateinit var activitySecondBinding: ActivitySecondBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activitySecondBinding = ActivitySecondBinding.inflate(layoutInflater)
        setContentView(activitySecondBinding.root)

        activitySecondBinding.run {
            toolbar2.run {
                title = "SecondActivity"
                setTitleTextColor(Color.WHITE)
                
                // back버튼 아이콘 표시
                setNavigationIcon(androidx.appcompat.R.drawable.abc_ic_ab_back_material)

                // back버튼 아이콘 색상 변경
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q){
                    navigationIcon?.colorFilter = BlendModeColorFilter(Color.WHITE, BlendMode.SRC_ATOP)
                } else {
                    navigationIcon?.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP)
                }
                // back버튼 리스너
                setNavigationOnClickListener {
                    finish()
                }
            }
        }
    }
}

• ToolBar는 setNavigationIcon()을 이용하여 버튼을 생성한다.
  • ActionBar는 supportActionBar?.setHomeButtonEnabled(true)를 이용하여 버튼을 생성한다.

 

• ToolBar는 setNavigationOnClickListener를 이용하여 버튼의 기능을 정의한다.
  • ActionBar는 onOptionsItemSelected 함수를 이용하여 버튼의 기능을 정의한다.

 

 

 

결과