이미지와 텍스트가 포함된 커스텀 리스트뷰를 안드로이드의 다이어로그(alertdialog)에 보여주는 예제입니다.
리스트뷰에서 항목을 선택시 액티비티의 뷰에 선택한 항목을 보여주도록 구현되었습니다.
다음처럼 실행됩니다.
1. 실행하면 텍스트뷰와 버튼을 보여줍니다. 버튼을 클릭하면 다이얼로그가 보이게 됩니다.
2. 다이얼로그에 추가된 리스트뷰상에 선택할 수 있는 항목이 보입니다.
3. 다이얼로그에서 선택한 항목이 텍스트뷰에 보여집니다.
다음처럼 예제를 테스트할 수 있습니다.
0. 프로젝트 창의 drawable 폴더에 이미지를 추가합니다. 다이얼로그의 항목 옆에 보여줄 이미지입니다.
본 글에서는 SVG 이미지를 사용하였습니다.
1. activity_main.xml
다이얼로그를 보여줄때 사용할 버튼과 선택한 항목을 보여줄 텍스트뷰로 구성되어 있습니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">
<TextView
android:id="@+id/textview_main_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="아직 선택하지 않았습니다."/>
<Button
android:id="@+id/button_main_run"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="선택"/>
</LinearLayout> |
2. alert_dialog.xml
다이얼로그에 보여줄 레이아웃입니다. CardView를 사용하여 다이얼로그의 모서리가 둥글게 보이도록 합니다.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardCornerRadius="20dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:orientation="vertical">
<TextView
android:id="@+id/textview_alterdialog_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="20dp"
android:text="원하는 과일을 선택하세요"/>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@null"
android:dividerHeight="10dp"
android:id="@+id/listview_alterdialog_list"/>
</LinearLayout>
</android.support.v7.widget.CardView> |
3. CardView를 사용하려면 build.gradle 파일에 com.android.support:cardview-v7를 추가해야 합니다.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
implementation 'com.android.support:cardview-v7:28.0.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
} |
4. alert_dialog_row.xml
리스트뷰의 아이템으로 사용할 레이아웃입니다. 이미지뷰와 텍스트뷰로 구성됩니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:gravity="center"
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/alertDialogItemImageView"
android:layout_width="32dp"
android:layout_height="32dp" />
<TextView
android:id="@+id/alertDialogItemTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout> |
5. MainActivity.java
버튼을 클릭시 다이얼로그를 보여줍니다. 다이얼로그에 있는 아이템을 클릭시 텍스트뷰에 해당 아이템을 표시하도록 구현되어 있습니다.
package com.tistory.webnautes.custom_layout_alertdialog;
import android.content.DialogInterface;
import android.graphics.Color;
import android.graphics.Rect;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import org.w3c.dom.Text;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class MainActivity extends AppCompatActivity {
private static final String TAG_TEXT = "text";
private static final String TAG_IMAGE = "image";
TextView textview_result;
List<Map<String, Object>> dialogItemList;
int[] image = {R.drawable.ic_001_grape, R.drawable.ic_002_cherry, R.drawable.ic_003_watermelon};
String[] text = {"포도", "체리", "수박"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textview_result = (TextView)findViewById(R.id.textview_main_text);
Button button_run = (Button)findViewById(R.id.button_main_run);
button_run.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showAlertDialog();
}
});
dialogItemList = new ArrayList<>();
for(int i=0;i<image.length;i++)
{
Map<String, Object> itemMap = new HashMap<>();
itemMap.put(TAG_IMAGE, image[i]);
itemMap.put(TAG_TEXT, text[i]);
dialogItemList.add(itemMap);
}
}
private void showAlertDialog()
{
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
LayoutInflater inflater = getLayoutInflater();
View view = inflater.inflate(R.layout.alert_dialog, null);
builder.setView(view);
final ListView listview = (ListView)view.findViewById(R.id.listview_alterdialog_list);
final AlertDialog dialog = builder.create();
SimpleAdapter simpleAdapter = new SimpleAdapter(MainActivity.this, dialogItemList,
R.layout.alert_dialog_row,
new String[]{TAG_IMAGE, TAG_TEXT},
new int[]{R.id.alertDialogItemImageView, R.id.alertDialogItemTextView});
listview.setAdapter(simpleAdapter);
listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
textview_result.setText(text[position] + "를(을) 선택했습니다.");
dialog.dismiss();
}
});
dialog.setCancelable(false);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
dialog.show();
}
}
|
참고
https://www.dev2qa.com/android-custom-layout-alertdialog-example/
최초작성 2019. 3. 6
