Carrion: /* Importar unha imaxe como recurso */

2016-10-03T07:14:33Z

Importar unha imaxe como recurso

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 '''puclic 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'''.

*'''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==
*Como sempre creamos un novo proxecto:'''U2_09_Buttons'''

*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:Android_2013_U2_09_Buttons_10.jpg| Cando entremos na aplicación este será o seu estado.
Image:Android_2013_U2_09_Buttons_11.jpg| Se prememos o primeiro botón (Texto) amosarase un texto en pantalla.
Image:Android_2013_U2_09_Buttons_12.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:Android_2013_U2_09_Buttons_14.jpg| Se o volvemos pulsar amosa outro texto e volve cambiar o estado.
Image:Android_2013_U2_09_Buttons_15.jpg| Se prememos o terceiro botón (Imaxe) amosarase de novo un texto diferente.
</gallery>

===Importar unha imaxe como recurso===
*Para poder asignar unha imaxe a un botón esta debe estar no cartafol '''/res/drawable'''

<gallery caption="Importar unha imaxe" widths="350" heights="300px" perrow="2">
Image:ok.png| Descargamos a imaxe superior ou collemos outra icona calquera. O nome da imaxe só pode ter letras e números e nada máis, nin guións. O nome debe estar en minúscula. Ollo que cando se baixa este icono ten o nome comezando por maiúsculas.
Image:Android_2013_U2_09_Buttons_01.jpg| Dentro de /res/values/ creamos o cartafol '''drawable''' e '''Importamos ...'''
Image:Android_2013_U2_09_Buttons_02.jpg| Dende o sistema de ficheiros.
Image:Android_2013_U2_09_Buttons_03.jpg| Indicamos o cartafol que contén as imaxes e seleccionamos as que desexamos importar para o proxecto.
Image:Android_2013_U2_09_Buttons_04.jpg| Neste caso cópiase ao proxecto. Lembrar cambiar o nome a minúsculas, se este este contén maiúsculas.
</gallery>

*Todo o anterior pode realizarse arrastrando a imaxe dende a súa localización ao IDE, ao cartafol desexado do proxecto dentro do IDE.
*En Android Studio realñizase copiando a imaxe e pegándoa no cartafol drawable no IDE

===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="7,23,24,32,34">
<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/btn_boton"
android:layout_width="150sp"
android:layout_height="wrap_content"
android:text="Preme aquí" >
</Button>

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

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/texto_tv" />

</LinearLayout>
</syntaxhighlight>

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

<gallery caption="Botóns inoperativos" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_09_Buttons_05.jpg| Prememos no primeiro e non fai nada.
Image:Android_2013_U2_09_Buttons_06.jpg| Se prememos no segundo só cambia o seu estado, pero tampouco fai nada.
Image:Android_2013_U2_09_Buttons_07.jpg| O mesmo pasa co terceiro botón.
</gallery>

==Eventos==
*Nesta ocasión imos ver dun xeito sinxelo como capturar os eventos dos botóns. Máis adiante afondaremos no control de eventos.
*Un '''evento''' é algo que acontece nun control e que nos interesa capturar no sistema para desencadenar (ou non) unha serie de accións.
*Xa vimos no caso anterior (EditText) que podíamos controlar eventos que acontecen nos controis.
*Nesta ocasión para os Botóns imos facelo de dúas formas:
**Control de eventos dende o layout
**Control de eventos a través dunha clase anónima.

===Control de eventos dende o layout===
*É a forma máis sinxela de desencadear unha acción.
*Imos facelo de dúas formas:
**Creando un método para cada Botón.
**Creando un único método para tódolos botóns. Hai que controlar que botón foi o que se premeu.

====Crear un método para cada botón====
*Observar a propiedade: '''android:onClick''' nos controis dos botóns.
<syntaxhighlight lang="xml" line highlight="16,24,34">
<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/btn_boton"
android:layout_width="150sp"
android:layout_height="wrap_content"
android:onClick="onBotonClick"
android:text="Preme aquí" >
</Button>

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

<ImageButton
android:id="@+id/ibtn_boton_imaxe"
android:layout_width="55sp"
android:layout_height="50sp"
android:contentDescription="Botón imaxe"
android:onClick="onBotonImaxeClick"
android:scaleType="fitXY"
android:src="@drawable/ok" >
</ImageButton>
</LinearLayout>

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

</LinearLayout>
</syntaxhighlight>

*Para cada botón defínese un método que xestione o evento onClick.
*'''Deixamos para o participante no curso a definición no ficheiro /res/values/strings.xml da constante "@string/texto_tv" do último TextView. '''

*Agora só queda definir os métodos en Java.
<syntaxhighlight lang="java" line highlight="29-32,34-40,42-45">
package com.example.u2_09_buttons;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.ToggleButton;

public class U2_09_Buttons extends Activity {
private Button btnBoton;
private ToggleButton tbtnBoton2Estados;
private ImageButton ibtnBotonImaxe;
private TextView tvAccions;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_u2_09__buttons);

btnBoton = (Button) findViewById(R.id.btn_boton);
tbtnBoton2Estados = (ToggleButton) findViewById(R.id.tbtn_boton_2estados);
ibtnBotonImaxe = (ImageButton) findViewById(R.id.ibtn_boton_imaxe);
tvAccions = (TextView) findViewById(R.id.tv_accion);
}

public void onBotonClick(View v) {
tvAccions.setText("Premeches o primeiro botón\n");
tvAccions.append("O texto do botón é: " + btnBoton.getText());
}

public void onBoton2EstadosClick(View v) {
tvAccions.setText("Premeches o segundo botón\n");
if (tbtnBoton2Estados.isChecked())
tvAccions.append("O estado é: " + tbtnBoton2Estados.getTextOn());
else
tvAccions.append("O estado é: " + tbtnBoton2Estados.getTextOff());
}

public void onBotonImaxeClick(View v) {
tvAccions.setText("Premeches o terceiro botón\n");
tvAccions.append("O ancho é: " + ibtnBotonImaxe.getWidth());
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.u2_09__buttons, menu);
return true;
}

}
</syntaxhighlight>
*'''Liñas 13-16''': declaración de atributos.
*'''Liñas 23-26''': asignación de valores aos atributos mediante a clase R.
*'''Liñas 29-32''': Define o método asociado ao evento android:onClick do primeiro botón. "\n" introduce un salto de liña.
*'''Liñas 34-40''': Define o método asociado ao evento android:onClick do botón ToggleButton. Comprobamos se está activado o non.
*'''Liñas 42-45''': Define o método asociado ao evento android:onClick do botón con Imaxe.

*Lanzar a aplicación e comprobar que sucede ao premer os botóns.

====Crear un único método para tódolos botóns====

*Hai que modificar o XML para que as propiedades '''android:onClick''' de tódolos botóns chamen ao mesmo método.
<syntaxhighlight lang="xml" line highlight="16,24,34">
<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/btn_boton"
android:layout_width="150sp"
android:layout_height="wrap_content"
android:onClick="onBotonClick"
android:text="Preme aquí" >
</Button>

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

<ImageButton
android:id="@+id/ibtn_boton_imaxe"
android:layout_width="55sp"
android:layout_height="50sp"
android:contentDescription="Botón imaxe"
android:onClick="onBotonClick"
android:scaleType="fitXY"
android:src="@drawable/ok" >
</ImageButton>
</LinearLayout>

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

</LinearLayout>
</syntaxhighlight>

*A definición do método:
<syntaxhighlight lang="java" line highlight="28-51">
package com.example.u2_09_buttons;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.ToggleButton;

public class U2_09_Buttons extends Activity {
// private Button btnBoton;
// private ToggleButton tbtnBoton2Estados;
// private ImageButton ibtnBotonImaxe;
private TextView tvAccions;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_u2_09__buttons);

tvAccions = (TextView) findViewById(R.id.tv_accion);

}

public void onBotonClick(View vista) {

switch (vista.getId()) {
case R.id.btn_boton:
tvAccions.setText("Premeches o primeiro botón\n");
tvAccions.append("O texto do botón é: "
+ ((Button) vista).getText());
break;

case R.id.tbtn_boton_2estados:
tvAccions.setText("Premeches o segundo botón\n");
if (((ToggleButton) vista).isChecked())
tvAccions.append("O estado é: "
+ ((ToggleButton) vista).getTextOn());
else
tvAccions.append("O estado é: "
+ ((ToggleButton) vista).getTextOff());
break;

case R.id.ibtn_boton_imaxe:
tvAccions.setText("Premeches o terceiro botón\n");
tvAccions.append("O ancho é: " + ((ImageButton) vista).getWidth());
}
}

/*public void onBotonClick(View v) {
tvAccions.setText("Premeches o primeiro botón\n");
tvAccions.append("O texto do botón é: " + btnBoton.getText());
}*/

/*
public void onBoton2EstadosClick(View v) {
tvAccions.setText("Premeches o segundo botón\n"); if
(tbtnBoton2Estados.isChecked()) tvAccions.append("O estado é: " +
tbtnBoton2Estados.getTextOn()); else tvAccions.append("O estado é: " +
tbtnBoton2Estados.getTextOff()); }
*/

/*
public void onBotonImaxeClick(View v) {
tvAccions.setText("Premeches o terceiro botón\n");
tvAccions.append("O ancho é: " + ibtnBotonImaxe.getWidth()); }
*/

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.u2_09__buttons, menu);
return true;
}

}
</syntaxhighlight>
*'''Liñas 28-51''':
**Na chamada ao método recibimos como parámetro unha View (vista) que apunta ao obxecto que o chamou.
**Collendo o ID da vista, podemos saber que botón foi o que iniciou o evento.
**Con '''switch - case''', en función do botón que lanzou o evento executamos o código correspondente.
*'''Liñas 39, 41 e 43''':
**Observar como se fai casting do obxecto recibido. Recíbese un obxecto de tipo View (vista) e precisamos convertelo á ToogleButton para acceder aos seus métodos específicos.

===Control de eventos usando un listener. Clase anónima===
*Nesta ocasión imos crear un Listener para o primeiro botón. Co cal, hai que eliminar a propiedade '''android:onClick''' do XML do primeiro botón

*O ficheiro XML:
*Observar que no primeiro botón non se xestiona o evento onClick e que os outros dous botóns seguen mantendo a propiedade '''android:onClick'''.
<syntaxhighlight lang="xml" line highlight="12-17,23,33">
<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/btn_boton"
android:layout_width="150sp"
android:layout_height="wrap_content"
android:text="Preme aquí" >
</Button>

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

<ImageButton
android:id="@+id/ibtn_boton_imaxe"
android:layout_width="55sp"
android:layout_height="50sp"
android:contentDescription="Botón imaxe"
android:onClick="onBotonImaxeClick"
android:scaleType="fitXY"
android:src="@drawable/ok" >
</ImageButton>
</LinearLayout>

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

</LinearLayout>
</syntaxhighlight>

*Imos partir do código da primeira versión da ampliación.
*Comentaremos aquel código que afectaba ao primeiro botón e usaremos un Listener asociado ao primeiro botón.
<syntaxhighlight lang="java" line highlight="29-38">
package com.example.u2_09_buttons;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.ToggleButton;

public class U2_09_Buttons extends Activity {
private Button btnBoton;
private ToggleButton tbtnBoton2Estados;
private ImageButton ibtnBotonImaxe;
private TextView tvAccions;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_u2_09__buttons);

btnBoton = (Button) findViewById(R.id.btn_boton);
tbtnBoton2Estados = (ToggleButton) findViewById(R.id.tbtn_boton_2estados);
ibtnBotonImaxe = (ImageButton) findViewById(R.id.ibtn_boton_imaxe);
tvAccions = (TextView) findViewById(R.id.tv_accion);

btnBoton.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
tvAccions.setText("Premeches o primeiro botón\n");
tvAccions.append("O texto do botón é: " + btnBoton.getText());
}

});

}

/* public void onBotonClick(View v) {
tvAccions.setText("Premeches o primeiro botón\n");
tvAccions.append("O texto do botón é: " + btnBoton.getText());
}
*/

public void onBoton2EstadosClick(View v) {
tvAccions.setText("Premeches o segundo botón\n");
if (tbtnBoton2Estados.isChecked())
tvAccions.append("O estado é: " + tbtnBoton2Estados.getTextOn());
else
tvAccions.append("O estado é: " + tbtnBoton2Estados.getTextOff());
}

public void onBotonImaxeClick(View v) {
tvAccions.setText("Premeches o terceiro botón\n");
tvAccions.append("O ancho é: " + ibtnBotonImaxe.getWidth());
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.u2_09__buttons, menu);
return true;
}

}
</syntaxhighlight>
*'''Liñas 29-38''': chamamos ao método '''setOnClickListener()''' do primeiro botón que se activará cando se fai click no botón.
** Creamos unha clase anónima asociada a interface OnClickListener e sobreescribimos o único método que ten: '''onClick'''.

*Como xa se dixo no anterior control (EditText), para coñecer o método asociado ao botón escribimos '''obxecto.setOn''', prememos '''CTRL+Barra espaciadora''' e xa nos auto completa.
*O mesmo facemos para a creación da clase anónima.

*Premer '''CTRL + Barra espaciadora'''
[[Image:Android_2013_U2_09_Buttons_08.jpg|600px]]

*Clase anónima co seu método.
[[Image:Android_2013_U2_09_Buttons_09.jpg]]

*Quedan presentados os '''listeners''' máis adiante afondaremos sobre eles.

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

Button. ToggleButton. Control de eventos II - Historial de revisiones

Carrion: /* Importar unha imaxe como recurso */