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>```
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
Unestiloes 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.