Prefacio
En el artículo anterior, esta serie de artículos explicará el diálogo de Android y el diálogo de Material ¿Por qué deberíamos hablar de Material? Los desarrolladores que han desarrollado Flutter pueden comprender que Flutter también utiliza el marco de Material Design, y la introducción en su sitio web oficial dice esto: Material es un sistema de diseño creado por Google para ayudar a los equipos a desarrollar soluciones para Android, iOS y Flutter. la web para crear experiencias digitales de alta calidad. Como puedes imaginar, Material Design se utiliza ampliamente, por eso el blogger incluyó Material Dialog en esta serie de artículos.
Serie de artículos sobre cuadros de diálogo comunes de Android
[Android] Lista completa de cuadros de diálogo de uso común (1) Diálogo de Android
【Android】Lista completa de cuadros de diálogo de uso común (2) Diálogo de material
Tabla de contenido
Material DesignAsegúrese de haber importado las siguientes dependencias cuando utilice
implementation 'com.google.android.material:material:1.5.0'
Serie MaterialAlertDialogBuilder
La serie Material Dialog usa MaterialAlertDialogBuilderuna implementación de clase y su clase principal hereda de AlertDiolag.Builder, que es AlertDialog.Builderuna extensión de
, lo que significa que AlertDialog.BuiderMaterial Dialog también puede usar las propiedades que tiene.
Cabe señalar que MaterialAlertDialogBuilderen el código fuente, MaterialAlertDialogBuilderla clase modificará el estilo de diálogo actual de acuerdo con el estilo del tema actual. Para mostrar el estilo real de Material Dialog, debe modificar android:themeel archivo AndroidManifest.xml a uno de los siguientes temas para que surtan efecto.
| Tema | Describir |
|---|---|
| Tema.Material3.Luz | El tema de color brillante y brillante es principalmente blanco. |
| Tema.Material3.Light.NoActionBar | El tema de colores brillantes y brillantes es principalmente blanco y no hay ActionBar |
| Tema.Material3.Oscuro | Temas oscuros, principalmente oscuros. |
| Tema.Material3.Dark.NoActionBar | Temas oscuros, principalmente oscuros, y sin ActionBar |
| Tema.Material3.DíaNoche | mismoTheme.Material3.Light |
| Tema.Material3.DíaNoche.NoActionBar | mismoTheme.Material3.Light.NoActionBar |
A continuación, escriba el código para mostrarles a todos cómo se ve el cuadro de diálogo Material.
cuadro de diálogo rápido
Código de implementación:
MaterialAlertDialogBuilder(this)
.setTitle("消息对话框")
.setMessage("这是一个消息对话框！")
.setNegativeButton("不像") {
dialog, which ->
showMessage(view,"真不像？")
}
.setPositiveButton("明明就是") {
dialog: DialogInterface?, which: Int ->
showMessage(view,"明明就是")
}
.show()
| métodos de uso | Describir |
|---|---|
| setTitle(título de CharSequence) | Establece el título que se muestra en el cuadro de diálogo. |
| setMessage (mensaje de secuencia de caracteres) | Establecer el mensaje que se mostrará |
| setNegativeButton (texto CharSequence, oyente final de OnClickListener) | Configura un oyente para ser llamado cuando se presiona el botón negativo del diálogo |
| setPositiveButton (texto CharSequence, oyente final de OnClickListener) | Establece un oyente para ser llamado cuando se presiona el botón Aceptar del diálogo |
Diálogo de botones izquierdo y derecho
Código de implementación:
MaterialAlertDialogBuilder(this)
.setMessage("左右按钮对话框！")
.setNeutralButton("左") {
dialog: DialogInterface?, which: Int -> showMessage(view,"左") }
.setPositiveButton("右") {
dialog: DialogInterface?, which: Int -> showMessage(view,"右") }.show()
| métodos de uso | Describir |
|---|---|
| setMessage (mensaje de secuencia de caracteres) | Establecer el mensaje que se mostrará |
| setNeutralButton(texto CharSequence, oyente final de OnClickListener) | Configura un oyente para ser llamado cuando se presiona el botón neutral del diálogo |
| setPositiveButton (texto CharSequence, oyente final de OnClickListener) | Establece un oyente para ser llamado cuando se presiona el botón positivo del diálogo. |
Cuadro de diálogo de lista
MaterialAlertDialogBuilder(this)
.setItems(items) {
dialog: DialogInterface?, which: Int -> showMessage(view,"点击了列表对话框的 " + items[which]) }
.show()
| métodos de uso | Describir |
|---|---|
| setItems(elementos CharSequence[], oyente final de OnClickListener) | Establece la lista de elementos que se mostrarán en el cuadro de diálogo como contenido; se le notificará de los elementos seleccionados a través del oyente proporcionado. |
diálogo de selección de radio
Código de implementación:
MaterialAlertDialogBuilder(this)
.setTitle("单选对话框")
.setSingleChoiceItems(items,0) {
dialog: DialogInterface?, which: Int ->
singleSelectResult = items[which]
}
.setPositiveButton("确定") {
dialog: DialogInterface?, which: Int ->
showMessage(view,singleSelectResult)
}
.show()
| métodos de uso | Describir |
|---|---|
| setTitle(título de CharSequence) | Establecer el título que se muestra en el cuadro de diálogo |
| setSingleChoiceItems(elementos CharSequence[], int checkItem, oyente final de OnClickListener) | Configure una lista de elementos que se mostrarán en el cuadro de diálogo como contenido; se le notificará de los elementos seleccionados a través del oyente proporcionado. La lista mostrará una marca de verificación a la derecha del texto del elemento seleccionado. Al hacer clic en un elemento de la lista no se cierra el cuadro de diálogo. Al hacer clic en el botón se cerrará el cuadro de diálogo. |
| setPositiveButton (texto CharSequence, oyente final de OnClickListener) | Establece un oyente para ser llamado cuando se presiona el botón positivo del diálogo. |
Diálogo de selección múltiple
Código de implementación:
val bool = booleanArrayOf(false, false, false, false)
MaterialAlertDialogBuilder(this)
.setTitle("多选对话框")
.setMultiChoiceItems(items,bool) {
dialog: DialogInterface?, which: Int, isChecked: Boolean -> }
.setPositiveButton("确定") {
dialog: DialogInterface?, which: Int ->
var result = "选中了"
for (i in bool.indices) {
if (bool[i]) {
result += items[i]
}
}
showMessage(view,result)
}.show()
| métodos de uso | Describir |
|---|---|
| setTitle(título de CharSequence) | Establecer el título que se muestra en el cuadro de diálogo |
| setMultiChoiceItems (elementos CharSequence [], elementos booleanos [] verificados, oyente final OnMultiChoiceClickListener) | Configure una lista de elementos que se mostrarán en el cuadro de diálogo como contenido; se le notificará de los elementos seleccionados a través del oyente proporcionado. La lista mostrará una marca de verificación a la derecha del texto para cada elemento seleccionado. Al hacer clic en un elemento de la lista no se cierra el cuadro de diálogo. Al hacer clic en el botón se cerrará el cuadro de diálogo. |
| setPositiveButton (texto CharSequence, oyente final de OnClickListener) | Establece un oyente para ser llamado cuando se presiona el botón positivo del diálogo. |
Sin diálogo de radio
MaterialAlertDialogBuilderEl estilo del cuadro de diálogo predeterminado es con radio, ¿qué debo hacer si quiero eliminarlo?
MaterialAlertDialogBuilderNo setRadius(int radius), necesitas cambiar de opinión. Por ejemplo, crea un dibujable e Backgroundintenta cambiarlo.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 背景颜色为白色 -->
<solid android:color="@color/white"/>
</shape>
| métodos de uso | Describir |
|---|---|
| setBackground(Fondo dibujable) | Modificar el fondo del cuadro de diálogo |
El efecto es el siguiente:
Atributo MaterialAlertDialogBuilder
serie de tiempo de fecha
selector de tiempo
Selector de tiempo de material
Código de implementación:
MaterialTimePicker.Builder().build().show(supportFragmentManager,"1")
MaterialTimePickerPropiedad
selector de fechas
Selector de fecha de material
Código de implementación:
MaterialDatePicker.Builder.datePicker().build().show(supportFragmentManager,"1")
MaterialDatePickerPropiedad
cuadro de diálogo inferior
El cuadro de diálogo inferior está implementado BottomSheetDialogy es fácil de usar. Cree un archivo de diseño llamado bottom_sheet_dialog.xml, cree una instancia BottomSheetDialogy ¡ya casi termina!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="bottom|center_horizontal"
android:background="@null"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="标题"
android:textStyle="bold"
android:background="@null"/>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#C8C2C2" />
<TextView
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="Item 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="Item 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="Item 3" />
</LinearLayout>
val dialog = BottomSheetDialog (this);
dialog.setContentView(R.layout.bottom_sheet_dialog)
dialog.show()
El efecto es el que se muestra en la figura:
BottomSheetDialog es muy simple de usar, pero si desea intentar modificar su fondo, los recién llegados generalmente entrarán en un hoyo, es decir, el radio del fondo no se puede modificar, lo que causa por el fondo integrado BottomSheetDialog (similar a los problemas causados por otros radios personalizados de Dialog), en este momento necesitamos ocultar el BottomSheetDialog fondo integrado.
Sin embargo, BottomSheetDialogno hay forma de modificar el fondo. Para modificar BottomSheetDialogel fondo, debe confiar en heredar BottomSheetDialogFragmentla clase y reescribirla onCreate(savedInstanceState: Bundle?), onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?)y crear un nuevo estilo para sobrescribir el estilo original, de la siguiente manera:
class CustomBottomSheetDialogFragment : BottomSheetDialogFragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// 可选的style：STYLE_NORMAL, STYLE_NO_TITLE, STYLE_NO_FRAME, STYLE_NO_INPUT.
setStyle(STYLE_NORMAL, R.style.BottomSheetDialog)
}
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.bottom_sheet_dialog, container, false)
}
}
Crea un nuevo estilo en temas.xml
<!--实现BottomSheetDialog圆角效果-->
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>
<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@android:color/transparent</item>
</style>
Luego regrese a la interfaz para crear una instancia del cuadro de diálogo y mostrarlo.
val bottomSheetDialog = CustomBottomSheetDialogFragment()
bottomSheetDialog.show(supportFragmentManager, "1")
El efecto final es el siguiente:
Precauciones
1. Debes considerar si usar Material Design en las primeras etapas de desarrollo. Una vez que decidas usar Material Design, la mayoría de los componentes de la aplicación deben usar Material Design para evitar la fragmentación de la interfaz de usuario tanto como sea posible.
Documentos de referencia:
1. Sitio web oficial de Material
2. Introducción a los componentes de Material de Android
3. Explicación detallada del uso de BottomSheetDialog
4. Sitio web oficial de Material de Android (Diálogos)