Compartir tecnología

Diseño de la interfaz de la calculadora de Android: operación práctica de TableLayout

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

objetivo de la misión

Utilice TextView, Button, etc. para implementar una interfaz de calculadora, como se muestra en la Figura 1.

Insertar descripción de la imagen aquí
Figura 1 Representaciones de la interfaz de la calculadora

análisis de tareas

Toda la interfaz utiliza un diseño de tabla. La primera fila usa un control TextView que abarca 4 columnas, las 4 filas y 4 columnas del medio, y el primer control de la última fila abarca 2 columnas.

Implementación de tareas

1) Cree un nuevo proyecto, seleccione "Actividad de vistas vacías", especifique el nombre del proyecto como Calucator y el nombre del paquete como cn.edu.jssvc.calucator.
2) Utilice la interfaz de diseño de diseño lineal, abra Activity_mail.xml, cambie a la vista Código, cambie el diseño de restricción (ConstraintLayout) en Código al diseño de tabla (TableLayout), elimine los controles que contiene y establezca el atributo android:stretchColumns del Diseño de tabla = "0,1,2,3".
3) Arrastre TableRow en el área de Paleta al Árbol de componentes y configure el atributo TableRow android:layout_weight="1" para que estas cinco filas dividan equitativamente toda la pantalla, como se muestra en la Figura 2 y la Figura 3.
Insertar descripción de la imagen aquí
Figura 2 Configuración de TableRow
Insertar descripción de la imagen aquí
Figura 3 Configuración de la propiedad TableRow
4) Arrastre el control TextView a la fila 1 y establezca su atributo android:layout_span en 4, es decir, abarque 4 columnas: