Publicado en Android

Diálogo con una lista de elementos de dos lineas


Apuntes de como crear un cuadro de diálogo con lista y sus elementos tengan dos lineas para representar datos, perfecto para mostrar contenido estilo clave valor.

Prerequesitos Parcelize

Antes de todo añadir soporte a Parcelize añadir en el gradle modulo de app dentro del bloque plugins

plugins {
    ...
    id 'kotlin-parcelize'
    ...
}

Luego crear una dataClass que pueda almacenar datos clave y Valor con Parcelize

@Parcelize
data class KeyValues(
    val key:String,
    val value:String?
) : Parcelable

Implementación de KeyValueListDialogFragment

Código kotlin para implementar KeyValueListDialogFragment

class KeyValueListDialogFragment : DialogFragment() {


    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {

        return activity?.let {

            val args = requireArguments()
            val title = args.getString(ARG_TITLE)
            val keyValues: ArrayList<KeyValues>? = args.getParcelableArrayList(ARG_KEY_VALUE)
            val listItems: ArrayList<HashMap<String, String>> = arrayListOf()

            keyValues?.forEach {
                val map = HashMap<String, String>()
                map["key"] = it.key
                map["value"] = it.value.toString()
                listItems.add(map)
            }

            val dialog: AlertDialog.Builder = AlertDialog.Builder(requireActivity())

            val from = arrayOf("key", "value")
            val to = intArrayOf(android.R.id.text1, android.R.id.text2)
            val adapter = SimpleAdapter(
                requireActivity(),
                listItems,
                android.R.layout.simple_list_item_2,
                from,
                to
            )

            dialog.setAdapter(adapter, null)


            dialog.setNegativeButton(android.R.string.cancel) { _dialog, _ -> _dialog?.dismiss() }

            dialog.setTitle(title)


            return dialog.create()
        } ?: throw IllegalStateException("Activity cannot be null")

    }

    companion object {
        private val TAG = KeyValueListDialogFragment::class.java.simpleName
        const val ARG_TITLE = "ARG_TITLE"
        const val ARG_KEY_VALUE = "ARG_KEY_VALUE"

        @JvmStatic
        fun newInstance(title: String, keyValues: ArrayList<KeyValues>): KeyValueListDialogFragment {
            val dialog = KeyValueListDialogFragment()

            val args = Bundle().apply {
                putString(ARG_TITLE, title)
                putParcelableArrayList(ARG_KEY_VALUE, keyValues)
            }

            dialog.arguments = args
            return dialog

        }

    }
}

Su uso

Para armar y llamar el cuadro de dialogo, desde un fragmento

private fun showKeyValuesListDialog() {
    //Prevent multiple instances
    if (requireActivity().supportFragmentManager.findFragmentByTag("keyvaluelistdialog") != null) return

    val data : ArrayList<KeyValues> = arrayListOf(
        KeyValues("Two-line item","Secondary text"),
        KeyValues("Two-line item","Secondary text"),
        KeyValues("Two-line item","Secondary text"),
        KeyValues("Two-line item","Secondary text")
    )
    val modalDialog = KeyValueListDialogFragment()
    val args = Bundle().apply {
        putString(KeyValueListDialogFragment.ARG_TITLE, "Title of dialog")
        putParcelableArrayList(KeyValueListDialogFragment.ARG_KEY_VALUE, data)
    }
    modalDialog.arguments = args
    modalDialog.show(requireActivity().supportFragmentManager, "keyvaluelistdialog")
}

Otra alternativa para pasar parametros justo en su construcción mediante newInstance

val modalDialog = KeyValueListDialogFragment.newInstance(
    "titulo de preuba",
    data
)

Autor:

Desarrollador freelance programador apasionado por el arte de programar, amante del auto aprendizaje y interesado por la tecnología en general.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .