Xamarin: creazione della GUI dell'app

TextView

TextView è un componente molto importante dei widget Android. Viene utilizzato principalmente per la visualizzazione di testi su uno schermo Android.

Per creare una visualizzazione di testo, è sufficiente aprire main.axml e aggiungi il codice seguente tra i tag di layout lineare.

<TextView 
   android:text = "Hello I am a text View" 
   android:layout_width = "match_parent" 
   android:layout_height = "wrap_content" 
   android:id = "@+id/textview1" />

Pulsante

Un pulsante è un controllo utilizzato per attivare un evento quando viene cliccato. Sotto il tuoMain.axml file, digita il codice seguente per creare un pulsante.

<Button 
   android:id = "@+id/MyButton" 
   android:layout_width = "fill_parent" 
   android:layout_height = "wrap_content" 
   android:text = "@string/Hello" />

Aperto Resources\Values\Strings.xml e digita la seguente riga di codice tra il tag <resources>.

<string name="Hello">Click Me!</string>

Il codice sopra fornisce il valore del pulsante che abbiamo creato. Successivamente, apriamoMainActivity.cse creare l'azione da eseguire quando si fa clic sul pulsante. Digita il codice seguente sottobase.OnCreate metodo (bundle).

Button button = FindViewById<Button>(Resource.Id.MyButton); 
button.Click += delegate { button.Text = "You clicked me"; };

Il codice sopra mostra "Mi hai fatto clic" quando un utente fa clic sul pulsante.

FindViewById<< -->Questo metodo trova l'ID di una vista che è stata identificata. Cerca l'ID nel file di layout .axml.

Casella di controllo

Una casella di controllo viene utilizzata quando si desidera selezionare più di un'opzione da un gruppo di opzioni. In questo esempio, creeremo una casella di controllo che, se selezionata, mostra un messaggio che è stata selezionata, altrimenti viene visualizzata deselezionata.

Per cominciare, apriamo Main.axml file nel nostro progetto e digita la seguente riga di codice per creare una casella di controllo.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <CheckBox 
      android:text = "CheckBox" 
      android:padding = "25dp" 
      android:layout_width = "300dp" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/checkBox1" 
      android:textColor = "@android:color/black" 
      android:background = "@android:color/holo_blue_dark" /> 
</LinearLayout>

Quindi, vai a MainActivity.cs per aggiungere il codice di funzionalità.

CheckBox checkMe = FindViewById<CheckBox>(Resource.Id.checkBox1); 
checkMe.CheckedChange += (object sender, CompoundButton.CheckedChangeEventArgs e) => { 
   CheckBox check = (CheckBox)sender; 
   if(check.Checked) { 
      check.Text = "Checkbox has been checked"; 
   } else { 
      check.Text = "Checkbox has not been checked"; 
   } 
};

Dal codice sopra, troviamo prima la casella di controllo utilizzando findViewById. Successivamente, creiamo un metodo gestore per la nostra casella di controllo e nel nostro gestore creiamo un'istruzione if else che visualizza un messaggio a seconda del risultato selezionato.

CompoundButton.CheckedChangeEventArgs → Questo metodo attiva un evento quando lo stato della casella di controllo cambia.

Barra di avanzamento

Una barra di avanzamento è un controllo utilizzato per mostrare la progressione di un'operazione. Per aggiungere una barra di avanzamento, aggiungi la seguente riga di codice inMain.axml file.

<ProgressBar 
   style="?android:attr/progressBarStyleHorizontal" 
   android:layout_width = "match_parent" 
   android:layout_height = "wrap_content" 
   android:id = "@+id/progressBar1" />

Quindi, vai a MainActivity.cs e impostare il valore della barra di avanzamento.

ProgressBar pb = FindViewById<ProgressBar>(Resource.Id.progressBar1); 
pb.Progress = 35;

Nel codice precedente, abbiamo creato una barra di avanzamento con un valore di 35.

Tasti della radio

Questo è un widget Android che consente a una persona di sceglierne uno da un insieme di opzioni. In questa sezione, creeremo un gruppo radio contenente un elenco di auto che recupereranno un pulsante di opzione selezionato.

Innanzitutto, aggiungiamo un gruppo radio e un file textview come mostrato nel codice seguente -

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "@android:color/darker_gray" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <TextView 
      android:text = "What is your favourite Car" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/textView1" 
      android:textColor = "@android:color/black" /> 
   <RadioGroup 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/radioGroup1" 
      android:backgroundTint = "#a52a2aff" 
      android:background = "@android:color/holo_green_dark"> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Ferrari" 
      android:id = "@+id/radioFerrari" /> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Mercedes" 
      android:id = "@+id/radioMercedes" /> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Lamborghini" 
      android:id = "@+id/radioLamborghini" />
   <RadioButton 
      android:text = "Audi" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/radioAudi" /> 
   </RadioGroup> 
</LinearLayout>

Per eseguire un'azione, quando si fa clic su un pulsante di opzione, aggiungiamo un'attività. Vai aMainActivity.cs e creare un nuovo gestore di eventi come mostrato di seguito.

private void onClickRadioButton(object sender, EventArgs e) { 
   RadioButton cars = (RadioButton)sender; 
   Toast.MakeText(this, cars.Text, ToastLength.Short).Show 
   (); 
}

Toast.MakeText() →Questo è un metodo di visualizzazione utilizzato per visualizzare un messaggio / output in un piccolo popup. Nella parte inferiore del fileOnCreate() metodo subito dopo SetContentView(), aggiungi la seguente parte di codice. Questo catturerà ciascuno dei pulsanti di opzione e li aggiungerà al gestore di eventi che abbiamo creato.

RadioButton radio_Ferrari = FindViewById<RadioButton> 
   (Resource.Id.radioFerrari); 
   RadioButton radio_Mercedes = FindViewById<RadioButton> 
   (Resource.Id.radioMercedes); 
   RadioButton radio_Lambo = FindViewById<RadioButton> 
   (Resource.Id.radioLamborghini); 
   RadioButton radio_Audi = FindViewById<RadioButton> 
   (Resource.Id.radioAudi); 
   radio_Ferrari.Click += onClickRadioButton; 
   radio_Mercedes.Click += onClickRadioButton; 
   radio_Lambo.Click += onClickRadioButton; 
   radio_Audi.Click += onClickRadioButton;

Ora esegui la tua applicazione. Dovrebbe visualizzare la seguente schermata come output:

Pulsanti di commutazione

I pulsanti di commutazione vengono utilizzati per alternare tra due stati, ad esempio, può alternare tra ON e OFF. ApertoResources\layout\Main.axml e aggiungi le seguenti righe di codice per creare un pulsante di attivazione / disattivazione.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <ToggleButton 
      android:id = "@+id/togglebutton" 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:textOn = "Torch ON" 
      android:textOff = "Torch OFF" 
      android:textColor = "@android:color/black" /> 
</LinearLayout>

Possiamo aggiungere azioni alla barra di commutazione quando viene cliccata. ApertoMainActivity.cs e aggiungi le seguenti righe di codice dopo OnCreate() classe del metodo.

ToggleButton togglebutton = FindViewById<ToggleButton> (Resource.Id.togglebutton); 
togglebutton.Click += (o, e) => { 
   if (togglebutton.Checked) 
      Toast.MakeText(this, "Torch is ON", ToastLength.Short).Show (); 
   else 
      Toast.MakeText(this, "Torch is OFF", 
      ToastLength.Short).Show(); 
};

Ora, quando esegui l'app, dovrebbe visualizzare il seguente output:

Barra delle valutazioni

Una barra delle valutazioni è un elemento del modulo composto da stelle che gli utenti dell'app possono utilizzare per valutare le cose che hai fornito loro. Nel tuoMain.axml file, crea una nuova barra di valutazione con 5 stelle.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <RatingBar 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/ratingBar1" 
      android:numStars = "5" 
      android:stepSize = "1.0" /> 
</LinearLayout>

Quando si esegue l'app, dovrebbe visualizzare il seguente output:

Textview a completamento automatico

Questa è una visualizzazione di testo che mostra suggerimenti completi mentre un utente sta digitando. Creeremo una visualizzazione di testo a completamento automatico contenente un elenco di nomi di persone e un pulsante che al clic ci mostrerà il nome selezionato.

Aperto Main.axml e scrivi il codice seguente.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:layout_width = "fill_parent" 
   android:background = "#d3d3d3" 
   android:layout_height = "fill_parent"> 
   <TextView 
      android:text = "Enter Name" 
      android:textAppearance = "?android:attr/textAppearanceMedium" 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/textView1" 
      android:padding = "5dp" 
      android:textColor = "@android:color/black" /> 
   <AutoCompleteTextView 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/autoComplete1" 
      android:textColor = "@android:color/black" /> 
   <Button 
      android:text = "Submit" 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/btn_Submit" 
      android:background="@android:color/holo_green_dark" /> 
</LinearLayout>

Il codice sopra genera un TextView per la digitazione, AutoCompleteTextViewper mostrare i suggerimenti e un pulsante per visualizzare i nomi immessi da TextView. Vai aMainActivity.cs per aggiungere la funzionalità.

Crea un nuovo metodo del gestore eventi come mostrato di seguito.

protected void ClickedBtnSubmit(object sender, System.EventArgs e){ 
   if (autoComplete1.Text != ""){ 
      Toast.MakeText(this, "The Name Entered =" 
         + autoComplete1.Text, ToastLength.Short).Show(); 
   } else { 
      Toast.MakeText(this, "Enter a Name!", ToastLength.Short).Show(); 
   } 
}

Il gestore creato controlla se la visualizzazione di testo del completamento automatico è vuota. Se non è vuoto, visualizza il testo di completamento automatico selezionato. Digita il codice seguente all'interno del fileOnCreate() classe.

autoComplete1 = FindViewById<AutoCompleteTextView>(Resource.Id.autoComplete1); 
btn_Submit = FindViewById<Button>(Resource.Id.btn_Submit);  
var names = new string[] { "John", "Peter", "Jane", "Britney" }; 
ArrayAdapter adapter = new ArrayAdapter<string>(this,           
   Android.Resource.Layout.SimpleSpinnerItem, names); 
autoComplete1.Adapter = adapter; 
btn_Submit.Click += ClickedBtnSubmit;

ArrayAdapter - Questo è un gestore di raccolte che legge gli elementi di dati da una raccolta di elenchi e li restituisce come una visualizzazione o li visualizza sullo schermo.

Ora, quando esegui l'applicazione, dovrebbe visualizzare il seguente output.