Share
I layout di tabella possono essere utilizzati per visualizzare dati tabulari o allineare ordinatamente il contenuto dello schermo in modo simile a una tabella HTML su una pagina Web. Scopri come crearli con i file XML di layout e tramite il codice.
Capire i layout è importante per una buona progettazione delle applicazioni Android. In questo tutorial, si impara tutto sui layout di tabella, che organizzano controlli dell'interfaccia utente o widget, sullo schermo in righe e colonne ben definite. Se utilizzati correttamente, i layout delle tabelle possono essere il potente paradigma di layout su cui le applicazioni Android possono progettare i propri schermi o visualizzare dati tabulari.
Un layout di tabella è esattamente quello che ci si potrebbe aspettare: una griglia composta da righe e colonne, in cui una cella può visualizzare un controllo di visualizzazione. Da una prospettiva di progettazione dell'interfaccia utente, un TableLayout comprende i controlli TableRow, uno per ogni riga della tabella. I contenuti di un TableRow sono semplicemente i controlli della vista che andranno in ciascuna cella? della griglia della tabella.
L'aspetto di un TableLayout è regolato da diverse regole aggiuntive. Innanzitutto, il numero di colonne dell'intera tabella corrisponde al numero di colonne nella riga con il maggior numero di colonne. In secondo luogo, la larghezza di ogni colonna è definita come la larghezza del contenuto più ampio nella colonna. Gli attributi layout_width di righe e celle figlio di TableLayout sono sempre MATCH_PARENT - sebbene possano essere inseriti in un file XML, il valore effettivo non può essere sovrascritto. È possibile definire il layout_height di una cella di TableLayout, ma un attributo TableRow per layout_height è sempre WRAP_CONTENT. Le celle possono estendersi su colonne, ma non su righe. Questo viene fatto attraverso l'attributo layout_span della vista figlio di un TableRow. Una cella è una vista figlio singolo all'interno di un TableRow. Se si desidera una cella più complessa con più viste, utilizzare una vista di layout per incapsulare le altre viste.
Detto questo, alcune regole possono essere modificate. Le colonne possono essere contrassegnate come estensibili, il che significa che la larghezza può espandersi fino alla dimensione del contenitore genitore. Le colonne possono anche essere contrassegnate come restringibili, il che significa che possono essere ridotte in larghezza in modo che l'intera riga si adatti allo spazio fornito dal contenitore principale. Puoi anche comprimere un'intera colonna.
Per la documentazione completa sui layout di tabella, consultare la documentazione di Android SDK per la classe TableLayout. Gli attributi XML associati per l'utilizzo nelle risorse XML sono anche definiti nella documentazione.
I layout sono spiegati meglio con l'esempio, e i layout delle tabelle non sono diversi. Diciamo che vogliamo progettare uno schermo che mostri le previsioni del tempo estese. Un layout di tabella potrebbe essere una buona scelta per l'organizzazione di queste informazioni:
Questa prima figura mostra un primo sguardo alla tabella all'interno dell'editor di layout:
Il modo più comodo e manutenibile per progettare interfacce utente dell'applicazione è creare risorse di layout XML. Questo metodo semplifica enormemente il processo di progettazione dell'interfaccia utente, spostando gran parte della creazione statica e del layout dei controlli dell'interfaccia utente e della definizione degli attributi di controllo in XML, invece di sporcare il codice.
Le risorse di layout XML devono essere memorizzate nella gerarchia di directory di progetto / res / layout. Diamo un'occhiata al layout della tabella presentato nella sezione precedente. Questo file di risorse di layout, giustamente denominato /res/layout/table.xml, è definito in XML come segue:
Ricorda che, dall'interno dell'attività, è necessaria solo una singola riga di codice all'interno del metodo onCreate () per caricare e visualizzare una risorsa di layout sullo schermo. Se la risorsa di layout è stata memorizzata nel file /res/layout/table.xml, quella riga di codice sarebbe:
setContentView (R.layout.table);
Questo layout di tabella ha tutte le colonne impostate per ridurre e allungare utilizzando un "*" nel valore. Se solo alcune colonne dovessero ridursi o allungarsi, i valori sarebbero una lista separata da virgole (usando gli indici basati su 0 per le colonne).
La tabella ora appare come segue per gli screenshot quando si trova in modalità verticale e orizzontale.
È anche possibile creare e configurare in modo programmatico i layout di tabella in Java. Questo viene fatto usando le classi TableLayout e TableRow (android.widget.TableLayout e android.widget.TableRow). Troverai i parametri di visualizzazione univoci per ciascun controllo nelle classi TableLayout.LayoutParams e TableRow.LayoutParams. Inoltre, i parametri di layout tipici (android.view.ViewGroup.LayoutParams), come layout_height e layout_width, nonché i parametri di margine (ViewGroup.MarginLayoutParams), si applicano ancora agli oggetti TableLayout e TableRow, ma non necessariamente alle celle di tabella. Per le celle di tabella (qualsiasi vista all'interno di TableRow), la larghezza è sempre MATCH_PARENT. L'altezza può essere definita, ma il valore predefinito è WRAP_CONTENT e non è necessario specificarlo.
Invece di caricare una risorsa di layout direttamente utilizzando il metodo setContentView () come illustrato in precedenza, se si crea un layout a livello di codice, è necessario invece creare il contenuto dello schermo in Java e quindi fornire un oggetto di layout principale che contiene tutti i contenuti di controllo da visualizzare come viste secondarie al metodo setContentView (). In questo caso, il layout principale utilizzato sarà il layout della tabella creato.
Ad esempio, il codice seguente illustra come avere un'istanza a livello di codice un parametro di layout TableLayout e riprodurre l'esempio mostrato in precedenza in XML:
Accentsconagua
@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); TableLayout table = new TableLayout (this); table.setStretchAllColumns (true); table.setShrinkAllColumns (true); TableRow rowTitle = new TableRow (this); rowTitle.setGravity (Gravity.CENTER_HORIZONTAL); TableRow rowDayLabels = new TableRow (this); TableRow rowHighs = new TableRow (this); TableRow rowLows = new TableRow (this); TableRow rowConditions = new TableRow (this); rowConditions.setGravity (Gravity.CENTER); TextView empty = new TextView (this); // colonna titolo / riga TextView title = new TextView (this); title.setText ("Tabella meteo Java"); title.setTextSize (TypedValue.COMPLEX_UNIT_DIP, 18); title.setGravity (Gravity.CENTER); title.setTypeface (Typeface.SERIF, Typeface.BOLD); Parametri TableRow.LayoutParams = new TableRow.LayoutParams (); params.span = 6; rowTitle.addView (title, params); // label column TextView highsLabel = new TextView (this); highsLabel.setText ("Day High"); highsLabel.setTypeface (Typeface.DEFAULT_BOLD); TextView lowsLabel = new TextView (this); lowsLabel.setText ("Giorno basso"); lowsLabel.setTypeface (Typeface.DEFAULT_BOLD); TextView conditionsLabel = new TextView (this); conditionsLabel.setText ( "Condizioni"); conditionsLabel.setTypeface (Typeface.DEFAULT_BOLD); rowDayLabels.addView (vuoto); rowHighs.addView (highsLabel); rowLows.addView (lowsLabel); rowConditions.addView (conditionsLabel); // giorno 1 colonna TextView day1Label = new TextView (this); day1Label.setText ("7 febbraio"); day1Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day1High = new TextView (this); day1High.setText ( "28шF"); day1High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day1Low = new TextView (this); day1Low.setText ( "15шF"); day1Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day1Conditions = new ImageView (this); day1Conditions.setImageResource (R.drawable.hot); rowDayLabels.addView (day1Label); rowHighs.addView (day1High); rowLows.addView (day1Low); rowConditions.addView (day1Conditions); // day2 column TextView day2Label = new TextView (this); day2Label.setText ("8 febbraio"); day2Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day2High = new TextView (this); day2High.setText ( "26шF"); day2High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day2Low = new TextView (this); day2Low.setText ( "14шF"); day2Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day2Conditions = new ImageView (questo); day2Conditions.setImageResource (R.drawable.pt_cloud); rowDayLabels.addView (day2Label); rowHighs.addView (day2High); rowLows.addView (day2Low); rowConditions.addView (day2Conditions); // day3 column TextView day3Label = new TextView (this); day3Label.setText ("9 febbraio"); day3Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day3High = new TextView (this); day3High.setText ( "23шF"); day3High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day3Low = new TextView (this); day3Low.setText ( "3шF"); day3Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day3Conditions = new ImageView (this); day3Conditions.setImageResource (R.drawable.snow); rowDayLabels.addView (day3Label); rowHighs.addView (day3High); rowLows.addView (day3Low); rowConditions.addView (day3Conditions); // day4 column TextView day4Label = new TextView (this); day4Label.setText ("10 febbraio"); day4Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day4High = new TextView (this); day4High.setText ( "17шF"); day4High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day4Low = new TextView (this); day4Low.setText ( "5шF"); day4Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day4Conditions = new ImageView (questo); day4Conditions.setImageResource (R.drawable.lt_snow); rowDayLabels.addView (day4Label); rowHighs.addView (day4High); rowLows.addView (day4Low); rowConditions.addView (day4Conditions); // day5 column TextView day5Label = new TextView (this); day5Label.setText ("11 febbraio"); day5Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day5 High = new TextView (this); day5High.setText ( "19шF"); day5High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day5Low = new TextView (this); day5Low.setText ( "6шF"); day5Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day5Conditions = new ImageView (questo); day5Conditions.setImageResource (R.drawable.pt_sun); rowDayLabels.addView (day5Label); rowHighs.addView (day5High); rowLows.addView (day5Low); rowConditions.addView (day5Conditions); table.addView (rowTitle); table.addView (rowDayLabels); table.addView (rowHighs); table.addView (rowLows); table.addView (rowConditions); setContentView (tabella); Diamo un'occhiata più da vicino alla lista dei codici Java sopra. Per prima cosa creiamo il controllo TableLayout e impostiamo gli attributi shrinkable ed estensibili su true per tutte le colonne usando i metodi setStretchAllColumns () e setShrinkAllColumns (). Successivamente, creiamo sistematicamente cinque TableRow. Ogni TableRow conterrà i controlli di visualizzazione (controlli TextView per titolo, date, alti e dati bassi oltre ai controlli ImageView per la grafica delle condizioni meteorologiche). Vedrai come viene gestito lo span della colonna con il primo TableRow. Colonne specifiche di viste vengono create, ridisegnate e aggiunte, nell'ordine, al TableRow appropriato utilizzando il metodo addView (). Ogni TableRow viene aggiunto al controllo TableLayout, in ordine, utilizzando il metodo addView () di TableLayout. Infine, carichiamo il TableLayout e lo visualizziamo sullo schermo usando il metodo setContentView ().
Come puoi vedere, il codice può aumentare rapidamente di dimensioni man mano che vengono aggiunti più controlli sullo schermo. Per organizzazione e manutenibilità, la definizione e l'utilizzo di layout a livello di programmazione è preferibile per il caso dispari piuttosto che per la norma. Inoltre, in un caso come questo, i dati provengono in genere da un'altra fonte rispetto alle stringhe che digitiamo, quindi un ciclo potrebbe essere più appropriato per molte applicazioni.
I risultati sono mostrati nella figura seguente. Come puoi vedere, sono uguali ai risultati precedenti, come previsto.
Sebbene i layout di tabella possano essere utilizzati per progettare intere interfacce utente, di solito non sono lo strumento migliore per farlo, poiché derivano da LinearLayout e non dal più efficiente dei controlli di layout. Se ci pensate, un TableLayout è poco più di un insieme organizzato di LinearLayout nidificati, e i layout di nidificazione troppo in profondità sono generalmente scoraggiati per motivi di prestazioni. Tuttavia, per i dati che sono già in un formato adatto per una tabella, come i dati del foglio di calcolo, la disposizione delle tabelle può essere una scelta ragionevole.
Inoltre, i dati del layout di tabella possono variare in base alle dimensioni e alle risoluzioni dello schermo. In genere, è buona prassi progettuale assicurarsi di abilitare lo scorrimento quando si visualizzano grandi quantità di dati. Ad esempio, se l'esempio meteorologico utilizzato in precedenza include anche un "write-up"? delle condizioni, questo testo potrebbe essere una frase o venti frasi, quindi consentire lo scorrimento verticale e / o orizzontale sarebbe prudente.
Le interfacce utente delle applicazioni Android sono definite utilizzando i layout e i layout delle tabelle sono incredibilmente utili per la visualizzazione di dati di visualizzazione o controlli in righe e colonne. L'utilizzo dei layout di tabella dove sono appropriati può rendere più semplice e veloce la progettazione di molti schermi. Tuttavia, tieni presente che TableLayout è derivato da LinearLayout e presenta molti degli stessi limiti di prestazioni.
Gli sviluppatori mobili Lauren Darcey e Shane Conder hanno coautore diversi libri sullo sviluppo di Android: un libro di programmazione approfondito intitolato Sviluppo di applicazioni wireless Android e Sams TeachYourself Sviluppo di applicazioni Android in 24 ore. Quando non scrivono, passano il loro tempo a sviluppare software mobile presso la loro azienda ea fornire servizi di consulenza. Possono essere contattati via email a [email protected], tramite il loro blog su androidbook.blogspot.com e su Twitter @androidwireless.
я я
