Introducción

El termino de widget en Android y en general en informática hace referencia a una pequeña aplicación o programa pequeño que se ejecuta con la finalidad de dar fácil acceso a funcionalidades de uso frecuente de su aplicación principal. Sin embargo, en Android el termino Widget es utilizado para definir vistas especializadas ubicadas en los archivos de diseño, como un botón, TextView, CheckBox, etc.

Como podemos ver en la interfaz de Android Studio tenemos acceso a los widgets bridados por el SDK de Android que van desde elementos simples como botones hasta otros más complejos como el calendario, entre otros.

En este capítulo miraremos como hacer uso de los widgets en el diseñador de Android Studio y posteriormente analizaremos el código XML que este genera.

Comencemos

Primero debemos crear un proyecto nuevo en Android Studio.

Insertar un widget en la ventana de la aplicación

1.Para insertar un widget utilizando el diseñador de Android Studio debemos abrir el archivo activity_main.xml y debemos arrastrar el elemento en cuestión hacia la ventana de vista previa del dispositivo de la siguiente manera:

Como podemos observar en la parte izquierda del IDE encontramos panel de propiedades del widget que en este caso es un botón, con las cuales podemos cambiar las características del mismo.

2.Posteriormente si queremos acceder al código XML del botón debemos hacer click en la pestaña inferior denominada Text.

En esta vista tenemos acceso directo al codigo XML de la interfaz de usuario de la aplicación y en la parte derecha de la ventana obtenemos una vista previa de la ventana de la aplicación que nos permite visualizar en tiempo real los cambios que se realizan en el codigo XML.

3.Para acceder a los widgets de la aplicación desde la capa de logica del proyecto debemos abrir el archivo MainActivity.java y definir como variables los widgets que tiene nuestra aplicación. Para poder acceder a los elementos graficos desde la clase de java es necesario utilizar la clase R que es propia de android de la siguiente manera.

public classMainActivityextendsAppCompatActivity {

privateButtonboton1;

@Override  
protected voidonCreate\(Bundle savedInstanceState\) {  
    super.onCreate\(savedInstanceState\);  
    setContentView\(R.layout.activity\_main\);  

    boton1= \(Button\) findViewById\(R.id.button1\);  
}

}

Posteriormente necesitamos implementar el metodo onClickListener y para ello hacemos lo siguiente.

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

private Button boton1;

@Override
protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);


  setContentView(R.layout.activity_main);

  boton1 = (Button) findViewById(R.id.button1);

  boton1.setOnClickListener(this);
}

@Override
public void onClick(View view) {

  switch(view.getId()){
    case R.id.button1:
         Toast.makeText(MainActivity.this,"Haz hecho click en el boton", Toast.LENGTH_SHORT).show();

         break;

         default:
         break;

   }
}

2.Por ultimo solo queda correr la aplicación en el emulador de Android Studio.

Uso de gráficos para mostrar el estado de un botón

En este capitulo vamos a tratar el drawable state selector el cual es un recurso definido en XML que especifica el drawable a usar basado en el estado de la Vista.

Los estados mas comunes son:

·state_pressed=["true" | "false"]

·state_focused=["true" | "false"]

·state_selected=["true" | "false"]

·state_checked=["true" | "false"]

·state_enabled=["true" | "false"]

Como implementarlo

1.Para saber como funciona vamos a crear un nuevo proyecto en android studio y dentro de la carpeta drawable vamos a crear un archivo de tipo xml, el cual debe contener la siguiente información:

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

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

<item android:drawable="@android:color/darker_gray" android:state_checked="true"/>

<item android:drawable="@android:color/white" android:state_checked="false"/>

</selector>

2.Despues debemos dirigirnos al activity_main.xml e insertamos un nuevo ToogleButton de la siguiente manera:

<ToggleButton android:layout_width="wrap_content"

android:layout_height="wrap_content" android:text="New ToggleButton"

android:id="@+id/toggleButton" android:layout_centerVertical="true"

android:layout_centerHorizontal="true"

android:background="@drawable/state_selector"

/>

3.Correr la aplicación en un dispositivo o emulador

Lo que conseguimos con lo mencionado anteriormente es crear un archivo de recursos en la carpeta drawable que va a cambiar el background de un boton en funcion del estado en que este se encuentre. para ello desde la activity_main.xml llamamos al recurso que creamos anteriormente utilizando la propiedad android:background="@drawable/state_selector".

Creación de un widget en tiempo de ejecución

declarado enXMLarchivos y entonces modificados durante tiempo de ejecución a través de Java. Es posible de crear el UI completamente en Java código, aun así para un diseño complejo, él generalmente no ser práctica mejor considerada .

El GridView el ejemplo del capítulo anterior estuvo creado cifradamente. Pero a diferencia del GridView, en este vamos a añadir una vista a el diseño definido enla actividad_principal.xml.

Pasos para crear el run time

Empezaremos por añadir un ID atributo a el diseño de existir así que podemos acceder el diseño, Una vez tenemos una referencia del diseño, podemos añadir vistas nuevas estos son los pasos pasos:

1.Abierto elres/actividad/de diseño_principal.xmlY añadir un ID atributo a el principalRelativeLayout, como sigue :

                Androide:id="@+id/diseño"

2.Completamente sacar el default<TextView>elemento.

   Vistas, Widgets, y Estilos.

3.Abierto elMainActivity.javapodemos añadir código ael onCreate()método. Añadir el código siguiente (después de setContentView())para conseguir una referencia ael RelativeLayout:

       RelativeLayout Diseño = \(RelativeLayout\)findViewById\(R.id.Diseño\);

4.Crear un DatePicker y añadirlo a el diseño con el código siguiente:

       DatePicker datePicker = Nuevo DatePicker\(este\);

       Diseño.addView\(datePicker\);

5.Se corre el programa en un dispositivo o emulador.

Este ejemplo miraría si no utilizamos el diseño de laactividad_principal.xml. Aquí es cómo el onCreate() miraría :

@Override protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

RelativeLayout layout = new RelativeLayout(this);

DatePicker datePicker = new DatePicker(this);

layout.addView(datePicker);

setContentView(layout);

}

En este ejemplo, Si creas una vista cifradamente y quiere referencia, tampoco necesitas mantener una referencia a el objeto, o asignar la vista un ID para utilizarfindViewByID(). Para dar una vista un ID, uso elsetID()método por pasar enVista. generateViewId()(Para generar un único ID) o definir el ID que utiliza<recursos>en xml.56

Capítulo 3

Creando un componente hecho de encargo

Cuando hemos visto en recetas anteriores, el Androide SDK proporciona una gama ancha de componentes. Pero qué pasa cuando no puedes encontrar un prebuilt componente se pude crear uno propio.

En este ejercicio vamos a crear un componente hecho de encargo que deriva de la clase de Vista, justo como el construido-en widgets.

1.Crear una clase nueva que extiende Vista.

2.Crea constructor hecho de encargo(s).

3.OverrideonMeasure(), y el default la implementación regresa una medida de 100 x 100.

4.OverrideonDraw(), y el default la implementación dibuja nada.

5.Define oyentes y métodos hecho (como encima<Acontecimiento>()).

6.Implementa funcionalidad hecha de encargo.

Un control compuesto generalmente extendería de un diseño, no una Vista, desde entonces serás añadir múltiples widgets. Probablemente no necesitarías a override onDraw() y onMeasure (), cuando cada widget manejaría el dibujo en sus métodos respectivos.

Aplicando un estilo a una Vista

Un estilo es una colección de encuadres de propiedad para definir la mirada de una Vista. Cuando ya has visto mientras definiendo diseños, unas ofertas de vista muchos encuadres para determinar cómo mira, así como funciones. Ya hemos puesto una altura de vista, ancho, color de fondo, y acolchando , el plus allí es muchos más encuadres como color de texto, fuente, medida de texto, margen, y tan encima. Creando un estilo es tan sencillo cuando estirando estos encuadres del diseño y poniéndoles en un recurso de estilo.

