Condivisione della tecnologia

Progettazione dell'interfaccia della calcolatrice Android - Operazione pratica del layout della tabella

2024-07-08

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

obiettivo della missione

Utilizzare TextView, Button, ecc. per implementare un'interfaccia della calcolatrice, come mostrato nella Figura 1.

Inserisci qui la descrizione dell'immagine
Figura 1 Rendering dell'interfaccia del calcolatore

analisi del compito

L'intera interfaccia utilizza un layout di tabella. La prima riga utilizza un controllo TextView che si estende su 4 colonne, le 4 righe centrali e 4 colonne e il primo controllo nell'ultima riga si estende su 2 colonne.

Implementazione del compito

1) Crea un nuovo progetto, seleziona "Attività visualizzazioni vuote", specifica il nome del progetto come Calucator e il nome del pacchetto come cn.edu.jssvc.calucator.
2) Utilizzare l'interfaccia di progettazione del layout lineare, aprire Activity_mail.xml, passare alla vista Codice, modificare il layout del vincolo (ConstraintLayout) in Codice nel layout della tabella (TableLayout), eliminare i controlli al suo interno e impostare l'attributo android:stretchColumns del TabellaLayout = "0,1,2,3".
3) Trascinare TableRow nell'area Palette sull'albero dei componenti e impostare l'attributo TableRow android:layout_weight="1" in modo che queste cinque righe dividano equamente l'intero schermo, come mostrato nella Figura 2 e nella Figura 3.
Inserisci qui la descrizione dell'immagine
Figura 2 Impostazioni TableRow
Inserisci qui la descrizione dell'immagine
Figura 3 Impostazioni delle proprietà TableRow
4) Trascina il controllo TextView nella riga 1 e imposta il suo attributo android:layout_span su 4, ovvero su 4 colonne: