009 ANDROID EN VISUAL STUDIO (Aplicación movil)

PRACTICA 009: Android con Visual Studio
Ing. Honoria Reyes Macedo

IDE: Visual Studio con Xamarin


INTRODUCCION:
Mediante esta aplicacion se conoceran las secciones de que consta un proyecto en Android utilizando Visual Studio Se utilizan las siguientes librerías:

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Views;
using Android.Content;
using System;
using SQLite;
using System.Collections;
using System.IO;
using System.Linq;

ACTIVIDAD:

1.- Crear una plicacion en Android que se llame "CursoAndoidVisualS"

                      
                     Seleccionar Android Application

La solucion quedaria asi:

2.- Agregar botones dentro de un TableLayout en el archivo Main.axml.

   2.1 Agregar nueve botones para hacer un juego del gato
 Agregar sus respectivos ID para identificar  cada boton

button1, button2, button3
button4, button5, button6
button7, button8, button9

   2.1.1 Agregar un TextView con id =textView1


  2.2 Agregar en los recursos de imagenes (carpeta Drawable) 
     Una imagen png con una cruz  llamada tail.png
      y otra imagen con un circulo llamada circle.png



3.- Abrir el archivo  MainActivity.cs y capturar lo siguiente

    3.1 Declarar los 9 botones e inicializarlos, y crear una matriz con diferentes valores

Observar que cuando le vas agregando el evento btn1.Click +=  te sugiere que presiones la tecla TAB para que inserte automáticamente cada función del evento

Quedando asi:

    3.2 Crear la funcion del evento por cada boton(Seguir los pasos del punto anterior para crear el evento ) 
      Observa que en este evento del boton: btn1 se uso la posicion Matriz[0,0];

 

Nota:     Para el btn1 la posicion de la matriz a usar es:  Matriz[0,0];

Para el btn2 la posicion de la matriz a usar es:  Matriz[0,1];

Para el btn3 la posicion de la matriz a usar es:  Matriz[0,2];

Para el btn4 la posicion de la matriz a usar es:  Matriz[1,0];

Para el btn5 la posicion de la matriz a usar es:  Matriz[1,1];

Para el btn6 la posicion de la matriz a usar es:  Matriz[1,2];

Para el btn7 la posicion de la matriz a usar es:  Matriz[2,0];

Para el btn8 la posicion de la matriz a usar es:  Matriz[2,1];

Para el btn9 la posicion de la matriz a usar  es:  Matriz[2,2];

 

3.3 Agregar una funcion para comprobar los eventos 

4.- Ejecutar la aplicacion y verificar resultados(Escoge un emulador Nexus 5)

5.- Agregar el mismo tamaño a los botones y gregar una letra a cada uno.

 5.1 Agregar letras desde recursos Strings.xml

5.2 Agregar a cada botón en su propiedad text la ruta del recurso creado respectivamente

           

Quedaria asi

5.2 Cambiar el nombre de la aplicacion  por "@string/ApplicationName"

 Compilar y ejecutar (Jugar con otra persona para probar)

6.- Agregar Estilo a los botones (Escoger una de las dos opciones):

    Antes agregar el archivo colors.xml

Crear el siguiente archivo colors.xml  (si es que no existe)  como RECURSO DE COLOR 
y captura tus colores
         - en la carpeta  Resources/values/

                              New  + XML + Values XML File  + <Enter>

Nota: Los colores que se van a ocupar en las interfaces los definimos en hexadecimales.

Para buscar el equivalente de los colores que vas a usar busca en esta pagina.

                      http://html-color-codes.info/codigos-de-colores-hexadecimales/

            Capturar el contenido  siguiente:

                   <resources>

    <color name="azulrey">#1323D4</color>

    <color name="azulcielo">#A6E2F1</color>

    <color name="azulclaro">#B5D1F0</color>

    <color name="azulpizarra">#6188C8</color>

    <color name="azulmarino">#001F89</color>

    <color name="amarillopastel">#FDFD96</color>

    <color name="GrisOscuro">#7C7C84</color>

   <color name="naranjclar2">#FDE8CC</color>

    <color name="naranj">#ED790C   </color>

    <color name="naranjclar">#EEA45F </color>

    <color name="azmarin">#1D4B7A </color>

    <color name="azpizarfu">#416B95 </color>

    <color name="AzPizar">#5C88B5 </color>

    <color name="Azclar">#70A3D6 </color>

    <color name="Azciel">#77BCFF </color>

    <color name="gris">#6F88A1 </color>

    <color name="grisaz">#8FB0D1 </color>

    <color name="grisclar">#B8DCFF </color>

    <color name="grisosc">#818488 </color>

    <color name="grisclara">#B8BCBF </color>

    <color name="grisclari">#E1E4E6 </color>

    <color name="azulito">#F1F6FC </color>

                       </resources>

Opcion 1: En la carpeta values-v21 agregar el archivo styles.xml

 

Agregar el siguiente código en styles.xml:

<?xml version="1.0" encoding="utf-8" ?>

<resources>

  <!-- Inherit from the light Material Theme -->

  <style name="MyCustomTheme" parent="android:Theme.Material.Light">

    <!-- Override the app bar color -->

    <item name="android:colorPrimary">@color/my_blue</item>

    <!-- Override the color of UI controls -->

    <item name="android:colorAccent">@color/my_purple</item>

  </style>

  <style name="edits">

    <item name="android:layout_width">fill_parent</item>

    <item name="android:layout_height">wrap_content</item>

    <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>

    <item name="android:textColor">@color/azulrey</item>

    <item name="android:textSize">18dp</item>

    <item name="android:layout_marginTop">10dp</item>

  </style>

<style name="button_text" >

    <item name="android:layout_width" >fill_parent</item>

    <item name="android:layout_height" >wrap_content</item>

    <item name="android:textColor" >#ffffff</item>

    <item name="android:gravity" >center</item>

    <item name="android:layout_margin" >3dp</item>

    <item name="android:textSize" >30dp</item>

    <item name="android:textStyle" >bold</item>

    <item name= "android:background" >#AFEEEE</item>

    <item name="android:shadowColor" >#000000</item>

    <item name="android:shadowDx" >1</item>

    <item name="android:shadowDy" >1</item>

    <item name="android:shadowRadius" >2</item>

  </style>

</resources>

En la propiedad style del botón, agregar la ruta del estilo

-- -

Opcion 2: En la carpeta drawable , agregar el archivo red_button.xml

Agregar el siguiente código en red_button.xml:

<?xml version="1.0" encoding="utf-8" ?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:state_pressed="true" >

    <shape>

      <solid

          android:color="#ef4444" />

      <stroke

          android:width="1dp"

          android:color="#992f2f" />

      <corners

          android:radius="6dp" />

      <padding

          android:left="10dp"

          android:top="10dp"

          android:right="10dp"

          android:bottom="10dp" />

    </shape>

  </item>

  <item>

    <shape>

      <gradient

          android:startColor="#ef4444"

          android:endColor="#992f2f"

          android:angle="270" />

      <stroke

          android:width="1dp"

          android:color="#992f2f" />

      <corners

          android:radius="6dp" />

      <padding

          android:left="10dp"

          android:top="10dp"

          android:right="10dp"

          android:bottom="10dp" />

    </shape>

  </item>

</selector>

  En la propiedad background del botón, agregar la ruta del red_button.xml

Compilar y ejecutar (Jugar con otra persona para probar)

7.- Agregar la opcion para que el jugador  numero 2, juegue con numero aleatorio

Ejemplo: Se agrega un CheckBox que diga "Juego Aleatorio".

para que el programa en forma aleatoria escoja el boton del jugador 2. 

Usar el metodo siguiente como un ejemplo para el juego aleatorio

No olvidar inicializar el checkbox para utilizarlo como opcion en el evento click de los botones

CheckBox chBox1;

chBox1 =(CheckBox) FindViewById<TextView>(Resource.Id.checkBox1);

El evento quedaria asi:

---------------------------------------------------------------------------------------------------
---------------------------  ANEXO  Main.axml---------------------------------------------

----------------------------------------------------------------------------------
---------------------------------------- ANEXO 2 ----------------------------

Codigo axml en el punto 6 para dar estilo a los botones:
Ejemplo se agrega el estilo a cada boton

Si se escogio la opcion 1: 

        <Button
                style="@style/button_text"
                android:text="@string/CaptionBtn1"
                android:id="@+id/button1"
                android:layout_marginRight="2.5dp"
                android:layout_width="112.0dp"
                android:layout_height="89.0dp"
                android:layout_marginLeft="8.5dp"
                android:foregroundTint="#ffadff2f"

                 />

Si se escogio la opcion 2:

        <Button
                android:background="@drawable/red_button"
                android:text="@string/CaptionBtn1"
                android:id="@+id/button1"
                android:layout_marginRight="2.5dp"
                android:layout_width="112.0dp"
                android:layout_height="89.0dp"
                android:layout_marginLeft="8.5dp"
                android:foregroundTint="#ffadff2f"

                 />

-----------------------------------------------0------0------------------------------------
-----------------------------------000---000----------------------------------