[Android] Dialog 사용하기

무더위로 고생했던 여름이 언제였다는 듯이 완연한 가을이 왔네요!

이러다 금세 또 추워져 겨울이 오겠죠...? 이번 겨울은 유난히 더웠던 여름만큼 엄청 춥다고 하네요.. (덜덜)

다들 몸 관리 잘하시길 바랄게요.

이번 포스팅 주제는 다이얼로그 사용법에 대해 알아보려 합니다. 다이얼로그는 형태도 제각각에 사용법도 여러가지인데요, 

여기서는 커스텀 다이얼로그를 생성하여 적용하는 방법에 대해 알아보도록 하겠습니다.

---

    

여러 형태의 다이얼로그 (Bflix App 內)

앱을 사용하시다 보면 위의 그림과 비슷한 화면을 많이 접해보셨을 텐데요, 중앙에 화면 위에 떠있는 창을 다이얼로그라고 합니다.

다이얼로그는 필요에 따라 다양한 형태로 사용이 가능하답니다. 여기서는 다이얼로그를 어떻게 생성하고, 원하는 모양으로 커스텀하는 방법을 예제를 통해서 알아보도록 하겠습니다.

Dialog 사용하기

우선은 다이얼로그에 사용 할 레이아웃을 먼저 구성해볼까요?

dialog_end.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="300dp"

    android:layout_height="wrap_content"

    android:orientation="vertical">

    <TextView

        android:layout_width="match_parent"

        android:layout_height="40dp"

        android:background="#424242"

        android:gravity="center"

        android:text="알　　림"

        android:textColor="#ffffff"

        android:textSize="16dp"

        android:textStyle="bold" />

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginBottom="60dp"

        android:layout_marginTop="60dp"

        android:gravity="center"

        android:text="앱을 종료하시겠습니까?"

        android:textSize="16dp" />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:orientation="horizontal">

        <TextView

            android:id="@+id/btn_cancel"

            android:layout_width="wrap_content"

            android:layout_height="40dp"

            android:layout_weight="1"

            android:background="#424242"

            android:clickable="true"

            android:gravity="center"

            android:text="취소"

            android:textColor="#ffffff"

            android:textSize="16dp"

            android:textStyle="bold" />

        <TextView

            android:id="@+id/btn_ok"

            android:layout_width="wrap_content"

            android:layout_height="40dp"

            android:layout_weight="1"

            android:background="#424242"

            android:clickable="true"

            android:gravity="center"

            android:text="확인"

            android:textColor="#ffffff"

            android:textSize="16dp"

            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

타이틀과 본문, 하단의 두 개의 버튼으로 구성해 보았습니다. 원하시는 형태로 작성하시면 되겠습니다.

EndDialog.java

package rebuild.com.dialog;

import android.app.Dialog;

import android.content.Context;

import android.os.Bundle;

import android.support.annotation.NonNull;

import android.view.View;

import android.widget.TextView;

public class EndDialog extends Dialog implements View.OnClickListener {

    private Context mContext;

    private TextView btn_cancel;

    private TextView btn_ok;

    public EndDialog(@NonNull Context context) {

        super(context);

        mContext = context;

    }

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.dialog_end);

        btn_cancel = (TextView) findViewById(R.id.btn_cancel);

        btn_ok = (TextView) findViewById(R.id.btn_ok);

        btn_cancel.setOnClickListener(this);

        btn_ok.setOnClickListener(this);

    }

    @Override

    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.btn_cancel:

                dismiss();

                break;

            case R.id.btn_ok:

                ((MainActivity) mContext).finish();

                break;

        }

    }

}

크게 어려운 부분이 없습니다. Dialog를 상속받아 작성하였으며, 레이아웃에 작성하였던 두 개의 버튼에 리스너를 달아주었습니다.

이번에는 MainActivity에서 다이얼로그를 호출하는 부분을 작성해 보겠습니다.

레이아웃에 버튼을 추가하여 버튼 클릭 시, 다이얼로그가 호출되도록 꾸며 보겠습니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

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

    tools:context="rebuild.com.dialog.MainActivity">

    <Button

        android:id="@+id/btn_finish"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:text="앱 종료"

        android:textSize="18dp" />

</RelativeLayout>

MainActivity.java

package rebuild.com.dialog;

import android.content.Context;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Context mContext;

    private Button btn_end;

    private EndDialog mEndDialog;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        btn_end = (Button) findViewById(R.id.btn_finish);

        btn_end.setOnClickListener(this);

    }

    @Override

    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.btn_finish:

                mEndDialog = new EndDialog(this);

                mEndDialog.setCancelable(false)

                mEndDialog.show();

                break;

        }

    }

}

사실 중요한 부분은 위에서 다이얼로그 객체를 생성하고 show()로 화면에 보여지도록 호출하는부분입니다.

setCancelable(boolean flag)는 flag의 값에 따라 다이얼로그 화면 밖 터치 시에 다이얼로그가 닫힐지에 대한 옵션을 설정할 수 있습니다.

실행화면

---

간단하게 다이얼로그를 커스텀하는 방법에 대해 포스팅 하였는데요. 위의 방법 외에도 다른 방법으로도 구현이 가능하며, 포스팅의 내용이 꼭 정답이 아니라는 것은 알아두시길 바랍니다. 다만 이런 내용도 있으니, 도움이 되셨으면 좋겠습니다.!