앱 만들기/안드로이드

팝업 메뉴 만들기

나도 처음이야 2022. 7. 15.

안드로이드에서 하기와 같은 팝업 메뉴를 만들어 본다.

팝업 메뉴는 전 시간 살펴본 컨텍스트 메뉴 처럼 특정 View 를 꾸~욱 누르지 않더라도 

클릭만 하면 나오는 메뉴이다. 

뷰의 공간이 충분하다면 하기 처럼 아래쪽으로 나오며, 아래쪽 공간이 없다면 뷰의 위쪽에 나타난다.

 

1. MainActivity 의 기본 레이아웃에 버튼 뷰를 달아둔다.

   그리고, onClick 이벤트로 onClick() 함수를 설정해 둔다. 버튼을 누르면 팝업을 띄우기 위한 조치 이다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/Layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="PopupMenu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

2. 팝업 메뉴 구성을 위해 menu 폴더 및에 해당 xml 을 만든다.

res 폴더 밑에 menu 폴더를 만들고 xml 을 추가한다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/blue"
        android:icon="@drawable/blue"
        android:title="blue"/>
    <item android:id="@+id/red"
        android:icon="@drawable/red"
        android:title="red" />
    <item android:id="@+id/green"
        android:icon="@drawable/green"
        android:title="green" />
    <item android:id="@+id/orange"
        android:icon="@drawable/orange"
        android:title="orange" />
</menu>

아이템으로 각각의 메뉴를 구성했다.

 

3. 팝업 메뉴를 구성한다.

  - 버튼을 클릭시 호출되는 함수내에서 팝업 메뉴를 구성했다.

  - 인플레이트를 통해서 팝업 메뉴를 객체화 시킨다.

  - 팝업메뉴 클릭리스너 인터페이스를 익명 클래스로 구현한다.

public void onClick(View view) {
    PopupMenu popup = new PopupMenu(this, view);
    popup.getMenuInflater().inflate(R.menu.menu, popup.getMenu());
    popup.setOnMenuItemClickListener(new OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem menuItem) {
           switch(menuItem.getItemId()) {
               case R.id.red:
                   constraintLayout.setBackgroundColor(Color.parseColor("red"));
                   return true;
               case R.id.blue:
                   constraintLayout.setBackgroundColor(Color.parseColor("blue"));
                   return true;
               default:
                   return false;
           }
        }
    });
    popup.show();
}

위 예제에서는 두개의 색상값에 대해서만 처리를 했다.

red 를 선택시 결과는 하기와 같다.

 

하기는 안드로이드 개발자 사이트의 팝업메뉴 내용이다.

구글에 한가지 바라는 점이 있다면, 자연스러운 한글 번역까지는 아니더라도 예제를 순차적으로 혹은 전체 풀소스를 넣어서 설명을 해주면 좋을거 같다. 구글 안드로이드 개발자 페이지는 참고는 하지만 그 자체만으로 다 이해하기는 힘든게 사실이다. 

 

옵션 메뉴 만들기

상태표시줄에 옵션 메뉴를 만들어 보겠습니다. 옵션메뉴를 선택하면, 화면이 옵션메뉴에 따라 색상이 변경됩니다. 1. 옵션메뉴를 XML로 구성하기 위해서, res-menu 폴더를 만듭니다. res 폴더에서 마

soo0100.tistory.com

 

반응형

댓글