IT/안드로이드+JAVA

[안드로이드] 커스텀 다이얼로그 예제

안경 쓴 귀니 2016. 9. 5. 13:45
반응형




[안드로이드] 커스텀 다이얼로그 예제







안드로이드(Android) 사용자정의 다이얼로그(Custom Dialog) 만드는 방법

 

환경 : Eclipse Mars, Android 4.2.2

 

이번에는 다이얼로그 클래스를 상속받아서 직접 만들어 보겠습니다기존에 제공하는 팝업창이 아닌 직접 레이아웃을 디자인 하고 싶다면 클래스를 직접 만들어야 겠죠.

 

 

1. 사용자정의 다이얼로그 만들기

 

▼ 사용자정의 다이얼로그는 android.app.Dialog 클래스를 상속받습니다그리고 생성자 함수에서 메인 Activity  Context 객체와 다이얼로그에 쓰일 제목내용버튼 두개에 대한 이벤트 객체를 받을 것입니다.  이렇게 받은 4개는 다이얼로그 화면에 나타낼 위젯에 셋팅하시면 되겠죠아래 그림과 같이 생성자가 두개인 것은 다이얼로그에 버튼이 하나 혹은 두개일수 있기 때문입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 클릭버튼이 하나일때 생성자 함수로 클릭이벤트를 받는다.
public CustomDialog(Context context, String title,
        View.OnClickListener singleListener) {
    super(context, android.R.style.Theme_Translucent_NoTitleBar);
    this.mTitle = title;
    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;
}

 

▼ 이렇게 생성자 함수로 데이터를 받은후 onCreate() 함수에서 다이얼로그 위젯들에 값을 셋팅합니다제목과 내용두개의 버튼 이벤트를 셋팅합니다이렇게 이벤트를 셋팅해 두면 메인 Activity 클릭 이벤트에서 제어가 가능하겠죠.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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;
 
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.activity_custom_dialog);
 
        mTitleView = (TextView) findViewById(R.id.txt_title);
        mContentView = (TextView) findViewById(R.id.txt_content);
        mLeftButton = (Button) findViewById(R.id.btn_left);
        mRightButton = (Button) findViewById(R.id.btn_right);
 
        // 제목과 내용을 생성자에서 셋팅한다.
        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,
            View.OnClickListener singleListener) {
        super(context, android.R.style.Theme_Translucent_NoTitleBar);
        this.mTitle = title;
        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;
    }
}

 

▼ 아래는 다이얼로그에 쓰인 전체 레이아웃 입니다.

activity_custom_dialog.xml

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical" >
 
    <LinearLayout
        android:layout_width="300dip"
        android:layout_height="200dip"
        android:background="@android:color/darker_gray"
        android:orientation="vertical" >
 
        <TextView
            android:id="@+id/txt_title"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="15sp" />
 
        <TextView
            android:id="@+id/txt_content"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="25sp" />
 
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dip"
            android:gravity="center"
            android:orientation="horizontal" >
 
            <Button
                android:id="@+id/btn_left"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="확인" />
 
            <Button
                android:id="@+id/btn_right"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="취소" />
        </LinearLayout>
    </LinearLayout>
 
</LinearLayout>

 

2. 다이얼로그를 실행하는 메인 Activity

 

▼ 메인 Activity 화면에서는 버튼 하나를 만들어서 클릭했을 때 위에서 만든CustomDialog 객체를 생성하고 show() 함수로 띄웁니다. CustomDialog 객체를 생성할 때 생성자의 인수로 제목내용두개의 버튼 이벤트 객체를 넘겼습니다이렇게 넘겨 두면 메인에서 다이얼로그를 제어 할수 있는 것이죠.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
 
public class MainCustomDialog extends Activity {
 
    private CustomDialog mCustomDialog;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_dialog);
    }
 
    public void onClickView(View v) {
        switch (v.getId()) {
        case R.id.bt_main:
            mCustomDialog = new CustomDialog(this,
                    "[다이얼로그 제목]", // 제목
                    "다이얼로그 내용 표시하기", // 내용
                    leftListener, // 왼쪽 버튼 이벤트
                    rightListener); // 오른쪽 버튼 이벤트
            mCustomDialog.show();
            break;
        }
    }
 
    private View.OnClickListener leftListener = new View.OnClickListener() {
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "왼쪽버튼 클릭",
                    Toast.LENGTH_SHORT).show();
            mCustomDialog.dismiss();
        }
    };
 
    private View.OnClickListener rightListener = new View.OnClickListener() {
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "오른쪽버튼 클릭",
                    Toast.LENGTH_SHORT).show();
        }
    };
 
}

 

▼ 아래는 메인 Activity 전체 레이아웃입니다버튼하나만 추가 되어 있습니다.

activity_main_dialog.xml

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#3F0099"
        android:gravity="center"
        android:paddingBottom="@dimen/abc_action_bar_icon_vertical_padding"
        android:paddingTop="@dimen/abc_action_bar_icon_vertical_padding"
        android:text="사용자 정의 다이얼로그 테스트 "
        android:textColor="#FFFFFF" />
 
    <Button
        android:id="@+id/bt_main"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="onClickView"
        android:text="커스텀 Dialog 클릭!!" />
 
</LinearLayout>

 

안드로이드(Android) 사용자정의 다이얼로그(Custom Dialog) 만드는 방법




[ 출처 : http://mainia.tistory.com/2021 ]




반응형