티스토리 뷰

반응형

popup menu를 사용하면 원하는 곳에 메뉴를 띄울 수 있습니다.

 

버튼을 클릭하면 TextView에 popup menu가 뜨는 예제를 만들어 보겠습니다.

 

 

XML 수정하기

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">

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

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Popup Menu" />

</LinearLayout>

 

 

Menu 만들기

 

res > New > Android Resource File을 클릭합니다.

 

 

Resource type으로 Menu를 선택한 후에 생성합니다.

 

 

 

Menu XML 작성하기

 

menu xml의 내용을 아래와 같이 수정하였습니다.

 

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

    <item
        android:id="@+id/item1"
        android:title="1" />
    <item
        android:id="@+id/item2"
        android:title="2" />
    <item
        android:id="@+id/item3"
        android:title="3" />
</menu>

 

 

코드 작성하기

버튼을 클릭하면 TextView에 Popup Menu를 보여주기 위해서 이벤트 처리를 하겠습니다.

 

MainActivity에 아래 코드를 추가해주면 됩니다.

 

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button.setOnClickListener {
            val popup = PopupMenu(this, textView)

            menuInflater.inflate(R.menu.popup_menu, popup.menu)

            popup.show()
        }
    }
}

 

val popup = PopupMenu(this, textView)

menuInflater.inflate(R.menu.popup_menu, popup.menu)

popup.show()

 

textView라는 id를 가지고 있는 TextView를 PopupMenu로 생성해주고

menuInflater를 통해 xml을 등록해줍니다.

그리고 show를 통해 popup을 보여줍니다.

 

 

실행을 하면 아래와 같은 동작을 합니다.

 

 

 

Popup Menu에 이벤트 붙이기

 

MainActivity에 아래와 같은 PopupListener라는 inner class를 만들었습니다.

 inner class PopupListener: PopupMenu.OnMenuItemClickListener {

    override fun onMenuItemClick(item: MenuItem?): Boolean {
        when(item?.itemId) {
            R.id.item1 -> textView.text ="1번 클릭"
            R.id.item2 -> textView.text ="2번 클릭"
            R.id.item3 -> textView.text ="3번 클릭"
        }

        return false
    }
}

 

PopupMenu.OnMenuItemClickListener을 상속받고 있고 onMenuItemClick를 오버라이드 하여 이벤트를 만들었습니다.

 

 

마지막으로 버튼 클릭 이벤트의 코드를 아래와 같이 수정해주면 됩니다.

button.setOnClickListener {
    val popup = PopupMenu(this, textView)

    menuInflater.inflate(R.menu.popup_menu, popup.menu)

    popup.setOnMenuItemClickListener(PopupListener())

    popup.show()
}

 

setOnMenuItemClickListener를 통해 리스너를 등록해줍니다.

 

 

실행을 하고 팝업 메뉴를 클릭 시 아래와 같이 동작하게 됩니다.

반응형
댓글