사용자 인터페이스03 - 대화상자(Dialog)

사용자에게 정보를 전달하거나 선택을 입력 받는 용도로 사용한다.

정보 전달의 경우에는 확인 버튼으로 확인하는 것이 필요하다.

                               

#실습 1

- 목록을 롱클릭하면 아래 그림과 같은 <음식삭제> 다이얼로그 생성하고 삭제하기

-초기화면-                                                 -롱클릭 시-                                                -삭제 후 화면-

---

<MainActivity.java>     

package ddwucom.mobile.week11.exam01;

import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.Toast;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    ListView listView;
    ArrayAdapter adapter;
    ArrayList<Food> foodList;

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

        listView = findViewById(R.id.listView);

        foodList = new ArrayList<Food>();
        foodList.add(new Food("김치찌개", "한국"));
        foodList.add(new Food("된장찌개", "한국"));
        foodList.add(new Food("훠궈", "중국"));
        foodList.add(new Food("딤섬", "중국"));
        foodList.add(new Food("초밥", "일본"));
        foodList.add(new Food("오코노미야키", "일본"));

        // Food 객체의 toString() 메소드가 호출되어 하나의 문자열로 처리됨
        adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, foodList);

        listView.setAdapter(adapter);

        // listView 롱클릭 이벤트 추가
        listView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener(){

            public boolean onItemLongClick(AdapterView<?> adapterView, View view, int pos, long l){
                final int position = pos; //몇 번째를 롱클릭 했는지
                String foodName = foodList.get(pos).getFood();

                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setTitle("음식 삭제"); //대화상자 제목
                builder.setMessage(foodName + "을(를) 삭제하시겠습니까?"); //대화상자 메세지
                builder.setIcon(R.mipmap.ic_launcher); //대화상자 아이콘
                builder.setCancelable(false); //백버튼이나 주변을 눌러도 닫히지 않도록 지정
                builder.setPositiveButton("확인", new DialogInterface.OnClickListener() { //listener: 버튼을 눌렀을 때 동작하는 이벤트
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) { //i는 버튼의 순서
                        foodList.remove(position);
                        adapter.notifyDataSetChanged();
                    }
                });

                builder.setNegativeButton("취소", null);
                builder.show();
                return false;                 //-> builder.show()와 같음
            }

        });
    }

}

1. AlertDialog.Builder

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
.
.
.

 다이얼로그를 생성한다.       

2. setCancelable(false)

builder.setCancelable(false);

대화상자가 열렸을 때 백버튼이나 주변을 눌러도 닫히지 않도록 하는 설정이다.

따라서 대화상자가 열리면 '확인' 또는 '취소' 버튼을 눌러야만 대화상자를 닫을 수 있다.           

3. setPositiveButton(), DialogInterface.OnClickListener()

