앞의 예시가 기본 AlertDialog의 Method를 사용한 경우라면 이번에는 이전의 ListView와 같이 LayoutInflater를 활용하여 Custom Layout을 AlertDialog에 입혀서 활용해 보자. 실제 App. 개발시에 중요한 부분은 아니겠지만 이왕이면 여러가지 사용법을 알면 좋지 않을까 싶다.

1. 목적 : Custom Layout을 LayoutInflater를 통해 AlertDialog에 반영해 알림창을 만들어 보자.

2. 개발 환경
 - PC : Windows 7, Android Studio 1.4.1(64-bit)
 - Phone : LG G pro Lollipop(API 21)

3. 참고자료
 1) Android Developers - AlertDialog Reference (http://developer.android.com/reference/android/app/AlertDialog.html)
 2) 창조적 고찰 - Android 커스텀 다이얼로그 생성 (http://ismydream.tistory.com/107)

4. 과정
  이전의 'AlertDialog를 활용한 알림창 띄우기 01 - 기본'편에 살을 덧붙여 만들어 봤다.

 1) AlertDialog가 받아들일 Custom View에 해당하는 layout 파일을 /layout directory 밑에 생성한다.

<!-- /layout/custom_alert_layout.xml -->
<?
xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="30dp">

    <ImageView
        android:id="@+id/customdialogicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/customtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/customdialogicon"
        android:padding="10dp"
        android:text="Hello World!"/>
</RelativeLayout>

 

 2) AlertDialog를 띄울 activity에 LayoutInflater를 통해 위의 layout file을 연결시키고, 해당 사항을 AlertDialog.Builder의 setView(View view)을 통해 반영한다.

public class MainActivity extends AppCompatActivity {

    public ImageButton imgBtn;
    public TextView returnVal;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imgBtn = (ImageButton)findViewById(R.id.imgbtn); // ImageButton의 activity 내 생성 및 연결
        returnVal = (TextView)findViewById(R.id.returnval);
        imgBtn.setOnClickListener(new View.OnClickListener() { // ImageButton을 Click시 AlertDialog가 생성되도록 아래과 같이 설계
            @Override
            public void onClick(View v) {
                // LayoutInflater를 통해 위의 custom layout을 AlertDialog에 반영. 이 외에는 거의 동일하다.
                LayoutInflater inflater = (LayoutInflater)getApplicationContext().getSystemService(LAYOUT_INFLATER_SERVICE);
                View view = inflater.inflate(R.layout.custom_alert_layout, null);
                TextView customTitle = (TextView)view.findViewById(R.id.customtitle);
                customTitle.setText("종료하시겠습니까?");
                customTitle.setTextColor(Color.BLACK);
                ImageView customIcon = (ImageView)view.findViewById(R.id.customdialogicon);
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setView(view);
                builder.setPositiveButton("네", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        finish();
                    }
                });
                builder.setNegativeButton("아니오", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        returnVal.setText("Custom AlertDialog를 통해서 return");
                        dialog.dismiss();
                    }
                });
                AlertDialog dialog = builder.create();
                dialog.show();

            }
        });
    }
}

(위 code의 실행 결과)

  

  

 

  어제는 PopupWindow를 통해 main이 되는 View 에 말풍선처럼 popup을 띄우는 방식을 살펴보았다. 그런데 기존 App.들에서는 안내 메시지 창 자체가 따로 위에 뜨는 느낌이었던 터라 뭐 다른게 있나 싶어 찾아봤더니, AlertDialog를 사용한 것이었다. 이번엔 AlertDialog.builder를 통해 메시지 창을 만들어 동작시켜 보자.

1. 목적 : AlertDialog 의 사용법을 익히고 App.에 적용해 보자.

2. 개발 환경
 - PC : Windows 7, Android Studio 1.4.1(64-bit)
 - Phone : LG G pro Lollipop(API 21)

3. 참고자료
 1) Android Developers - AlertDialog Reference (http://developer.android.com/reference/android/app/AlertDialog.html)
 2) 남시언의 문화지식탐험 - AlertDialog 생성 예제 (http://namsieon.com/313)

4. 과정
 1) 어제와 같이 AlertDialog를 띄울 ImageButton와 return 여부를 확인할 TextView를 activity_main.xml 에 생성한다. AlertDialog에서 돌아왔을 때 return 여부를 보여주기 위해서 TextView의 text는 비워둔다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ImageButton
        android:id="@+id/imgbtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/returnval"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imgbtn"/>
</RelativeLayout>

 

 2) App.의 전체적인 activity를 구성하는 MainActivity.java에 위의 ImageButton과 연결할 변수를 생성 및 연결하고, 해당 Button을 Click하면 AlertDialog 가 나타나도록 다음과 같이 설계한다.

public class MainActivity extends AppCompatActivity {

    public ImageButton imgBtn;
    public TextView returnVal;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imgBtn = (ImageButton)findViewById(R.id.imgbtn); // ImageButton의 activity 내 생성 및 연결
        returnVal = (TextView)findViewById(R.id.returnval);
        imgBtn.setOnClickListener(new View.OnClickListener() { // ImageButton을 Click시 AlertDialog가 생성되도록 아래과 같이 설계
            @Override
            public void onClick(View v) {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); // AlertDialog를 띄울 activity를 argument로 지정해야 한다.
                builder.setTitle("앱을 종료하시겠습니까?"); // AlertDialog.builder를 통해 Title text를 입력
                builder.setPositiveButton("네", new DialogInterface.OnClickListener() { // AlertDialog.Builder에 Positive Button을 생성
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        finish(); // App.의 종료. Activity 생애 주기 참고
                    }
                });
                builder.setNegativeButton("아니오", new DialogInterface.OnClickListener() { // AlertDialog.Builder에 Negative Button을 생성
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        returnVal.setText("앱을 종료하지 않고 돌아왔음");
                        dialog.dismiss(); // "아니오" button이 받은 DialogInterface를 dismiss 하여 MainView로 돌아감
                    }
                });
                AlertDialog dialog = builder.create(); // 위의 builder를 생성할 AlertDialog 객체 생성
                dialog.show(); // dialog를 화면에 뿌려 줌
            }
        });
    }
}

(위의 code 실행 결과)

   

  

 

+ Recent posts