Button. ToggleButton. Control de eventos II

Introdución

• Os botóns (button) permiten ao usuario indicar á aplicación que realice unha acción.
• Os botóns poden ter Texto, unha imaxe ou as dúas cousas:
• Ben o texto ou a imaxe comunican claramente ao usuario cal é a función do botón.

• Estes controles son subclases de:
  • Button de TextView
  • ToogleButton de CompoundButton
  • ImageButton de ImageView (que se verá proximamente)

• Imaxe obtida de: http://www.itcsolutions.eu/2011/08/27/android-tutorial-4-procedural-vs-declarative-design-of-user-interfaces

• Observar como se definen os tres tipos de botóns anteriores:

• Botón con texto:

1 <Button
2     android:layout_width="wrap_content"
3     android:layout_height="wrap_content"
4     android:text="@string/button_text"
5     ... />

• Botón con imaxe

1 <ImageButton
2     android:layout_width="wrap_content"
3     android:layout_height="wrap_content"
4     android:src="@drawable/button_icon"
5     ... />

• Botón con texto e imaxe. A propiedade android:drawableLeft indica onde se sitúa a imaxe.

1 <Button
2     android:layout_width="wrap_content"
3     android:layout_height="wrap_content"
4     android:text="@string/button_text"
5     android:drawableLeft="@drawable/button_icon"
6     ... />

• Os botóns teñen unha propiedade android:onClick="oMeuMetodo" que nos permite chamar ao método indicado cando o pulsamos.
  • Ese método hai que declaralo en Java como public void oMeuMetodo (View v) { ... }
  • Recibe o obxecto View de quen o chamou.

• Os botóns (Button) son subclases de TextView.

• Referencias:
  • O Control botón: http://developer.android.com/reference/android/widget/Button.html
  • Introdución aos botóns: http://developer.android.com/design/building-blocks/buttons.html
  • Para programadores: http://developer.android.com/guide/topics/ui/controls/button.html
  • Para descargar iconas: http://www.iconarchive.com
  • Para descargar imaxes: http://www.openclipart.org

Botóns de 2 estados: ToggleButton/Switch

• Existe outro tipo de botón de 2 estados (ON/OFF).
• Un máis básico: <ToggleButton>

• E outro máis avanzado (versión Android 4.0 ou superior): <Switch/>

• • Permiten cambiar o seu estado desprazando co dun estado a outro. O funcionamento é semellante ao control ToogleButton.

• Un obxecto ToogleButton/Switch herda da clase CompoundButton, quen, á súa vez, herda da clase Button.
• Por tanto funcionan da mesma maneira, pero ademais o este tipo de botóns:
  • ten 2 estados (True/False), que pode podemos comprobar co método isChecked ()
  • Para cada estado podemos amosar un texto distinto no botón: android:TextOn e android:TextOFF.

Para que o texto apareza debe cambiarse a propiedade showText a true. A nivel de deseño non se recomenda o emprego do texto se estamos empregando un Material Theme.

• Referencias:
  • O control ToggleButton: http://developer.android.com/reference/android/widget/ToggleButton.html
  • O control switch: http://developer.android.com/reference/android/widget/Switch.html
  • Introdución as botóns de 2 estados: http://developer.android.com/guide/topics/ui/controls/togglebutton.html

Casos prácticos

• Partimos que xa temos creado o proxecto inicial como xa indicamos anteriormente.

Lembrar que se estades a empregar as bibliotecas de compatibilidade (por defecto), a vosa activity derivará de AppCompactActivity e non de Activity

Nos exemplos seguintes toda activity deriva de Activity, pero o normal é que empregedes AppCompactActivity (coidado ao copiar os exemplos).

Se non o temos creado antes, crea un paquete de nome UI como un subpaquete do teu paquete principal.

Dentro do paquete UI, crearemos un novo paquete de nome: Buttons.

• Dentro do paquete Buttons crear unha nova 'Empty Activity' de nome: UD02_01_Buttons de tipo Launcher e sen compatibilidade.

Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.

• Imos crear 3 botóns:
  • 1 Botón con texto
  • 1 ToogleButton
  • 1 botón con imaxe

• Tres botóns
• 

  Cando entremos na aplicación este será o seu estado.

• 

  Se prememos o primeiro botón (Texto) amosarase un texto en pantalla.

• 

  Se prememos o segundo botón (ToogleButton) amosarase outro texto en pantalla e o botón cambiará o seu estado e o texto do mesmo.

• 

  Se o volvemos pulsar amosa outro texto e volve cambiar o estado.

• 

  Se prememos o terceiro botón (Imaxe) amosarase de novo un texto diferente.

Creación do layout

