Prefácio
No artigo anterior, esta série de artigos explicará a caixa de diálogo Android e a caixa de diálogo Material. Por que devemos falar sobre Material? Os desenvolvedores que desenvolveram o Flutter podem entender que a estrutura do Material Design também é usada pelo Flutter, e a introdução em seu site oficial diz o seguinte: Material é um sistema de design criado pelo Google para ajudar as equipes a desenvolver soluções para Android, iOS e Flutter. e a web para construir experiências digitais de alta qualidade. Como você pode imaginar, o Material Design é amplamente utilizado, por isso o blogueiro trouxe o Material Dialog para esta série de artigos.
Série de artigos sobre caixas de diálogo comuns do Android
[Android] Lista abrangente de caixas de diálogo comumente usadas (1) Android Dialog
【Android】Lista abrangente de caixas de diálogo comumente usadas (2) Diálogo de materiais
Material DesignCertifique-se de ter importado as seguintes dependências ao usar
implementation 'com.google.android.material:material:1.5.0'
Série MaterialAlertDialogBuilder
A série Material Dialog usa MaterialAlertDialogBuilderimplementação de classe, e sua classe pai herda de AlertDiolag.Builder, que é AlertDialog.Builderuma extensão de
, o que significa que AlertDialog.BuiderMaterial Dialog também pode usar as propriedades que possui.
Deve-se observar que MaterialAlertDialogBuilderno código-fonte MaterialAlertDialogBuildera classe modificará o estilo do Dialog atual de acordo com o estilo do tema atual. Para mostrar o estilo real do Material Dialog, você precisa modificar android:themeo arquivo AndroidManifest.xml para um dos seguintes temas entrem em vigor.
| Tema | Descrever |
|---|---|
| Tema.Material3.Light | O tema de cores brilhantes e brilhantes é principalmente branco |
| Theme.Material3.Light.NoActionBar | O tema de cores brilhantes e brilhantes é principalmente branco e não há ActionBar |
| Tema.Material3.Escuro | Temas escuros, principalmente sombrios |
| Theme.Material3.Dark.NoActionBar | Escuro, principalmente temas escuros e sem ActionBar |
| Theme.Material3.DayNight | mesmoTheme.Material3.Light |
| Theme.Material3.DayNight.NoActionBar | mesmoTheme.Material3.Light.NoActionBar |
Em seguida, escreva o código para mostrar a todos como é a caixa de diálogo de materiais.
Caixa de diálogo de prompt
Código de implementação:
MaterialAlertDialogBuilder(this)
.setTitle("消息对话框")
.setMessage("这是一个消息对话框！")
.setNegativeButton("不像") {
dialog, which ->
showMessage(view,"真不像？")
}
.setPositiveButton("明明就是") {
dialog: DialogInterface?, which: Int ->
showMessage(view,"明明就是")
}
.show()
| usar métodos | Descrever |
|---|---|
| setTitle(Título CharSequence) | Define o título exibido na caixa de diálogo |
| setMessage(mensagem CharSequence) | Defina a mensagem a ser exibida |
| setNegativeButton (texto CharSequence, ouvinte OnClickListener final) | Define um ouvinte a ser chamado quando o botão negativo da caixa de diálogo for pressionado |
| setPositiveButton (texto CharSequence, ouvinte OnClickListener final) | Define um ouvinte a ser chamado quando o botão OK da caixa de diálogo for pressionado |
Diálogo dos botões esquerdo e direito
Código de implementação:
MaterialAlertDialogBuilder(this)
.setMessage("左右按钮对话框！")
.setNeutralButton("左") {
dialog: DialogInterface?, which: Int -> showMessage(view,"左") }
.setPositiveButton("右") {
dialog: DialogInterface?, which: Int -> showMessage(view,"右") }.show()
| usar métodos | Descrever |
|---|---|
| setMessage(mensagem CharSequence) | Defina a mensagem a ser exibida |
| setNeutralButton (texto CharSequence, ouvinte OnClickListener final) | Define um ouvinte a ser chamado quando o botão neutro da caixa de diálogo for pressionado |
| setPositiveButton (texto CharSequence, ouvinte OnClickListener final) | Define um ouvinte a ser chamado quando o botão positivo da caixa de diálogo for pressionado |
Caixa de diálogo Lista
MaterialAlertDialogBuilder(this)
.setItems(items) {
dialog: DialogInterface?, which: Int -> showMessage(view,"点击了列表对话框的 " + items[which]) }
.show()
| usar métodos | Descrever |
|---|---|
| setItems(itens CharSequence[], ouvinte OnClickListener final) | Define a lista de itens a serem exibidos na caixa de diálogo como conteúdo, você será notificado sobre os itens selecionados através do ouvinte fornecido |
caixa de diálogo de seleção de rádio
Código de implementação:
MaterialAlertDialogBuilder(this)
.setTitle("单选对话框")
.setSingleChoiceItems(items,0) {
dialog: DialogInterface?, which: Int ->
singleSelectResult = items[which]
}
.setPositiveButton("确定") {
dialog: DialogInterface?, which: Int ->
showMessage(view,singleSelectResult)
}
.show()
| usar métodos | Descrever |
|---|---|
| setTitle(Título CharSequence) | Defina o título exibido na caixa de diálogo |
| setSingleChoiceItems(itens CharSequence[], int checkItem, ouvinte OnClickListener final) | Defina uma lista de itens a serem exibidos na caixa de diálogo como conteúdo. Você será notificado sobre os itens selecionados por meio do ouvinte fornecido. A lista exibirá uma marca de seleção à direita do texto do item selecionado. Clicar em um item da lista não fecha a caixa de diálogo. Clicar no botão fechará a caixa de diálogo. |
| setPositiveButton (texto CharSequence, ouvinte OnClickListener final) | Define um ouvinte a ser chamado quando o botão positivo da caixa de diálogo for pressionado |
Caixa de diálogo de seleção múltipla
Código de implementação:
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()
| usar métodos | Descrever |
|---|---|
| setTitle(Título CharSequence) | Defina o título exibido na caixa de diálogo |
| setMultiChoiceItems(CharSequence[] itens, boolean[] checkItems, ouvinte OnMultiChoiceClickListener final) | Defina uma lista de itens a serem exibidos na caixa de diálogo como conteúdo. Você será notificado sobre os itens selecionados por meio do ouvinte fornecido. A lista exibirá uma marca de seleção à direita do texto para cada item selecionado. Clicar em um item da lista não fecha a caixa de diálogo. Clicar no botão fechará a caixa de diálogo. |
| setPositiveButton (texto CharSequence, ouvinte OnClickListener final) | Define um ouvinte a ser chamado quando o botão positivo da caixa de diálogo for pressionado |
Sem caixa de diálogo de raio
MaterialAlertDialogBuilderO estilo padrão da caixa de diálogo é raio. O que devo fazer se quiser removê-lo?
MaterialAlertDialogBuilderNão setRadius(int radius), você precisa mudar de ideia. Por exemplo, crie um drawable e Backgroundtente alterá-lo.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 背景颜色为白色 -->
<solid android:color="@color/white"/>
</shape>
| usar métodos | Descrever |
|---|---|
| setBackground (fundo desenhável) | Modificar plano de fundo da caixa de diálogo |
O efeito é o seguinte:
Atributos MaterialAlertDialogBuilder
série temporal de data
selecionador de horário
MaterialTimePicker
Código de implementação:
MaterialTimePicker.Builder().build().show(supportFragmentManager,"1")
PropriedadeMaterialTimePicker
Clique para ir ao site oficial do Android para ver todas as propriedades do MaterialTimePicker
selecionador de data
MaterialDatePicker
Código de implementação:
MaterialDatePicker.Builder.datePicker().build().show(supportFragmentManager,"1")
MaterialDatePickerProperty
Clique para ir ao site oficial do Android para ver todas as propriedades do MaterialDatePicker
caixa de diálogo inferior
A caixa de diálogo inferior está implementada BottomSheetDialoge é simples de usar. Crie um arquivo de layout chamado bottom_sheet_dialog.xml, instancie-o BottomSheetDialoge está quase pronto!
<?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()
O efeito é como mostrado na figura:
BottomSheetDialog É muito simples de usar, mas se você quiser tentar modificar seu fundo, os recém-chegados geralmente entrarão em um buraco, ou seja, o raio do fundo não pode ser modificado, o que é causado pelo plano de fundo integrado BottomSheetDialog (semelhante aos problemas causados por outros raios personalizados do Dialog), neste momento precisamos ocultar o BottomSheetDialog plano de fundo integrado.
No entanto, BottomSheetDialognão há como modificar o plano de fundo. Para modificar BottomSheetDialogo plano de fundo, você deve herdar BottomSheetDialogFragmenta classe e reescrevê-la onCreate(savedInstanceState: Bundle?)e onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?)criar um novo estilo para substituir o estilo original, como segue:
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)
}
}
Crie um novo estilo em 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>
Em seguida, retorne à interface para instanciar a caixa de diálogo e exibi-la
val bottomSheetDialog = CustomBottomSheetDialogFragment()
bottomSheetDialog.show(supportFragmentManager, "1")
O efeito final é o seguinte:
Precauções
1. Você deve considerar se deve usar o Material Design nos estágios iniciais de desenvolvimento. Depois de decidir usar o Material Design, a maioria dos componentes do aplicativo deve usar o Material Design para evitar ao máximo a fragmentação da IU.
Documentos de referência:
1. Site oficial do Material
2. Introdução aos componentes do Android Material
3. Explicação detalhada do uso do BottomSheetDialog
4. Site oficial do Material Android (Diálogos)