Ya hemos establecido una altura de vista, ancho, color de fondo y relleno, además son muchos más ajustes tales como color de texto, fuente, tamaño del texto, margen, y así sucesivamente. Crear un estilo es tan simple como tirar de estos ajustes del diseño y ponerlos en un recurso de estilo.

Creemos un ejemplo:Cree un nuevo proyecto de Android Estudio y llámalo Estilos. Utilice las opciones del asistente predeterminado

Abra el archivo styles.xml predeterminado que se encuentra en res / valúes, como se muestra aquí:

<style name="MyStyle">

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

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

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

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

<item name="android:textSize">20sp</item>

<item name="android:padding">8dp</item>

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

</style>

Ahora diga a la vista que use este estilo. Abra el archivo activity_main.xml y agregue el archivo

style="@style/MyStyle"

    @page { margin: 2cm }  
    p { margin-bottom: 0.25cm; direction: ltr; line-height: 120%; text-align: left; orphans: 2; widows: 2 }  
    a:link { color: \#0563c1 }

Ejecute la aplicación o vea los resultados en la ficha Diseño.

Cómo funciona

Un estilo es un recurso, definido mediante el uso del elemento <style> anidado en un directorio <resources> Elemento de un archivo XML. Hemos utilizado el archivo styles.xml existente, pero eso no es un requisito, ya que podemos usar cualquier nombre de archivo que deseemos. Como se ve en esta receta, múltiples <style> Elementos se pueden incluir en un archivo XML.

Una vez que el estilo se crea, se puede aplicar fácilmente a cualquier número de otras vistas también. Y si querías tener un botón con el mismo estilo? Simplemente suelte un botón en el diseño y asigne el mismo estilo.

Además hay otra característica de los estilos: la herencia. Especificando un padre al definir el estilo, podemos hacer que los estilos se construyan unos sobre otros, creando una jerarquía de estilos. Si observa el valor predeterminado

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

Si quieres heredar de un estilo que te has creado, hay un método abreviado En lugar de utilizar el atributo padre, puede especificar nombre del padre primero, seguido por un punto, luego el nuevo nombre, como:

<style name="MyParent.MyStyle" >

para Asignar automáticamente un estilo a todas las TextViews. (Hay un estilo para cada uno de los tipos de widget Por lo que puede hacer esto para botones, ToggleButtons, TextViews, etc.). Para establecer el estilo de todas las vistas de texto, agregue la siguiente línea al estilo AppTheme:

<item name="android:textViewStyle">@style/MyStyle</item>

Convertir un estilo en un tema

Un tema es un estilo aplicado a una actividad a toda la aplicación.

el archivo AndroidManifest.xml. El atributo del tema se aplica al elemento <Application>, así como a los elementos <Activity>. Todas las vistas dentro de elemento se denominarán con el tema especificado. Es común establecer el tema de la aplicación, pero luego anular una actividad específica con un tema diferente. En la receta anterior, establecimos el textViewStyle usando el estilo AppTheme (el cual se creado automáticamente).

Cómo lo hacemos:Comenzamos añadiendo un nuevo tema al archivo styles.xml existente para que nuestra actividad se vea como un diálogo. Estos son los pasos para crear el nuevo tema y establecer la actividad para utilizar el nuevo tema:

Dado que los temas se definen en el mismo recurso que los estilos, abra el archivo styles.xml ubicado en res / valúes ​​y crear un nuevo estilo. Vamos a crear un nuevo estilo basado en el AppTheme ya proporcionado, y el conjunto windowIsFloating. El XML será como sigue:

<style name="AppTheme.MyDialog">

<item name="android:windowIsFloating">true</item>

</style>

A continuación, establezca la actividad para utilizar este nuevo tema de diálogo. Abra el AndroidManifest. XML y agregue un atributo de tema al elemento Activity, como se muestra a continuación:

<activity android:name=".MainActivity"

android:theme="@style/AppTheme.MyDialog">

Ahora ejecute la aplicación en un dispositivo o emulador para ver el tema del diálogo en acción.

results matching ""

    No results matching ""