Button. ToggleButton. Control de eventos II
Ir a la navegación
Ir a la búsqueda
Sumario
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
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:
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).