[Android 기초] PopupWindow 활용하기

1. 목적 : PopupWindow의 사용법을 익히고 App.에 적당한 위치에 적용해 보자.

2. 개발 환경
 - PC : Windows 7, Android Studio 1.4.1(64-bit)
 - Phone : LG G pro Lollipop(API 21)

3. 참고자료
 1) Android Developers - PopupWindow Reference (http://developer.android.com/reference/android/widget/PopupWindow.html)
 2) App. 제작소 - [Android] PopupWindow 사용 예제 (http://makingappfor.blogspot.kr/2013/05/android-popupwindow.html)
 3) Android-er Blog - Display Spinner inside PopupWindow (http://android-er.blogspot.kr/2013/08/display-spinner-inside-popupwindow.html)

4. 과정
  PopupWindow example을 요약하자면 Popup window가 될 .xml layout을 구성하여 LayoutInflator로 불러 들여 현재 PopupWindow 변수를 통해 View 위에 그려주는 순서로 진행된다.

 1) activity_main.xml(main의 layout)에 클릭시 Popup Window를 불러들일 ImageButton을 추가한다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ImageButton
        android:id="@+id/exampleimg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:padding="20dp"
        android:src="@mipmap/ic_launcher"/>
</RelativeLayout>

 

 2) PopupWindow의 layout이 될 .xml file을 생성한다. 나 같은 경우에는 App의 종료 여부를 물을 창을 만들 것이므로 TextView 1개와 Button 2개를 다음과 같이 구성하였다. PopupWindow의 역할에 따라 위 참고자료와 같이 spinner를 선언하기도 하고 ImageView를 보여주게 할 수도 있다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="50dp">

    <TextView
        android:id="@+id/popupquestion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:padding="5dp"
        android:layout_margin="10dp"
        android:text="App.을 종료하겠습니까?"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="right"
        android:layout_below="@id/popupquestion">
    <Button
        android:id="@+id/yesbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="10dp"
        android:text="예"
        android:backgroundTint="@android:color/transparent" />

    <Button
        android:id="@+id/nobtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_toRightOf="@id/yesbtn"
        android:text="아니오"
        android:backgroundTint="@android:color/transparent"/>
    </LinearLayout>
</RelativeLayout>

 

 3) MainActivity.java에 ImageButton Click시 PopupWindow 생성되도록 다음과 같이 설계한다. 보다보면 앞에서 ListView, Gallery 의 Adapter에서 getView() 할 때와 비슷하게 main이 되는 layout에 inflator로 추가 layout을 받아와서 동작하게 하는 방식임을 알 수 있다.

public class MainActivity extends AppCompatActivity {

    public ImageButton exampleImg;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // ImageButton 생성 및 연결. OnClickListener()로 Click시 PopupWindow를 생성하도록 함.
        exampleImg = (ImageButton)findViewById(R.id.exampleimg);
        exampleImg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                final PopupWindow popupWindow = new PopupWindow(v); // onClick(View v)로 받아온 View 위에 PopupWindow 생성
                // PopupWindow에 반영할 layout을 다음과 같이 생성 및 연결
                LayoutInflater layoutInflater = (LayoutInflater) getBaseContext().getSystemService(LAYOUT_INFLATER_SERVICE);
                View popup = layoutInflater.inflate(R.layout.layout_popup, null);
                popupWindow.setContentView(popup);
                popupWindow.setWindowLayoutMode(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                popupWindow.setTouchable(true); // PopupWindow 위에서 Button의 Click이 가능하도록 setTouchable(true);
                Button yesBtn = (Button) popup.findViewById(R.id.yesbtn); // PopupWindow 상의 View의 Button 연결
                Button noBtn = (Button) popup.findViewById(R.id.nobtn);
                yesBtn.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        finish(); // App.의 종료
                    }
                });
                noBtn.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        popupWindow.dismiss(); // PopupWindow의 해제
                    }
                });
                popupWindow.showAsDropDown(v); // PopupWindow를 View 위에 뿌려 줌. 선언하지 않을 경우, PopupWindow가 보이지 않음
            }
        });
    }
}

(위 Code의 실행 결과)

    

[아니오] Button을 누를 경우	[예] Button을 누를 경우