[Android] 커스텀 다이얼로그(Custom Dialog)

21.06.18

공부한 것을 정리하는 용도의 글이므로 100% 정확하지 않을 수 있습니다.
참고용으로만 봐주시고, 내용이 부족하다고 느끼신다면 다른 글도 보시는 것이 좋습니다.
+ 틀린 부분, 수정해야 할 부분은 언제든지 피드백 주세요. 😊

                                                 by. ryalya

---

다이얼로그(Dialog)란?

Dialog는 사용자 기기의 전체 화면을 가리지 않는 대화상자로서 사용자에게 경고, 알림을 알릴 수 있고, 데이터를 받아올 수 있는 클래스를 말한다.

일반적인 AlertDialog는 타이틀, 메시지, 버튼으로만 구성할 수 있기 때문에 원하는 형식으로 Dialog창을 구현하기 위해서는 직접 커스텀하는 과정이 필요하다.

Dialog 구현은

Activity 내에서 객체로 간단하게 구현할 수도 있지만, 내가 여러가지 방법으로 구현해본 결과 따로 클래스를 만들어서 관리해주는 것이 만들 때는 귀찮지만 디버깅이나 수정 등 유지보수에 용이하다.

객체로 간단하게 구현하고자 한다면 Activity내에서 메소드를 사용하여 구현해줄 수 있다.

아래는 버튼 클릭 시, 다이얼로그 창을 띄워주는 예시이다.

🔹 Activity 내 객체로 구현

onCreate()

Button dialog = (Button) findViewById(R.id.btnDialog);
        dialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ShowDialog();
            }
        });

public void ShowDialog()

 public void ShowDialog(){
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("타이틀 입력하는 곳");
        builder.setMessage("내용 입력하는 곳");
        builder.setPositiveButton("우측 버튼",
                new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                       구현하고 싶은 내용 블라블라~~                    }
                });
        builder.setNegativeButton("좌측 버튼",
                new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                       구현하고 싶은 내용 블라블라~~~
                    }
                });
        builder.show();
    }

onCreate()에서 버튼 클릭시 ShowDialog()라는 메서드를 실행한다.

ShowDialog()메서드를 확인하면 위와 같이 타이틀, 메세지, 버튼 등을 구성할 수 있으며 버튼 클릭 이벤트 역시 구현할 수 있다.

하지만

위의 방법은 알림을 정말 간단하게만 표현할 때 사용하는 것을 추천한다.

일반 AlertDialog가 아닌 Custom Dialog도 위의 방법처럼 간단하게 구현할 수는 있다.

하지만 그렇게 만들어진 Dialog는 여러개의 데이터 값 전달, 웹뷰 연결 등 다른 방식으로 확장하여 사용하기에는 작동이 안될 확률이 높다.

(내가 간단하게 구현하려다가 작동 안되는 것 때문에 구글링의 늪에 빠졌기 때문..😂 결국 해결 못하고 따로 만들었다..)

가장 좋은 방법은 위에서 말한 것 처럼 커스텀 다이얼로그 클래스나 액티비티를 따로 만들어서 관리해주는 것!!!!!

🔹 Custom Dialog

CustomDialog의 장점은 확장성이 있다는 것!

버튼을 그림으로 넣고 싶고, 버튼 위치, 텍스트 위치도 변경하고 싶고, 이것 저것 내 마음에 드는 Dialog창을 원한다면 Customizing은 필수다.

Custom Dialog의 경우에는
XML을 만들어서 화면으로 띄워주는 방법이 있고, Activity를 Dialog처럼 활용하기 위해 themes를 직접 만들어주는 방법도 있다.

Java Class로 관리할 수도 있지만 나는 Intent를 사용하여 데이터 값을 전달하려 했고, Intent는 Activity에서만 사용이 가능하기때문에 Activity를 사용하는 방법을 추천한다.

(이 부분은 사실 내가 시도해본 결과 Java Class내에서는 getIntent()가 빨간줄로 계속 오류가 떴다....
구글링을 해보고 다양한 방법을 시도해봤지만 해결 방법을 아직 찾지 못함..
혹시 제가 잘못 알고 있다면 댓글로 알려주면 감사하겠습니다!😊)

