注:
使用到了 RecyclerView,声明了其对应的list_item.xml和对应的适配器。
使用到了 枚举类作为数据。
除了最后一部分的点击事件的代码需要根据实际需求再进行修改,其余部分的代码都已调通,可直接复用。
一、需求UI图
直接拍了下自己手绘的UI需求图,如下所示。包含一个关闭的按钮,RecyclerView点击选择项,选择项中被选中项显示出一个表示被选中的图片,其余未选的项中该图片隐藏。
二、代码设计步骤
(1)三个弹窗中复用的drawable:dialog_background.xml
(2)radio_button_dialog.xml,其中包含RecyclerView,所以还需要设计对应的radio.button_dialog_item.xml和适配器RadioButtonDialogAdapter.java
(3)RadionButtonDialogFragment.java
(4)DialogUtils工具类中定义对应的showRadioButtonDialogFragment方法
(5)Activity中设置点击事件,复用showRadioButtonDialogFragment方法。
在调用方法之前,先定义了一个VehicleAlertSensitivity枚举类作为数据源。
三、源码
(1)dialog_background.xml
即最初的背景,可设置颜色,圆角等属性,供几个弹窗的xml复用。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="15dp" />
<solid android:color="@color/cardview_shadow_start_color" />
</shape>
(2)radio_button_dialog.xml,其中包含RecyclerView,所以还需要设计对应的radio.button_dialog_item.xml和适配器RadioButtonDialogAdapter.java
先看radio_button_dialog.xml,它包含三个控件,即标题TextView,关闭按钮ImageView,和一个RecyclerView。
代码如下:
<?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"
android:background="@drawable/dialog_background">
<ImageView
android:id="@+id/close"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/close" />
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="90dp"
android:layout_marginStart="30dp"
android:textSize="26sp"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="@+id/close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/close"
app:layout_constraintTop_toTopOf="@+id/close" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/title" />
</androidx.constraintlayout.widget.ConstraintLayout>
其中的ImageView中对应的图片即一个关闭图片,从UI切图中放入drawable中即可。
由于使用到了RecyclerView,所以还需要写对应的list_item和适配器。
先写radio_button_dialog_item.xml:
<?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/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/content_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="12dp"
android:text="偏离报警"
android:textSize="26sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/selected_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="32dp"
app:layout_constraintBottom_toBottomOf="@+id/content_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/content_text"
app:srcCompat="@drawable/radio_button_selected" />
<View
android:id="@+id/divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="12dp"
android:background="@color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/content_text" />
</androidx.constraintlayout.widget.ConstraintLayout>
其中的ImageView就是当前选项被选中时,该项中显示被选中的图片,直接导入UI切图即可,切图长这样:
还有一个注意点就是其中View控件的使用,实现了每一项中的下划线,很巧妙。
最后一个就是对应的适配器RadioButtonDialogAdapter.java的定义:
public class RadioButtonDialogAdapter extends RecyclerView.Adapter<RadioButtonDialogAdapter.RadioButtonDialogViewHolder> {
List<String> items;
int index;
OnClickListener listener;
Context context;
public RadioButtonDialogAdapter(Context context, List<String> items, OnClickListener listener) {
this.context = context;
this.items = items;
this.listener = listener;
}
@NonNull
@Override
public RadioButtonDialogViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.radio_button_dialog_item, viewGroup, false);
RadioButtonDialogViewHolder viewHolder = new RadioButtonDialogViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull RadioButtonDialogViewHolder radioButtonDialogViewHolder, int i) {
String item = items.get(i);
radioButtonDialogViewHolder.container.setOnClickListener(view -> {
if (listener != null) {
listener.onClick(i);
}
});
radioButtonDialogViewHolder.contentText.setText(item);
radioButtonDialogViewHolder.contentText.setTextColor(i == index ? context.getColor(R.color.green) : context.getColor(R.color.white));
radioButtonDialogViewHolder.selectedImage.setVisibility(i == index ? View.VISIBLE : View.GONE);
radioButtonDialogViewHolder.divider.setVisibility(i == items.size() - 1 ? View.GONE : View.VISIBLE);
}
@Override
public int getItemCount() {
return items == null ? 0 : items.size();
}
public void setIndex(int index) {
this.index = index;
}
class RadioButtonDialogViewHolder extends RecyclerView.ViewHolder {
ConstraintLayout container;
TextView contentText;
ImageView selectedImage;
View divider;
public RadioButtonDialogViewHolder(@NonNull View itemView) {
super(itemView);
container = itemView.findViewById(R.id.container);
contentText = itemView.findViewById(R.id.content_text);
selectedImage = itemView.findViewById(R.id.selected_image);
divider = itemView.findViewById(R.id.divider);
}
}
public interface OnClickListener {
void onClick(int index);
}
}
(3)RadionButtonDialogFragment.java
弹窗界面及对应点击事件设计
public class RadioButtonDialogFragment extends DialogFragment {
List<String> items;
private RadioButtonDialogFragmentListener listener;
int index = 0;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
View view = inflater.inflate(R.layout.radio_button_dialog, container, false);
Bundle arguments = getArguments();
String title = arguments.getString("title");
items = arguments.getStringArrayList("data");
index = arguments.getInt("index");
ImageView closeImage = view.findViewById(R.id.close);
TextView titleText = view.findViewById(R.id.title);
RecyclerView list = view.findViewById(R.id.list);
titleText.setText(title);
RadioButtonDialogAdapter adapter = new RadioButtonDialogAdapter(getContext(), this.items, index -> {
if (listener != null) {
listener.onClick(index);
}
getDialog().cancel();
});
adapter.setIndex(index);
list.setAdapter(adapter);
list.setLayoutManager(new LinearLayoutManager(getContext(), LinearLayoutManager.VERTICAL, false));
closeImage.setOnClickListener(v -> getDialog().cancel());
return view;
}
@Override
public void onStart() {
super.onStart();
Dialog dialog = getDialog();
if (dialog != null ) {
DisplayMetrics dm = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
int height = ViewGroup.LayoutParams.MATCH_PARENT;
Window window = getDialog().getWindow();
window.setLayout((int) (dm.widthPixels * 0.5), height);
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
WindowManager.LayoutParams windowParams = window.getAttributes();
windowParams.dimAmount = 0.5f;
window.setAttributes(windowParams);
}
}
public void setIndex(int index) {
this.index = index;
}
public void setListener(RadioButtonDialogFragmentListener listener) {
this.listener = listener;
}
public interface RadioButtonDialogFragmentListener {
void onClick(int index);
}
}
(4)DialogUtils工具类中定义showRadioButtonDialogFragment方法:
方法如下:
public static void showRadioButtonDialogFragment(
AppCompatActivity activity,
ArrayList<String> data,
String title,
int currentIndex,
RadioButtonDialogFragment.RadioButtonDialogFragmentListener listener) {
RadioButtonDialogFragment fragment = new RadioButtonDialogFragment();
Bundle bundle = new Bundle();
bundle.putString("title", title);
bundle.putStringArrayList("data", data);
bundle.putInt("index", currentIndex);
fragment.setArguments(bundle);
fragment.setListener(listener);
fragment.show(activity.getSupportFragmentManager(), "fragment");
}
(5)在Activity中设置点击事件,复用showRadioButtonDialogFragment方法实现多个功能相同的弹窗显示。
在调用点击事件之前,对于不同的数据项,定义不同的枚举类放置数据,如RecycleView中如果有三行选项,内容分别为标准、低、高时,定义如下枚举类供后续调用:
public enum VehicleAlertSensitivity {
STANDARD(0X01,"标准"),
LOW(0x02,"低"),
HIGH(0x03,"高");
private int code;
private String content;
public int getCode() {
return code;
}
public String getContent() {
return content;
}
VehicleAlertSensitivity(int code, String content) {
this.code = code;
this.content = content;
}
public static int getCode(String content) {
for (VehicleAlertSensitivity mode : VehicleAlertSensitivity.values()) {
if (content == mode.getContent()) {
return mode.getCode();
}
}
return -1;
}
public static String getContent(int code) {
for (VehicleAlertSensitivity mode : VehicleAlertSensitivity.values()) {
if (code == mode.getCode()) {
return mode.getContent();
}
}
return "";
}
public static ArrayList<String> getAllContents() {
ArrayList<String> contents = new ArrayList<>();
for (VehicleAlertSensitivity mode : VehicleAlertSensitivity.values()) {
contents.add(mode.getContent());
}
return contents;
}
}
在准备好枚举类的数据后,接下来继续看点击事件显示弹窗的功能实现:
(1)先声明一个存储数据的ArrayList:
ArrayList<String> vehicleAlertSensitivities;
(2)使用刚刚定义的枚举类.getAllContents()获取数据给刚刚定义的ArrayList。
vehicleAlertSensitivities = VehicleAlertSensitivity.getAllContents();
(3)接着就是对对应的点击事件调用显示弹窗的方法,实现显示弹窗的功能
alarmSensitivityContainer.setItemClickListener(() -> {
DialogUtils.showRadioButtonDialogFragment(
AssistDrivingActivity.this,
vehicleAlertSensitivities,
String.format(getString(R.string.setting_dialog_title), "车" + getString(R.string.alarm_sensitivity)),
maintainLaneAlarmSensitivityIndex,
index -> {
maintainLaneAlarmSensitivityIndex = index;
alarmSensitivityContainer.setBottomTextContent(vehicleAlertSensitivities.get(maintainLaneAlarmSensitivityIndex));
});
});
上面的代码如下图所示: