Xamarin: creación de la GUI de la aplicación

Vista de texto

TextView es un componente muy importante de los widgets de Android. Se utiliza principalmente para mostrar textos en una pantalla de Android.

Para crear una vista de texto, simplemente abra main.axml y agregue el siguiente código entre las etiquetas de diseño lineal.

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

Botón

Un botón es un control que se utiliza para activar un evento cuando se hace clic en él. Debajo de tuMain.axml archivo, escriba el siguiente código para crear un botón.

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

Abierto Resources\Values\Strings.xml y escriba la siguiente línea de código entre la etiqueta <resources>.

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

El código anterior proporciona el valor del botón que creamos. A continuación, abrimosMainActivity.csy cree la acción que se realizará cuando se haga clic en el botón. Escriba el siguiente código debajobase.OnCreate (paquete) método.

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

El código anterior muestra "Me hizo clic" cuando un usuario hace clic en el botón.

FindViewById<< -->Este método busca el ID de una vista que se identificó. Busca la identificación en el archivo de diseño .axml.

Caja

Se utiliza una casilla de verificación cuando se desea seleccionar más de una opción de un grupo de opciones. En este ejemplo, vamos a crear una casilla de verificación que, al seleccionarla, muestra un mensaje de que se ha marcado, de lo contrario se muestra sin marcar.

Para empezar, abrimos Main.axml en nuestro proyecto y escriba la siguiente línea de código para crear una casilla de verificación.

<?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>

A continuación, vaya a MainActivity.cs para agregar el código de funcionalidad.

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"; 
   } 
};

Desde el código anterior, primero encontramos la casilla de verificación usando findViewById. A continuación, creamos un método de controlador para nuestra casilla de verificación y, en nuestro controlador, creamos una declaración if else que muestra un mensaje según el resultado seleccionado.

CompoundButton.CheckedChangeEventArgs → Este método dispara un evento cuando cambia el estado de la casilla de verificación.

Barra de progreso

Una barra de progreso es un control que se usa para mostrar la progresión de una operación. Para agregar una barra de progreso, agregue la siguiente línea de código enMain.axml archivo.

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

A continuación, vaya a MainActivity.cs y establezca el valor de la barra de progreso.

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

En el código anterior, hemos creado una barra de progreso con un valor de 35.

Botones de radio

Este es un widget de Android que permite a una persona elegir uno de un conjunto de opciones. En esta sección, crearemos un grupo de radio que contiene una lista de autos que recuperará un botón de radio marcado.

Primero, agregamos un grupo de radio y un textview como se muestra en el siguiente código -

<?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>

Para realizar una acción, cuando se hace clic en un botón de radio, agregamos una actividad. IrMainActivity.cs y cree un nuevo controlador de eventos como se muestra a continuación.

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

Toast.MakeText() →Este es un método de visualización utilizado para mostrar un mensaje / salida en una pequeña ventana emergente. En la parte inferior de laOnCreate() método justo después SetContentView(), agregue el siguiente fragmento de código. Esto capturará cada uno de los botones de opción y los agregará al controlador de eventos que creamos.

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;

Ahora, ejecute su aplicación. Debería mostrar la siguiente pantalla como salida:

Botones de alternancia

Los botones de alternancia se utilizan para alternar entre dos estados, por ejemplo, puede alternar entre ON y OFF. AbiertoResources\layout\Main.axml y agregue las siguientes líneas de código para crear un botón de alternancia.

<?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>

Podemos agregar acciones a la barra de alternancia cuando se hace clic en ella. AbiertoMainActivity.cs y agregue las siguientes líneas de código después del OnCreate() clase de método.

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(); 
};

Ahora, cuando ejecute la aplicación, debería mostrar el siguiente resultado:

Barra de calificaciones

Una barra de calificaciones es un elemento de formulario que se compone de estrellas que los usuarios de la aplicación pueden usar para calificar las cosas que les ha proporcionado. En tusMain.axml archivo, cree una nueva barra de calificación con 5 estrellas.

<?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>

Al ejecutar la aplicación, debería mostrar el siguiente resultado:

Autocompletar vista de texto

Esta es una vista de texto que muestra sugerencias completas mientras un usuario escribe. Vamos a crear una vista de texto de autocompletar que contiene una lista de nombres de personas y un botón que al hacer clic nos mostrará el nombre seleccionado.

Abierto Main.axml y escribe el siguiente código.

<?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>

El código anterior genera un TextView para escribir, AutoCompleteTextViewpara mostrar sugerencias y un botón para mostrar los nombres ingresados ​​desde TextView. IrMainActivity.cs para agregar la funcionalidad.

Cree un nuevo método de controlador de eventos como se muestra a continuación.

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(); 
   } 
}

El controlador creado comprueba si la vista de texto de autocompletar está vacía. Si no está vacío, muestra el texto de autocompletar seleccionado. Escriba el siguiente código dentro delOnCreate() clase.

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 - Este es un controlador de colección que lee elementos de datos de una colección de lista y los devuelve como una vista o los muestra en la pantalla.

Ahora, cuando ejecute la aplicación, debería mostrar el siguiente resultado.