• O layout XML ten 3 botóns e 1 TextView:
• Observar como hai un layout dentro doutro: un dispón os elementos en vertical e o outro en horizontal.

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical" >
 7 
 8     <LinearLayout
 9         android:layout_width="match_parent"
10         android:layout_height="wrap_content"
11         android:orientation="horizontal" >
12 
13         <Button
14             android:id="@+id/btnBoton_UD02_01_buttons"
15             android:layout_width="150sp"
16             android:layout_height="wrap_content"
17             android:text="Preme aquí" >
18         </Button>
19 
20         <ToggleButton
21             android:id="@+id/tbtnDosEstados_UD02_01_buttons"
22             android:layout_width="100dp"
23             android:layout_height="match_parent"
24             android:textOff="Apagado"
25             android:textOn="Aceso" >
26         </ToggleButton>
27 
28         <ImageButton
29             android:id="@+id/ibtnImagen_UD02_01_buttons"
30             android:layout_width="55sp"
31             android:layout_height="50sp"
32             android:scaleType="fitXY"
33             android:src="@drawable/ic_launcher_foreground" >
34         </ImageButton>
35     </LinearLayout>
36 
37     <TextView
38         android:id="@+id/txtTv_accion_UD02_01_Buttons"
39         android:layout_width="wrap_content"
40         android:layout_height="wrap_content"
41         android:text="@string/texto_tv_string" />
42 
43 </LinearLayout>

• Se cargamos este layout e non realizamos ningunha codificación en Java, non vai pasar nada cos botóns:

Isto é debido a que non temos codificado ningunha acción para cando se preme en cada un deles.

Empregando gráficos SVG cun ImageButton

• Se queremos empregar gráficos vectoriais podemos 'cargalos' no noso proxecto coa ferramenta Vector Asset:

• Empregando gráficos svg
• 

  Lanzamos a ferramenta Vector Asset

• 

  Escollemos o arquivo svg descargado. Indicamos o tamaño do gráfico en dp´s e o nome do mesmo.

• 

  Indica onde vai a gardar o gráfico e con que arquivo (fixarse que xera un arquivo XML).

• 

  O arquivo XML xerado no cartafol drawable.

• 

  Un ImageButton coa icona asociada.

Métodos mínimos a coñecer no manexo dos Button´s e variantes

Todos os Buttons: Button, FloatActionButton, ToogleButton, Switch

• Referenciar a un button có método findViewById.
• Recuperar o contido do texto.
• Cambiar o contido do texto, podendo empregar recursos gardados en /res/values.
• Modificar propiedades básicas, como cor, tamaño, visibilidade,...(e os métodos getZZZZZ para obter os seus valores)

Exemplos cun Button, pero aplicables a calquera tipo de Button:

        Button btn = findViewById(R.id.btnBoton);            // Referenciamos a un botón que estea no Layout da Activity
        String cadeaet = btn.getText().toString();           // Fixarse que getText() devolve un obxecto Editable, non un String.
        btn.setText("Cambiamos o texto directamente");       // Cambiamos o contido por unha cadea concreta
        String textoRes = getResources().getString(R.string.app_name);
        btn.setText(textoRes + " texto que ven da BD");      // Se queremos concatenar texto dunha base de datos cun texto que poida ser traducido

        btn.setTextSize(20);                                 // Axustar tamaño do texto

        btn.setTextColor(Color.BLUE);                        // Cambia a cor

        btn.setVisibility(View.VISIBLE);                     // As constantes aparecen no Android Studio ao teclear. GONE fai que non ocupe espazo no Layout.

Switch - ToogleButton

• Obter o estado do botón (ON / OFF).
• Cambiar o estado do botón (ON / OFF)
• Cambiar o texto do SwitchButton

        ToggleButton tbtn = findViewById(R.id.tbtnToogleBoton);                          // Referenciamos a un botón que estea no Layout da Activity
        Toast.makeText(this,String.valueOf(tbtn.isChecked()),Toast.LENGTH_LONG).show();  // isChecked() devolve true/false

        tbtn.setChecked(true);                                      // Cambiamos o estado por programación

        tbtn.setText("NOVO TEXTO TOGGLE");                          // Cambiamos o texto

Para o Switch é exactamente igual.

        Switch sw = findViewById(R.id.swbSwitchButton);                                         // Referenciamos a un botón que estea no Layout da Activity
        Toast.makeText(this,String.valueOf(sw.isChecked()),Toast.LENGTH_LONG).show();           // isChecked() devolve true/false

        sw.setChecked(true);                                                                    // Cambiamos o estado por programación

        sw.setText("NOVO TEXTO SWITCH");                                                        // Novo texto do switch

-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).