[Android] Custom Dialog 만들기

결과

 

 

 

지난번에는 AlertDialog 에 대해 포스팅 하였습니다.

 

이번에는 확장성이 가능한 CustomDialog에 대해 알아가는 시간입니다.

 

 

CustomDialog를 사용하는 이유로는 이전의

 

AlertDialog보다 확장성이 높기 때문에 커스터마이징 하여 사용합니다.

 

 

편리성   :   AlertDialog > CustomDialog

 

확장성   :   AlertDialog < CustomDialog

 

 

MainActivity.class 에서 Dialog를 생성하겠습니다.

 

 

 

 

MainActivity.class

 

package com.yoohyeok.dialog;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private CustomDialog dialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button dialog = (Button) findViewById(R.id.btn);
        dialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Dialog();
            }
        });
    }

    public void Dialog(){
        dialog = new CustomDialog(MainActivity.this,
                "주의", // 제목
                "유혁의 Custom Dialog 만들기에 오신것을 환영합니다.", // 내용
                leftListener); // 왼쪽 버튼 이벤트
        // 오른쪽 버튼 이벤트

        //요청 이 다이어로그를 종료할 수 있게 지정함
        dialog.setCancelable(true);
        dialog.getWindow().setGravity(Gravity.CENTER);
        dialog.show();
    }
    //다이얼로그 클릭이벤트
    private View.OnClickListener leftListener = new View.OnClickListener() {
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "버튼을 클릭하였습니다.", Toast.LENGTH_SHORT).show();
            dialog.dismiss();
        }
    };
}

CustomDialog 부분이 정의되어 있지 않으므로 밑줄이 생깁니다.

 

Dialog() 메소드 보시면

 

제목과 내용을 넣어줄 수 있으며 클릭 이벤트 까지 정의합니다.

 

dialog.setCancelable(false); 로 설정한다면

 

onBackPressed() 뒤로가기 버튼이 동작하지 않습니다.

 

true면 뒤로가기하면 다이얼로그가 종료됩니다.

 

dialog.dismiss는 다이얼로그 종료 입니다.

 

 

 

CustomDialog.class

 

package com.yoohyeok.dialog;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.TextView;

/**
 * Created by yoohyeok on 2016-12-09.
 */

public class CustomDialog extends Dialog {

    private TextView mTitleView;
    private TextView mContentView;
    private Button mLeftButton;
    private Button mRightButton;
    private String mTitle;
    private String mContent;

    private View.OnClickListener mLeftClickListener;
    private View.OnClickListener mRightClickListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 다이얼로그 외부 화면 흐리게 표현
        WindowManager.LayoutParams lpWindow = new WindowManager.LayoutParams();
        lpWindow.flags = WindowManager.LayoutParams.FLAG_DIM_BEHIND;
        lpWindow.dimAmount = 0.8f;
        getWindow().setAttributes(lpWindow);

        setContentView(R.layout.custom_dialog);

        mTitleView = (TextView) findViewById(R.id.dialog_title);
        mContentView = (TextView) findViewById(R.id.dialog_text);
        mLeftButton = (Button) findViewById(R.id.dialog_btn);
        //mRightButton = (Button) findViewById(R.id.dialog_btn2);

        // 제목과 내용을 생성자에서 셋팅한다.
        mTitleView.setText(mTitle);
        mContentView.setText(mContent);

        // 클릭 이벤트 셋팅

        if (mLeftClickListener != null && mRightClickListener != null) {
            mLeftButton.setOnClickListener(mLeftClickListener);
            mRightButton.setOnClickListener(mRightClickListener);
        } else if (mLeftClickListener != null
                && mRightClickListener == null) {
            mLeftButton.setOnClickListener(mLeftClickListener);
        } else {

        }
    }

    // 클릭버튼이 하나일때 생성자 함수로 클릭이벤트를 받는다.
    public CustomDialog(Context context, String title, String content,
                        View.OnClickListener singleListener) {
        super(context, android.R.style.Theme_Translucent_NoTitleBar);
        this.mTitle = title;
        this.mContent=content;
        this.mLeftClickListener = singleListener;
    }


    // 클릭버튼이 확인과 취소 두개일때 생성자 함수로 이벤트를 받는다
    /*
    public CustomDialog(Context context, String title,
                        String content, View.OnClickListener leftListener,
                        View.OnClickListener rightListener) {
        super(context, android.R.style.Theme_Translucent_NoTitleBar);
        this.mTitle = title;
        this.mContent = content;
        this.mLeftClickListener = leftListener;
        this.mRightClickListener = rightListener;
    }
    */
}

 

다 연결되어 있는 소스이며

 

lpWindow.dimAmount = 0.8f;

 

뒷 배경 어두운 정도를 나타내는 수치입니다.

 

 

mRightClickListener 는 버튼이 한개이므로

 

사용하지 않았습니다.

 

버튼을 2개 사용하고싶으면 아래 주석부분이 생성자가 되어야하고

 

메인에서 mRightClickListener를 정의해 주어야합니다.

 

CustomDialog.xml 에서 버튼도 추가는 당연히 아시겠죠?

 

 

 

 

custom_dialog.xml 입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="250dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:gravity="center"
    android:weightSum="10"
    android:background="@drawable/dialog"
    android:orientation="vertical">

    <TextView
        android:id="@+id/dialog_title"
        android:layout_weight="4"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:textSize="50dp"
        android:textColor="#FF0000"
        android:textStyle="bold"
        android:text="Warnning" />

    <TextView
        android:layout_weight="4"
        android:id="@+id/dialog_text"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:textSize="20dp"
        android:textColor="#FFFFFF"
        android:text="유혁의 Custom Dialog 만들기에 오신것을 환영합니다." />

    <Button
        android:layout_weight="2"
        android:id="@+id/dialog_btn"
        android:layout_width="match_parent"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_height="0dp"
        android:text="확인" />


</LinearLayout>

 

Warnning! 주의

 

저는 주의 메세지입니다. 음 단어를 바꿔야하나

 

조금 거시기하네요 ..

 

background="@drawable/dialog" 부분이 에러가 나오는게 정상입니다.

 

 

 

 

activity_main.xml

 

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

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="다이어 로그"
        />

</LinearLayout>

 

 

 

 

한가지 더 추가하자면 CustomDialog의 테두리 보시면 노랑색 라인이 그려져 있습니다.

 

노랑색 라인부분을 추가하고 싶다면

 

경로 res/drawable/dialog.xml 추가 후

 

아래 소스를 복붙합니다.

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="3dp" android:color="#FFE400" />
            <solid android:color="#000000" />
        </shape>
    </item>
</layer-list>

 

 

background="@drawable/dialog" 부분의 에러가 없어집니다.

 

이제 빌드하시면 결과화면과 같이 나오게 될거에요!