내가 구현하려고 한 것은?

나는 특정 버튼을 눌렀을 때, Dialog창을 띄우는데 이 Dialog 화면 자체를 WebView로 구현하려고 했다.

필요 조건은

• 값을 넘길 수 있어야 한다. (Intent 사용)
• Dialog 형식이어야 한다. (전체 화면 사용X, Contents만큼만 사용
• 버튼으로 해당 Dialog와 다른 Dialog가 화면 전환이 가능해야 한다.

위의 내용을 여러 방법으로 시도해봤는데,
지금까지 구현한 것은 아래와 같다.

MainActivity (버튼 有)
   ↓
버튼 클릭
   ↓
Dialog로 사용할 Sub Activity(웹뷰, 버튼 有)이동
(MainActivity에 있는 데이터를 SubActivity로 Intent 사용하여 넘김)
   ↓
버튼 클릭 <----------------------------------- 구현 완료
   ↓
QR 코드 화면 Activity로 변환

현재는 WebView를 Dialog형식으로 띄워준 것 까지 구현을 완료했다.

🔹 구현 방식

나는 Dialog화면을 원하는 대로 구현하기 위해 커스텀했는데, 먼저 theme를 수정했다.

먼저, Activity를 Dialog로 사용하는 간단한 방법은 아래와 같다.

AndroidManifest.xml 파일에서 Dialog로 사용할 Activity를 아래 처럼 바꿔주면 간단하게 Dialog로 변환하여 사용할 수 있다.

<activity android:name=".CustomDialog"
          android:theme="@android:style/Theme.Dialog"
          ></activity>

하지만 사용하는 app Library version에 따라 해당 방법은 아래 에러를 일으켜 앱이 작동하지 않을 수 있다.

you need to use a theme.appcompat theme (or descendant) with this activity

어차피 나는 Alert Title도 없애는 등
커스텀할 요소들이 있었기 때문에
res > theme.xml 에서 custom themes를 지정해주었다.

        <!-- Customize your theme here. -->
    <style name="Theme.MyDialog" parent="Theme.AppCompat.DayNight.Dialog.Alert">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowMinWidthMajor">@dimen/dialog_min_width_major</item>
        <item name="android:windowMinWidthMinor">@dimen/dialog_min_width_minor</item>
    </style>

그리고, style name에 맡게 Dialog로 사용할 Activity를 AndroidManifest.xml에서 추가해주었다.

  <activity android:name=".CustomDialog"
            android:theme="@style/Theme.MyDialog"
            ></activity>

그리고 이 뒤는 그냥 Activity 코드를 작성하는 것과 다를 게 없다.

• MainActivity
  (실제 구현해야 할 것)
  → 서버에서 Push 메세지를 통해 xhtml코드가 String으로, Json으로 데이터 값이 옴.
  → 데이터를 MainActivity로 보냄.
  (but 현재는 테스트를 위해 임의의 값을 지정해 놓음)
  → 버튼을 누르면 여러 데이터를 Intent에 담아 SubActivity로 보내주는 코드를 작성.

• SubActivity
  → MainActivity에서 넘어온 Intent값을 변수에 할당해주고,
  WebView를 XML과 연결해주고,
  내가 띄울 HTML 탬플릿은 가로로 긴 편이어서 해당 Dialog 화면을 가로로 고정해주고,
  기본적인 WebView Setting을 해주고,
  (자바스크립트 허용, 스크롤 금지, 줌 금지, 컨텐츠와 스크린 크기 맞게 조정 등)
  WebView를 LoadUrl()또는 LoadData()함수를 통해 HTML을 연결해주면 끝!

+) Dialog니까 Dialog창 외부 화면 터치시 Dialog화면이 dismiss()되는 것 까지 확인!

구현해야 할 것

• 버튼으로 Dialog - Dialog간 화면 전환 구현 필요.
• Dialog를 Activity 대신 Fragment로 변환하는 작업
  (Activity를 여러개 사용하는 것 보다 Activity내에서 fragment를 사용하는 것이 메모리 관리 및 화면 전환에 더 용이함. 또한, fragment간 통신 방법도 있으므로 데이터 관리에도 효율적일 수 있음.)