Le componenti grafiche corrispondono agli elementi che permetteranno all'utente di interagire con il sistema, quando si parla di GUI si fa riferimento alle interfacce utente grafiche, quindi queste interfacce sono costruite attraverso elementi grafici come pulsanti, menu, icone, campi di testo, etichette, ecc. testo tra gli altri, una GUI combina il design visivo e gli eventi associati a quel design, quindi se aggiungiamo un pulsante, dobbiamo programmare l'evento associato a quel pulsante quando viene premuto da un utente.
Come accennato, concentriamoci sui componenti grafici che vengono utilizzati dai file XML, vediamo alcune delle proprietà sopra menzionate.
Proprietà fondamentali.
Vediamo alcune proprietà di base utilizzate nei componenti grafici, queste possono essere applicate a qualsiasi componente indipendentemente dalla sua tipologia, perché come detto tutti i componenti sono View quindi condividono le stesse proprietà, alcune delle più utilizzate sono:
androide: id.
Proprietà molto importante perché permette di definire un identificatore per il controllo, questa proprietà è assegnata a qualsiasi vista, ad esempio se è assegnata a un campo di immissione dati allora questo verrà utilizzato per catturare le informazioni dell'utente, quindi dobbiamo usare un nome differenziante è chiaro.
Il modo corretto per generare un identificatore è il seguente:
android:id="@+id/miTextField"
Il simbolo @+id/ significa che viene generato un nuovo identificatore, questo renderà la classe R. dal pacchetto gen del progetto, crea un riferimento a questo oggetto in modo che possa essere successivamente manipolato dal codice.
Nell'esempio, l'identificatore "miocampoditesto” per il componente.
Android: layout_width.
Definisce la larghezza associata alla vista, è una proprietà obbligatoria e il suo valore può essere definito in valori assoluti oppure indicando uno dei seguenti due valori:
-
wrap_content (Occupa lo spazio in base al suo contenuto)
-
partita genitore (Occupa tutto lo spazio disponibile)
Esempio:
android:layout_width="match_parent"Qualunqueandroid:layout_width="290dp"
Android: layout_height.
Definisce l'altezza associata alla vista, è una proprietà obbligatoria e il suo valore può essere definito in valori assoluti oppure indicando uno dei due seguenti valori:
-
wrap_content (Occupa lo spazio in base al suo contenuto)
-
partita genitore (Occupa tutto lo spazio disponibile)
Esempio:
android:layout_height="wrap_content"Qualunqueandroid:layout_height="58dp"
android:layout_margin.
Definisce un margine per il componente, permettendo di stabilire uno spazio sopra, sotto e ai suoi lati, come varianti nel caso si vogliano dare spazi indipendenti, si può fare usando le proprietà marginLeft, marginRight, marginTop o marginBottom (o all)
Esempio: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"
Android: suggerimento.
Questa proprietà consente di visualizzare il testo nel controllo come aiuto mentre l'utente non ha ancora inserito le informazioni. (Preferibile rispetto alla proprietà text)
Esempio: android:hint="Inserisci il nome"
android:tipo di input.
Determina quale tipo di input sarà consentito per la casella di testo, ciò consente una sorta di convalida dei dati e indica anche al sistema operativo quale tipo di tastiera (virtuale) utilizzare.
Tra le opzioni che possiamo associare a questa proprietà ce ne sono alcune come:
- Testo
- numero
- struttura
- parola d'ordine del testo
- telefono
- incontro
- TestoEmailIndirizzo
Ci sono molte altre opzioni che possono essere utilizzate a seconda delle necessità.
Esempio: android:inputType="numero" | android:inputType="textEmailAddress"
android:textSize.
Definisce una dimensione per il testo da visualizzare sullo schermo, le unità di misura devono essere prese in considerazione dove sp è usato per i testi
Esempio: android:textSize="25sp"
android:styletext.
Definisce uno stile per il testo, potendo definire il testo come normale, grassetto, corsivo (o entrambi).
Esempio: android:textStyle="grassetto" | android:textStyle="corsivo" | android:textStyle="grassetto|corsivo"
android:testoColore.
Definisce un colore per il testo, potendo aggiungere un colore dal file delle proprietà "colori" o un valore esadecimale
Esempio: android:textColor="@color/teal_700" | android:textColor="#9C27B0"
android:backgroundTint.
Definisce un colore di sfondo per il componente, puoi anche ottenere il colore dalle proprietà "colori" o un valore esadecimale
Esempio: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"
Android:testo.
Definisce il contenuto testuale associato alla vista. Sebbene il suo valore possa essere assegnato direttamente, si consiglia vivamente di utilizzare il file di stringhe disponibile nella cartella delle risorse.
Esempio: android:text="Bienvenidos" | android:text="@stringa/titolo"
Questa proprietà è comune nelle viste che visualizzano il testo nell'interfaccia del dispositivo. La schermata seguente mostra il file di risorse strings.xml dove vengono aggiunti diversi valori per i testi
e successivamente si accede a questi valori dalle viste
Dopo aver cancellato le proprietà precedenti, vediamo quali sono i componenti grafici di base.
Pulsante.
Questi corrispondono ai pulsanti di base che conosciamo, mostra solo un pulsante con il suo testo interno e un margine definito.
Il pulsante svolgerebbe la funzione di base di attesa di un evento quando viene premuto.
interruttore
Il tipo ToggleButton corrisponde ad un tipo di pulsante che può essere mantenuto in 2 possibili stati, premuto o non premuto, per questo non viene definita solo una singola proprietà text, ma 2 a seconda dello stato che ha al momento, utilizzando le proprietà di l'androide: textOn e android:textOff.
Come i pulsanti tradizionali, ToggleButton può essere programmato per rispondere all'evento clic, ma probabilmente devi solo sapere in che stato si trova. Questo può essere fatto consultando il metodo isChecked(), che restituisce il valore true nel caso in cui viene premuto e false in caso contrario.
tragitto casa-lavoro
Questo controllo può simulare un interruttore molto simile al funzionamento di ToggleButton, ma con un aspetto visivo diverso.
Ricorda che a seconda della versione di Android che stiamo utilizzando, l'aspetto visivo dei nostri componenti può cambiare, in questo caso il controller Switch per le versioni Android 5.0 e successive sarebbe simile a questo:
ImageButton
Questo tipo di pulsante ti consente di collegare un'immagine ad essa da mostrare all'utente anziché un testo come al solito, per questo possiamo prendere l'immagine dalle cartelle /res/drawable e caricarla utilizzando la proprietà android:src, in questo caso utilizzeremo un'immagine direttamente dalle risorse Android.
Visualizzazione testo
Questi corrispondono alle etichette di testo di base che vengono mostrate agli utenti, queste in altre lingue sono note come etichette e consentono di visualizzare un testo associato alla proprietà android:text, queste etichette hanno altre proprietà che consentono di manipolarne le dimensioni, lo sfondo colore, colore e tipo di carattere, stile, ecc.
modifica il testo
La vista Android EditText è equivalente a ASP e C# Textbox o JAVA JTextField, è un controllo che permette di catturare il testo digitato dall'utente in fase di esecuzione.
casella di selezione
Il controllo della casella di controllo viene utilizzato per selezionare o deselezionare le opzioni in un'applicazione. Il modo di definirlo nell'interfaccia e le proprietà disponibili per la sua manipolazione tramite codice sono analoghe a quelle commentate nel controllo ToogleButton.
Questo controllo eredita dal controllo TextView, quindi tutte le opzioni di formattazione già citate per questo controllo sono valide anche per il checkBox.
Nel codice dell'applicazione è possibile verificare se questo controllo è selezionato o meno tramite il metodo isChecked() che restituisce il valore di VERO se sei stato selezionato o falso in caso contrario, è anche possibile utilizzare il metodo setChecked(value) per impostare uno stato specifico per il controllo, where value VERO sarebbe per selezionato e falso da non selezionato.
L'evento che normalmente viene programmato per questo controllo e che viene eseguito ogni volta che cambia il suo stato (selezionato/non selezionato) è onCheckedChanged.
pulsante radio
Come il controllo CheckBox, il RadioButton serve per spuntare o deselezionare una data opzione, la differenza sta nel tipo di selezione che si vuole fare. I RadioButton vengono normalmente utilizzati in gruppi per definire un insieme di opzioni da cui è possibile selezionarne solo una, ovvero ogni opzione si esclude a vicenda, quindi quando si seleziona un'opzione quella precedentemente selezionata verrà automaticamente deselezionata. Questi gruppi sono definiti dall'elemento RadioGroup, che a sua volta conterrà tutti gli elementi RadioButton che rappresentano le opzioni.
RadioGroups può impostare la proprietà android:orientation su "Vertical" o "Horizontal" per determinare come verranno ordinati i RadioButtons che contiene.
Il RadioButton, a sua volta, oltre a width e height, deve definire la proprietà android:text per associare il testo dell'opzione rappresentata e android:id per associare un codice al controllo in modo che possa essere manipolato dalla logica dell'applicazione.
Per manipolare il controllo dalla logica applicativa si possono utilizzare diversi metodi, tra i quali troviamo check(io andrei) che viene utilizzato per impostare il radiobutton identificato con l'id passato come parametro come selezionato, il metodo clearCheck() viene utilizzato per deselezionare tutti i radiobutton nel gruppo e il metodo getCheckedRadioButtonId() viene utilizzato per ottenere l'id del pulsante di opzione che si trova all'interno del gruppo selezionato o il valore di -1 se non è selezionato alcun elemento.
L'evento più importante di questo controllo è anche l'onCheckedChanged, che viene attivato quando viene selezionato un elemento del gruppo (ricordiamo che la selezione di un elemento del gruppo indica la deselezione di un altro).
Ed ecco fatto, questi sono alcuni dei componenti grafici di base che utilizzeremo durante tutto il corso, nei prossimi post continueremo con altri componenti o layout.
Potrebbe anche interessarti.
C'è qualcosa che vuoi aggiungere o commentare su questa voce? sentiti libero di fare....E se ti è piaciuto... ti invito a condividere Y Iscriviti facendo clic sul pulsante "Unisciti a questo sito" per ascoltare altri post come questo 😉