PickerDialogFragment
Here we have introduced third-party controls on GitHub.
Except for the click event source code in step 5, which needs to be modified according to the actual situation, the rest of the code has been adjusted and can be directly reused in subsequent projects.
1. Demand UI diagram
I can’t find the previous UI diagram, so I directly hand-drawn a UI diagram as follows.
It can be seen that this pop-up window contains a title TextView, a close button ImageView, two buttons representing OK and Cancel, and a draggable option bar is needed in the middle. Here we use a third-party WheelView on GitHub .
Third-party WheelView use link GitHub
Speaking of this, it is just a summary of the use of third-party controls on GitHub.
Take the pickerview in this project as an example:
enter pickerview to search, filter java, sort select Most stars, select the first one, open it for viewing, read the usage documents, etc.
Two, code design steps
(1) A drawable: dialog_background , which is reused by several pop-up windows as a background.
(2) A layout: picker_dialog.xml
（3）PickerDialogFragment.java
(4) The DialogUtils tool class defines the showPickerDialog method
(5) Set the click event to pop up the pop-up window in the Activity, and use the showPickerDialog method for reuse.
Three, source code
（1）dialog_background.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) A layout: picker_dialog.xml
Because we want to import a third-party sliding option bar control WheelView , we need to import the dependency in build.gradle first:
compile 'com.contrarywind:Android-PickerView:4.1.9'
After importing, the WheelView control can be used directly in the layout.
For the specific usage method of the third-party control, please refer to the link given above.
Next is the code of picker_dialog.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/dialog_background">
<ImageView
android:id="@+id/close"
android:layout_width="40dp"
android:layout_height="40dp"
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:text="设定报警时速"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="@+id/close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/close"
app:layout_constraintTop_toTopOf="@+id/close" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="@+id/sure"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/title">
<com.contrarywind.view.WheelView
android:id="@+id/options"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<Button
android:id="@+id/sure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="确定"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintStart_toStartOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="@+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="取消"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline" />
</androidx.constraintlayout.widget.ConstraintLayout>
（3）PickerDialogFragment.java:
public class PickerDialogFragment extends DialogFragment {
List<String> items;
PickerDialogFragmentListener pickerDialogFragmentListener;
int index;
@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.picker_dialog, container, false);
Bundle bundle = getArguments();
items = bundle.getStringArrayList("data");
String title = bundle.getString("title");
index = bundle.getInt("index");
ImageView close = view.findViewById(R.id.close);
TextView titleText = view.findViewById(R.id.title);
TextView sure = view.findViewById(R.id.sure);
TextView cancel = view.findViewById(R.id.cancel);
titleText.setText(title);
sure.setOnClickListener(v -> {
if (pickerDialogFragmentListener != null) {
pickerDialogFragmentListener.getData(index);
}
getDialog().cancel();
});
cancel.setOnClickListener(v -> getDialog().cancel());
close.setOnClickListener(v -> getDialog().cancel());
initWheelView(view);
return view;
}
private void initWheelView(View view) {
WheelView options = view.findViewById(R.id.options);
options.setCyclic(false);
options.setTextColorCenter(Color.WHITE);
options.setTextSize(26);
options.setAdapter(new ArrayWheelAdapter(items));
options.setOnItemSelectedListener(index -> this.index = index);
options.setCurrentItem(index);
}
@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;
dialog.getWindow().setLayout((int) (dm.widthPixels * 0.5), height);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
}
}
public void setPickerDialogFragmentListener(PickerDialogFragmentListener pickerDialogFragmentListener) {
this.pickerDialogFragmentListener = pickerDialogFragmentListener;
}
public void setItems(List<String> items) {
this.items = items;
}
public void setIndex(int index) {
this.index = index;
}
public interface PickerDialogFragmentListener {
void getData(int index);
}
}
(4) The DialogUtils tool class defines the showPickerDialog method
Methods as below:
public static void showPickerDialog(
AppCompatActivity activity,
ArrayList<String> data,
String title,
int currentIndex,
PickerDialogFragment.PickerDialogFragmentListener listener) {
PickerDialogFragment fragment = new PickerDialogFragment();
Bundle bundle = new Bundle();
bundle.putStringArrayList("data", data);
bundle.putString("title", title);
bundle.putInt("index", currentIndex);
fragment.setArguments(bundle);
fragment.setPickerDialogFragmentListener(listener);
fragment.show(activity.getSupportFragmentManager(), "fragment");
}
(5) Set the click event to pop up the pop-up window in the Activity, and use the showPickerDialog method for reuse.
First define the data we need in WheelView in arrays.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="alertSpeeds">
<item>30</item>
<item>35</item>
<item>40</item>
<item>45</item>
<item>50</item>
<item>55</item>
<item>60</item>
<item>65</item>
<item>70</item>
<item>75</item>
<item>80</item>
<item>85</item>
<item>90</item>
<item>95</item>
<item>100</item>
<item>105</item>
<item>110</item>
<item>115</item>
<item>120</item>
<item>125</item>
<item>130</item>
<item>135</item>
<item>140</item>
<item>145</item>
<item>150</item>
<item>155</item>
<item>160</item>
<item>165</item>
<item>170</item>
<item>175</item>
<item>180</item>
<item>185</item>
<item>190</item>
<item>195</item>
<item>200</item>
<item>205</item>
<item>210</item>
<item>215</item>
<item>220</item>
</array>
</resources>
Then go back to Activity and
declare an ArrayList first:
ArrayList<String> alertSpeeds;
Then pass the data into this ArrayList in the code:
alertSpeeds = new ArrayList<>();
TypedArray alertSpeedsTypedArray = getResources().obtainTypedArray(R.array.alertSpeeds);
for (int i = 0; i < alertSpeedsTypedArray.length(); i++) {
alertSpeeds.add(alertSpeedsTypedArray.getInt(i, 0) + "km/h");
}
alertSpeedsTypedArray.recycle();
Next is the realization of the click event, calling the ShowPickerDialog method:
The above code is as follows:
alarmSpeedSettingContainer.setItemClickListener(() -> {
DialogUtils.showPickerDialog(
AssistDrivingActivity.this,
alertSpeeds,
String.format(getString(R.string.setting_dialog_title), getString(R.string.alarm_speed)),
alarmSpeedIndex,
index -> {
alarmSpeedIndex = index;
alarmSpeedSettingContainer.setBottomTextContent(alertSpeeds.get(index));
});
});