builder.setPositiveButton("확인", new DialogInterface.OnClickListener(){
 	public void onClick(DialogInterface dialogInterface, int i) {
 		//클릭 시 동작
 		.
 		.

setPositiveButton은 대화상자에서 확인버튼을 생성한다. 

DialogInterface.OnClickListener()는 대화상자 버튼을 클릭 시 발생하는 이벤트를 설정한다.

4. setNegativeButton()

builder.setNegativeButton("취소", null);

대화상자에서 취소버튼을 생성한다.                                                                                                           

5. setNegativeButton()

builder.show();

대화상자를 표시한다. 

---

<activity_main.java>  

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="나라별 음식"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ListView
        android:id="@+id/listView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/bnt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:onClick="onClick"
        android:text="음식추가"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

#실습 2

- 위 실습을 기반으로 음식을 추가하는 기능 만들어보기

                        -초기화면-                                        -음식추가 버튼 누를 시-                                      -추가한 결과화면-                                             

                        -롱클릭 시-                                                                                  -삭제 결과 화면-                        

---

<MainActivity.java> 

package ddwucom.mobile.week11.exam01;

import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.Toast;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    FoodManager foodManager;
    ListView listView;
    ArrayAdapter adapter;
    ArrayList<Food> foodList;

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

        listView = findViewById(R.id.listView);

        // DataManager 적용해 볼 것
        foodList = new ArrayList();
        foodList.add(new Food("김치찌개", "한국"));
        foodList.add(new Food("된장찌개", "한국"));
        foodList.add(new Food("훠궈", "중국"));
        foodList.add(new Food("딤섬", "중국"));
        foodList.add(new Food("초밥", "일본"));
        foodList.add(new Food("오코노미야키", "일본"));

        // Food 객체의 toString() 메소드가 호출되어 하나의 문자열로 처리됨
        adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, foodList);

        listView.setAdapter(adapter);

        // listView 롱클릭 이벤트 추가
        listView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener(){

            public boolean onItemLongClick(AdapterView<?> adapterView, View view, int pos, long l){
                final int position = pos; //몇 번째를 롱클릭 했는지
                String foodName = foodList.get(pos).getFood();

                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setTitle("음식 삭제");
                builder.setMessage(foodName + "을(를) 삭제하시겠습니까?");
                builder.setIcon(R.mipmap.ic_launcher);
                builder.setCancelable(false); //백버튼이나 주변을 눌러도 닫히지 않도록 지정
                builder.setPositiveButton("확인", new DialogInterface.OnClickListener() { //listener: 버튼을 눌렀을 때 동작하는 이벤트
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) { //i는 버튼의 순서
                        foodList.remove(position);
                        adapter.notifyDataSetChanged();
                    }
                });

                builder.setNegativeButton("취소", null);
                builder.show();
                return false;                 //-> builder.show()와 같음
            }

        });
    }

    //추가 버튼
    public void onClick(View v) {

        final ConstraintLayout plus_layout =
                (ConstraintLayout)View.inflate(this, R.layout.plus_layout, null);

        switch (v.getId()){
            case R.id.bnt:
                AlertDialog.Builder builder = new AlertDialog.Builder(this);
                builder.setTitle("음식 추가");
                builder.setView(plus_layout);
                builder.setIcon(R.mipmap.ic_launcher);
                builder.setCancelable(false); //백버튼이나 주변을 눌러도 닫히지 않도록 지정
                builder.setPositiveButton("확인", new DialogInterface.OnClickListener() { //listener: 버튼을 눌렀을 때 동작하는 이벤트
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) { //i는 버튼의 순서
                        EditText name = plus_layout.findViewById(R.id.name);
                        EditText country = plus_layout.findViewById(R.id.country);
                        String etName = name.getText().toString();
                        String etCountry = country.getText().toString();
                        foodList.add(new Food(etName, etCountry));
                        adapter.notifyDataSetChanged();
                    }
                });

                builder.setNegativeButton("취소", null);
                builder.show();
        }
    }

}

1. ConstraintLayout

final ConstraintLayout plus_layout =
        (ConstraintLayout)View.inflate(this, R.layout.plus_layout, null);

[음식추가] 버튼을 클릭했을 때 사용하는 레이아웃을 inflation 하는 것이다.

2. setView()

builder.setView(plus_layout);

레이아웃을 inflation 한 후에 대화상자에 레이아웃을 설정하는 것이다.

3. findViewById()

EditText name = plus_layout.findViewById(R.id.name);
EditText country = plus_layout.findViewById(R.id.country);

다이얼로그의 layout인 plus_layout에 배치한 뷰를 접근한다.

---

<plus_layout.java>

- [음식추가] 화면

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="음식명"
        android:textColor="#000000"
        android:textSize="20dp"
        app:layout_constraintBottom_toTopOf="@+id/name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.051"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.64" />

    <EditText
        android:id="@+id/name"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:ems="10"
        android:hint="음식명 입력"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.262"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="나라명"
        android:textColor="#000000"
        android:textSize="20dp"
        app:layout_constraintBottom_toTopOf="@+id/country"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.051"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/name"
        app:layout_constraintVertical_bias="1.0" />

    <EditText
        android:id="@+id/country"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="36dp"
        android:ems="10"
        android:hint="음식의 나라명 입력"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.262"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/name" />


</androidx.constraintlayout.widget.ConstraintLayout>

1. hint

android:hint="음식명 입력"

입력칸에 쓰여있는 문자를 지정하고 입력칸을 클릭하면 문자가 없어지도록 한다.

---

<activity_main.java> 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="나라별 음식"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ListView
        android:id="@+id/listView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/bnt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:onClick="onClick"
        android:text="음식추가"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>