traspas - Experto Java

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Plataforma Android
Sesión 6: Personalización de
componentes
© 2012-2013 Depto. Ciencia de la Computación e IA Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Puntos a tratar
1. Componentes compuestos
Nuevas vistas a partir de agrupaciones de vistas
2. Componentes propios
Crear nuevas vistas desde cero
3. Modificar vistas existentes
Extender la funcionalidad de vistas existentes
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 2
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes compuestos
• Conjunto de vistas tratadas de forma atómica.
• Por ejemplo: Agrupar un campo de edición y un botón para que
al pulsar se borre el texto.
• Pasos para crear un componente compuesto:
1. Crear un layout de forma normal con las vistas a agrupar.
2. Crear una clase Java que extienda un ViewGroup (normalmente un
layout).
3. Asignar el layout XML que hemos creado a nuestra clase Java.
4. Utilizar el componente compuesto de forma normal (pero a partir del
espacio de nombres de la aplicación).
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 3
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes compuestos
• Paso 1: Crear el Layout del componente compuesto en
los recursos de la aplicación.
• Ejemplo: <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:id="@+id/editText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Button
android:id="@+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Borrar"
/>
</LinearLayout>
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 4
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes compuestos
• Paso 2: crear una Subclase de ViewGroup (normalmente
un layout)
• Esqueleto de la subclase:
public class MiComponente extends LinearLayout {
public MiComponente(Context context) {
super(context);
}
public MiComponente(Context context, AttributeSet atts) {
super(context, atts);
}
}
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 5
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes compuestos
• Paso 3: Asignar el layout XML a nuestro componente:
public class EdicionBorrable extends LinearLayout {
EditText editText;
Button button;
public EdicionBorrable(Context context) {
super(context);
// Creamos la interfaz a partir del layout
String infService = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater li;
li = (LayoutInflater)getContext().getSystemService(infService);
li.inflate(R.layout.edicion_borrable, this, true);
// Obtenemos las referencias a las vistas hijas
editText = (EditText)findViewById(R.id.editText);
button = (Button)findViewById(R.id.button);
}
}
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 6
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes compuestos
• Paso 3.1:
• Añadir funcionalidad definiendo manejadores de eventos de
manera habitual.
• Ejemplo: borrar el contenido del cuadro de edición al pulsar el
botón.
button.setOnClickListener(new Button.OnClickListener()
{
public void onClick(View v) {
editText.setText("");
}
});
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 7
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes compuestos
• Paso 4. Uso: incluir el componente en una actividad
• Añadido como una vista cualquiera
• Añadir espacio de nombres al nombre del componente
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<es.ua.jtech.android.compuestos.EdicionBorrable
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 8
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes compuestos
• Otra opción: definir el layout mediante código
public EdicionBorrable(Context context) {
super(context);
// CONSTRUCTOR
// Cambiamos la orientación del layout a vertical
setOrientation(LinearLayout.VERTICAL);
// Creamos las vistas hijas
editText = new EditText(getContext());
button = new Button(getContext());
button.setText("Borrar");
// Colocamos estas vistas en el control compuesto
int lHeight = LayoutParams.WRAP_CONTENT;
int lWidth = LayoutParams.FILL_PARENT;
addView(editText, new LinearLayout.LayoutParams(lWidth, lHeight));
addView(button, new LinearLayout.LayoutParams(lWidth, lHeight));
}
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 9
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Puntos a tratar
1. Componentes compuestos
Nuevas vistas a partir de agrupaciones de vistas
2. Componentes propios
Crear nuevas vistas desde cero
3. Modificar vistas existentes
Extender la funcionalidad de vistas existentes
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 10
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios
• Creación de nuevas vistas desde cero
• Subclase de View
• Sobrecarga de onDraw
public class MiVista extends View
{
public MiVista(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Definir como dibujar el componente
}
}
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 11
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: lienzo y pincel
• El método onDraw recibe un Canvas
• Encapsula el contexto gráfico de la vista
• Para dibujar algunos elementos es necesario definir
propiedades del pincel (Paint)
• Color, grosor, etc.
• Ejemplo:
Paint p = new Paint();
p.setColor(Color.RED);
• Tras definir sus propiedades, podemos utilizarlo para dibujar
elementos usando métodos de la clase Canvas
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 12
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: lienzo y pincel
• Propiedades pincel:
• Color plano: setARGB y setColor
• Gradientes y shaders: shaders de gradiente (LinearShader,
RadialShader, SweepShader), mapa de bits (BitmapShader),
combinación de shaders (ComposeShader)
Paint p = new Paint();
p.setColor(Color.RED);
p.setARGB(0, 255, 0, 0);
p.setShader(new RadialGradient(centerX, centerY, radius,
color0, color1, Shader.TileMode.MIRROR));
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 13
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: lienzo y pincel
• Propiedades pincel:
• Máscaras: suavizado (BlurMaskFilter) o relieve
(EmbossMaskFilter)
• Se aplican con setMaskFilter
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 14
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: lienzo y pincel
• Propiedades pincel:
• Sombras: efectos de sombras con setShadowLayer
• Filtros de color: setColorFilter (alterar color original)
• Estilo de figura: indicar con setStyle que se dibuje sólo el trazo,
el relleno, o ambos
Paint p = new Paint();
p.setStyle(Style.STROKE);
p.setStyle(Style.FILL);
p.setStyle(Style.FILL_AND_STROKE);
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 15
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: lienzo y pincel
• Propiedades pincel:
• Estilo del trazo
•
•
•
•
Plataforma Android
Grosor del trazo: setStrokeWidth
El tipo de línea: setPathEffect
Uniones en polilíneas: setStrokeJoint
Forma de las terminaciones: setStrokeCap
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 16
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: lienzo y pincel
• Propiedades pincel:
• Antialiasing: setAntiAlias(bool)
• Dithering: evitamos cambios bruscos de color para gradientes en
dispositivos con poca densidad de color con setDither(bool)
• Modo de transferencia: setXferMode
Permite dibujar solamente sobre zonas con un determinado color.
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 17
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: lienzo y pincel
• Propiedades lienzo (Canvas):
• Área de recorte: clipRect
• Área de recorte no rectangular: clipPath
• Transformaciones geométricas: translate, scale, rotate, skew,
setMatrix
• Almacenar y restaurar propiedades: save y restore
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 18
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: lienzo y pincel
• Primitivas geométricas del lienzo (Canvas):
• Puntos: drawPoint
• Líneas: drawLine
• Polilíneas: drawPath
• Objeto de la clase Path compuesto de segmentos
•
•
•
•
•
•
Plataforma Android
Rectángulos: drawRect
Rectángulos con bordes redondeados: drawRoundRect
Círculos: drawCircle
Óvalos: drawOval
Arcos: drawArc
Todo el lienzo: drawColor o drawARGB
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 19
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: lienzo y pincel
• Ejemplo (polilínea y rectángulo)
Paint paint = new Paint();
paint.setStyle(Style.FILL);
paint.setStrokeWidth(5);
paint.setColor(Color.BLUE);
Path path = new
path.moveTo(50,
path.lineTo(50,
path.lineTo(30,
Path();
130);
60);
80);
canvas.drawPath(path, paint);
canvas.drawRect(new RectF(180, 20, 220, 80), paint);
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 20
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Cadenas de texto
• Dibujado de texto a partir de Canvas
• Normal: drawText
• Posición de cada carácter: drawPosText
• A lo largo de una ruta (Path): drawTextOnPath
• Propiedades de Paint para texto
• setTypeFace, setTextSize, setTextScaleX, setTextSkewX,
setUnderlineText, setStrikeThruText, setFakeBoldText,
setTextAlign, y cualquier otro efecto aplicado al resto de contornos
Paint ptexto = new Paint();
ptexto.setTypeface(Typeface.SANS_SERIF);
ptexto.setTextSize(10);
ptexto.setTextAlign(Align.CENTER);
canvas.drawText("Hola Mundo", posX, posY, ptexto);
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 21
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Componentes propios: otros elementos
• Imágenes: drawBitmap
• Objetos Bitmap
• Un Bitmap se puede crear a partir de una imagen, de un recurso
drawable, de un array de píxeles o vacíos.
Bitmap img = BitmapFactory.decodeResource(
getResources(), R.drawable.image_file);
• Drawables: método draw de la clase Drawable
Drawable d = getResources().getDrawable(R.drawable.resource);
d.draw( canvas );
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 22
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Medición del componente
• Además de sobrecargar onDraw es conveniente
sobrecargar onMeasure
• Invocado por el sistema para asignar un tamaño al
elemento antes de asignarlo al layout
• Para cada dimensión (altura y anchura) se reciben dos
parámetros:
• Tamaño: tamaño en píxeles solicitado
• Modo: EXACTLY, AT_MOST, UNSPECIFIED
• Antes de finalizar onMeasure es necesaria una llamada a
setMeasuredDimension(width, height)
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 23
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Medición del componente
• Ejemplo:
@Override
protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec)
{
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width = DEFAULT_SIZE;
int height = DEFAULT_SIZE;
...
• width y height: las podemos declarar como miembros de la clase
para acceder a ellas desde onDraw. O también podemos usar:
this.getMeasuredWidth() y this.getMeasuredHeight()
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 24
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Medición del componente
• Ejemplo (continuación):
...
switch(widthMode) {
case MeasureSpec.EXACTLY:
width = widthSize;
break;
case MeasureSpec.AT_MOST:
if(width > widthSize) {
width = widthSize;
}
break;
}
...
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 25
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Medición del componente
• Ejemplo (continuación):
...
switch(heightMode) {
case MeasureSpec.EXACTLY:
height = heightSize;
break;
case MeasureSpec.AT_MOST:
if(height > heightSize) {
height = heightSize;
}
break;
}
this.setMeasuredDimension(width, height);
}
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 26
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Atributos propios
• Para parametrizar determinados elementos de nuestras
vistas
• En XML: declarar nuevo atributo
• Declaración en /res/values/attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Grafica">
<attr name="percentage" format="integer"/>
</declare-styleable>
</resources>
• En código: Obtener valor de los atributos
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 27
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Atributos propios
• Obtener al valor del atributo desde el código:
public class GraficaView extends View {
private float mPorcentaje = 25;
public GraficaView(Context context) {
super(context);
}
public GraficaView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.init(attrs);
}
public GraficaView(Context context, AttributeSet attrs) {
super(context, attrs);
this.init(attrs);
}
private void init(AttributeSet attrs) {
TypedArray ta = this.getContext().obtainStyledAttributes(attrs,
R.styleable.Grafica);
this.mPorcentaje = ta.getInt(R.styleable.Grafica_percentage, 0);
}
}
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 28
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Atributos propios
• Uso: En el layout de la actividad:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/es.ua.jtech.android.grafica"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<es.ua.jtech.android.grafica.GraficaView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:percentage="60"
/>
</LinearLayout>
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 29
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Actualización del contenido
• Forzar redibujado: método invalidate de View
miVista.invalidate();
• Es posible usarlo para realizar animaciones
• Para alto rendimiento
• Hilos, temporizadores
• SurfaceView
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 30
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Puntos a tratar
1. Componentes compuestos
Nuevas vistas a partir de agrupaciones de vistas
2. Componentes propios
Crear nuevas vistas desde cero
3. Modificar vistas existentes
Extender la funcionalidad de vistas existentes
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 31
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Modificar vistas existentes
• Alternativa simple para la creación de vistas propias
• Permite ahorrar mucho código
• Basado en:
• Herencia de la vista en la que nos queremos basar
• Extender su funcionalidad añadiendo nuevos métodos
• Modificar su comportamiento sobrecargando
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 32
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Un TextView extendido
• Primer paso: subclase de la clase que queremos
modificar
• Esqueleto:
public class
MiTextView extends TextView {
public MiTextView (Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MiTextView (Context context) {
super(context);
}
public MiTextView (Context context, AttributeSet attrs) {
super(context, attrs);
}
}
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 33
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Un TextView extendido
• Siguiente paso: sobrecarga manejadores
@Override
public void onDraw(Canvas canvas) {
// Primero dibujamos en el canvas bajo el texto...
// ... luego mostramos el texto de la manera habitual
// haciendo uso de la clase base...
super.onDraw(canvas);
// ... y por último dibujamos cosas sobre el texto
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent keyEvent) {
// Primero realizamos las acciones que sean oportunas
// según la tecla pulsada...
// ...y a continuación hacemos también uso de la clase base
return super.onKeyDown(keyCode, keyEvent);
}
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 34
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
¿Preguntas...?
Plataforma Android
© 2012-2013 Depto. Ciencia de la Computación e IA
Personalización - 35