Angelfg: Página creada con «==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:…»

2020-11-14T21:04:21Z

Página creada con «==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:…»

Página nueva

==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.
[[Image:00_button-types.png]]

*Estes controles son subclases de:
**Button de TextView
**ToogleButton de CompoundButton
**ImageButton de ImageView (que se verá proximamente)
[[Image:00_Part_of_Android_View_Hierarchy.png|600px]]
*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''':
<syntaxhighlight lang="xml" line enclose="div" highlight="4" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_text"
... />
</syntaxhighlight>

*'''Botón con imaxe'''
<syntaxhighlight lang="xml" line enclose="div" highlight="4" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/button_icon"
... />
</syntaxhighlight>

*'''Botón con texto e imaxe'''. A propiedade '''android:drawableLeft''' indica onde se sitúa a imaxe.
<syntaxhighlight lang="xml" line enclose="div" highlight="4,5" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_text"
android:drawableLeft="@drawable/button_icon"
... />
</syntaxhighlight>

*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>'''
[[Image: 00_togglebutton.png]]

* E outro máis avanzado (versión Android 4.0 ou superior): '''<Switch/>'''
[[Image:00_switch.png]]
**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 <u>showText</u>''' 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 [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa indicamos anteriormente].
: <u>Lembrar que se estades a empregar as bibliotecas de compatibilidade (por defecto), '''a vosa activity derivará de AppCompactActivity''' e non de Activity</u>
: 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'''.

<br />
* 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 [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base 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

<gallery caption="Tres botóns" widths="350" heights="300px" perrow="2">
Image:PDM_botons_2.jpg| Cando entremos na aplicación este será o seu estado.
Image:PDM_botons_1.jpg| Se prememos o primeiro botón (Texto) amosarase un texto en pantalla.
Image:PDM_botons_3.jpg| 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.
Image:PDM_botons_4.jpg| Se o volvemos pulsar amosa outro texto e volve cambiar o estado.
Image:PDM_botons_5.jpg| Se prememos o terceiro botón (Imaxe) amosarase de novo un texto diferente.
</gallery>

<br />
===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.

<syntaxhighlight lang="xml" line highlight="13,20,24,25,28,33">
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<Button
android:id="@+id/btnBoton_UD02_01_buttons"
android:layout_width="150sp"
android:layout_height="wrap_content"
android:text="Preme aquí" >
</Button>

<ToggleButton
android:id="@+id/tbtnDosEstados_UD02_01_buttons"
android:layout_width="100dp"
android:layout_height="match_parent"
android:textOff="Apagado"
android:textOn="Aceso" >
</ToggleButton>

<ImageButton
android:id="@+id/ibtnImagen_UD02_01_buttons"
android:layout_width="55sp"
android:layout_height="50sp"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher_foreground" >
</ImageButton>
</LinearLayout>

<TextView
android:id="@+id/txtTv_accion_UD02_01_Buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/texto_tv_string" />

</LinearLayout>
</syntaxhighlight>

*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.

<br />
===Empregando gráficos SVG cun ImageButton===

* Se queremos empregar gráficos vectoriais podemos 'cargalos' no noso proxecto coa ferramenta Vector Asset:
<gallery caption="Empregando gráficos svg" widths="350" heights="300px" perrow="2">
Image:PDM_Vector_Assets_1.jpg| Lanzamos a ferramenta Vector Asset
Image:PDM_Vector_Assets_2.jpg| Escollemos o arquivo svg descargado. Indicamos o tamaño do gráfico en dp´s e o nome do mesmo.
Image:PDM_Vector_Assets_3.jpg| Indica onde vai a gardar o gráfico e con que arquivo (fixarse que xera un arquivo XML).
Image:PDM_Vector_Assets_4.jpg| O arquivo XML xerado no cartafol drawable.
Image:PDM_Vector_Assets_5.jpg| Un ImageButton coa icona asociada.
</gallery>

<br />

==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:
::<syntaxhighlight lang="java" enclose="div" highlight="">
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.

</syntaxhighlight>

<br />

===Switch - ToogleButton===

:* Obter o estado do botón (ON / OFF).
:* Cambiar o estado do botón (ON / OFF)
:* Cambiar o texto do SwitchButton
:* Capturar o evento que se produce cando hai un cambio de estado (diferente a facer un click, podemos facer click sobre o mesmo estado moitas veces e non hai cambio de estado).

::<syntaxhighlight lang="java" enclose="div" highlight="">
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

tbtn.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { // Ao cambiar o estado ON-OFF chama ao método onCheckedChanged
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) { // Ao ser unha interface anónima, compoundButton é tbtn. Se escollemos a opción de xestionar os eventos na Activity, empregando dito obxecto.getId() podemos identificar o botón
Toast.makeText(getApplicationContext(),String.valueOf(b),Toast.LENGTH_LONG).show(); // o parámetro b indica o novo estado do ToggleButton
}
});

</syntaxhighlight>

: Para o Switch é exactamente igual.
::<syntaxhighlight lang="java" enclose="div" highlight="">
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

sw.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { // Ao cambiar o estado ON-OFF chama ao método onCheckedChanged
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) { // Ao ser unha interface anónima, compoundButton é sw. Se escollemos a opción de xestionar os eventos na Activity, empregando dito obxecto.getId() podemos identificar o botón
Toast.makeText(getApplicationContext(),String.valueOf(b),Toast.LENGTH_LONG).show(); // o parámetro b indica o novo estado do ToggleButton
}
});

</syntaxhighlight>

<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2015).

PDM Button. ToggleButton. SwitchButton - Historial de revisiones

Angelfg: Página creada con «==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:…»

Angelfg: Página creada con «==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:…»