[Android][Kotlin] 팝업 메뉴 Popup Menu 구현하기

블로그 이사했습니다!

 

👇 블로그 이전 공지 👇

블로그 이전 안내 (tistory.com)

 

 

👇 새 블로그에서 글 보기 👇

[Android] 팝업 메뉴 Popup Menu 구현하기 — Win Record (tistory.com)

[Android] 팝업 메뉴 Popup Menu 구현하기

 

 

 

---

 

 

Popup Menu란?

특정 뷰에 고정된 모달 메뉴.

뷰를 클릭 시 메뉴가 나타난다.

해당 뷰 아래에 공간이 있으면 아래에, 없다면 위에 메뉴가 나타난다.

구현 순서

1. 메뉴 레이아웃 만들기
2. 팝업 메뉴 구현하기
   1. 팝업 보여주는 메소드 만들기
   2. 뷰 클릭 시 팝업 보여주는 메소드 실행하게 하기
   3. 각 메뉴 아이템 클릭 시 동작 정의하기

 

---

메뉴 레이아웃 (menu_world.xml)

res > menu 디렉토리 안에 menu_world.xml 파일을 생성한다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/world"
        android:title="world" />
    <item
        android:id="@+id/world2"
        android:title="world2" />
    <item
        android:id="@+id/world3"
        android:title="world3" />
</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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <Button
        android:id="@+id/btn_menu1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="context menu" />
 
 
    <Button
        android:id="@+id/btn_menu2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="pop up menu" />
        
</LinearLayout>

 

1. showPopup() 구현

팝업 메뉴를 생성하고 보여주는 메소드를 만들어준다.

// in MainActivity

//    팝업 메뉴 보여주는 커스텀 메소드
private fun showPopup(v: View) {
    val popup = PopupMenu(this, v) // PopupMenu 객체 선언
    popup.menuInflater.inflate(R.menu.menu_world, popup.menu) // 메뉴 레이아웃 inflate
    popup.show() // 팝업 보여주기
}

 

2. 뷰 클릭 시 showPopup() 실행되게 하기

btn_menu2 버튼 클릭 시 팝업 메뉴가 보여지게 한다.

// in MainActivity

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
    ...
    binding.btnMenu2.setOnClickListener { showPopup(binding.btnMenu2) }
}

 

3. 메뉴 아이템 클릭 시 동작 구현

아이템 클릭 리스너 구현을 할 때 OnMenuItemClickListener 사용한다.

따라서 PopupMenu.OnMenuItemClickListener 인터페이스를 implemet 해준다.

class MainActivity : AppCompatActivity(), PopupMenu.OnMenuItemClickListener {
...

이후 인터페이스의 OnMenuItemClickListener() 메소드를 구현한다.

// in MainActivity

// 팝업 메뉴 아이템 클릭 시 실행되는 메소드
override fun onMenuItemClick(item: MenuItem?): Boolean {
    when (item?.itemId) { // 메뉴 아이템에 따라 동작 다르게 하기
        R.id.world -> Toast.makeText(this, "hello world!", Toast.LENGTH_LONG).show()
        R.id.world2 -> Toast.makeText(this, "the second world", Toast.LENGTH_LONG).show()
        R.id.world3 -> Toast.makeText(this, item.title, Toast.LENGTH_LONG).show()
    }

    return item != null // 아이템이 null이 아닌 경우 true, null인 경우 false 리턴
}

showPopup() 메소드 중 팝업 메뉴를 세팅하는 부분에 아이템 클릭 리스너를 달아준다.

// in MainActivity

//    팝업 메뉴 보여주는 커스텀 메소드
private fun showPopup(v: View) {
    ...
    popup.setOnMenuItemClickListener(this) // 메뉴 아이템 클릭 리스너 달아주기
    popup.show() // 팝업 보여주기
}

 

메인 액티비티 전체 코드

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import android.view.View
import android.widget.PopupMenu
import android.widget.Toast
import com.example.testmenu.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity(), PopupMenu.OnMenuItemClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.btnMenu2.setOnClickListener { showPopup(binding.btnMenu2) }
    }

    //    팝업 메뉴 보여주는 커스텀 메소드
    private fun showPopup(v: View) {
        val popup = PopupMenu(this, v) // PopupMenu 객체 선언
        popup.menuInflater.inflate(R.menu.menu_world, popup.menu) // 메뉴 레이아웃 inflate
        popup.setOnMenuItemClickListener(this) // 메뉴 아이템 클릭 리스너 달아주기
        popup.show() // 팝업 보여주기
    }

    // 팝업 메뉴 아이템 클릭 시 실행되는 메소드
    override fun onMenuItemClick(item: MenuItem?): Boolean {
        when (item?.itemId) { // 메뉴 아이템에 따라 동작 다르게 하기
            R.id.world -> Toast.makeText(this, "hello world!", Toast.LENGTH_LONG).show()
            R.id.world2 -> Toast.makeText(this, "the second world", Toast.LENGTH_LONG).show()
            R.id.world3 -> Toast.makeText(this, item.title, Toast.LENGTH_LONG).show()
        }

        return item != null // 아이템이 null이 아닌 경우 true, null인 경우 false 리턴
    }
}

showPopup() 메소드가 필요 없는 경우, onCreate()에서 팝업메뉴 객체를 세팅한 뒤, 필요한 곳에서 popup.show()를 해주면 된다.

 

위 코드를 통해 다음과 같이 팝업 메뉴가 구현된다.