(다이얼로그) Adroid Studio custom dialog 생성하기

(다이얼로그) Adroid Studio custom dialog 생성하기

매번 커스텀 다이얼로그를 생성하고 오픈하고 띄우고 하기 귀찮다. 클래스로 정리 해 두고 같은걸로 두고두고 쓰고싶다. 오픈도 간단하게 하고싶고.. 물론 내가 빠가라서 여태 쓸 때마다 새로 정의하고 뷰마다 이름 정해주고 한거지만 ㅇㅅaㅇ 담엔 그냥 내 블로그에 있는거 긁어쓰잔 의미로 정리해야지 싶다. -다른말로 안스 새 버전이 나왔는데 업데이트 할까말까...-

다이얼로그 레이아웃을 먼저 작성 해 준다.

dialog_edit_box.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lay_background"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/scrim">

    <RelativeLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/round_layout_index">

        <TextView
            android:id="@+id/txt_dialog_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/view.padding.default.small"
            android:gravity="center"
            android:text="닉네임"
            android:textColor="@color/primary.blue"
            android:textSize="@dimen/font_large"
            android:textStyle="bold" />


        <EditText
            android:id="@+id/txt_modify_edit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txt_dialog_title"
            android:layout_margin="@dimen/view.padding.default.small" />


        <ImageButton
            android:layout_below="@+id/txt_modify_edit"
            android:id="@+id/btn_modify_done"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:scaleType="fitCenter"
            android:src="@mipmap/ic_done_white"
            android:textColor="@color/primary.white"/>

    </RelativeLayout>


</RelativeLayout>

대에충.. 레이아웃 생김새는 이러하다.

그렇다면 이제 해당 다이얼로그만을 위한 클래스를 작성한다. 클래스에는 onCreate외에도 다이얼로그에 들어가는 내용들에 대하여 getter, setter및 생성자가 작성된다. 예제를 따라하는 의미면 그냥 컨트롤C 컨트롤V 해서 쓰자!

EditBoxDialog.java

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.TextView;

import butterknife.Bind;
import butterknife.ButterKnife;

/**
 * Created by kjy on 2016-04-11.
 */
public class EditBoxDialog extends Dialog {

    public EditBoxDialog(Context context) {
        super(context);
    }

    @Nullable @Bind(R.id.btn_modify_done)
    ImageButton btn_modify_done;

    @Nullable @Bind(R.id.txt_modify_edit)
    EditText txt_modify_edit;

    @Nullable @Bind(R.id.txt_dialog_title)
    TextView txt_dialog_title;

    private String mode;
    private String text;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.dialog_edit_box);
        ButterKnife.bind(this);

        btn_modify_done.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                text = txt_modify_edit.getText().toString();
                mode = txt_dialog_title.getText().toString();
                dismiss();
                return false;
            }
        });
    }

    public String getMode() {
        return mode;
    }

    public void setMode(String mode) {
        this.mode = mode;
        txt_dialog_title.setText(mode);
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
        txt_modify_edit.setText(text);
        txt_modify_edit.setFocusable(true);
    }
}

소스에 대해서 설명하자면 일단 ButterKnife쓰고있어서 따로 객체마다 연결 해 주는 부분이 없다. 이 부분은 알아서 findbyid사용해서 onCreate에서 선언 해 주자. 만약 똑같이 쓰고있다면 그대로 컨트롤C 컨트롤V 하면된다. 혹은 ButterKnife를 쓰고싶다면 여기를 눌러서 gradle에 추가 해 주자. 

setter부분에서는 가져온 값을 그대로 다이얼로그에 적용까지 시켜주게 설정 해 두었다. 똑같은 디자인을 가지고 여러곳에서 텍스트 입력을 받을 계획이기에 하나로 여러번 쓰고싶다. 그리고 마지막에 확인 버튼을 눌렀을 때 리스너를 달아주었다. 터치나 클릭이나... ㅇㅅaㅇ.....클래스파일은 이쯤 해 두고 이제 메인 화면에서 불러보자. 

MainActivity.java

import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends BaseActivity {

    @Nullable @Bind(R.id.txt_user_name)
    TextView txt_user_name;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_profile);
        ButterKnife.bind(this);
    }

    @OnClick(R.id.txt_user_name)
    public void txt_user_name(){
        final EditBoxDialog dialog = new EditBoxDialog(this);

        dialog.setOnShowListener(new DialogInterface.OnShowListener() {
            @Override
            public void onShow(DialogInterface dia) {
                dialog.setMode("닉네임");
                dialog.setText("예제");
            }
        });
        dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
            @Override
            public void onDismiss(DialogInterface dia) {
                txt_user_name.setText(dialog.getText());
            }
        });

        dialog.show();
    }
}

ㅉ ㅏ라잔. 이렇게하면 끝. 알아서 다이얼로그가 닫힐 때, 다이얼로그 내의 getter을 이용하여 데이터를 가져오고, 그 데이터를 다시 현재 액티비티에 뿌려준다. 결과화면은 모... 귀찮으니 패스..