Arquitectura de Aplicaciones -...

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2012-2013 Depto. Ciencia de la Computación e IA

Plataforma Android

Sesión 6: Personalización de componentes


© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Personalización - 2

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



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




• 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>




• 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); }}




• 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); }}




• 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(""); }});




• 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>




• Otra opción: definir el layout mediante código

public EdicionBorrable(Context context) { // CONSTRUCTOR super(context); // 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));}



Puntos a tratar









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 } }



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:

• Tras definir sus propiedades, podemos utilizarlo para dibujar elementos usando métodos de la clase Canvas

Paint p = new Paint();p.setColor(Color.RED);




• 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));




• Propiedades pincel:

• Máscaras: suavizado (BlurMaskFilter) o relieve

(EmbossMaskFilter)

• Se aplican con setMaskFilter




• 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);




• Propiedades pincel:• Estilo del trazo

• Grosor del trazo: setStrokeWidth• El tipo de línea: setPathEffect• Uniones en polilíneas: setStrokeJoint• Forma de las terminaciones: setStrokeCap




• 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: setXferModePermite dibujar solamente sobre zonas con un determinado color.




• 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




• Primitivas geométricas del lienzo (Canvas):• Puntos: drawPoint• Líneas: drawLine• Polilíneas: drawPath

• Objeto de la clase Path compuesto de segmentos

• Rectángulos: drawRect• Rectángulos con bordes redondeados: drawRoundRect• Círculos: drawCircle• Óvalos: drawOval• Arcos: drawArc• Todo el lienzo: drawColor o drawARGB




• 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();path.moveTo(50, 130);path.lineTo(50, 60);path.lineTo(30, 80); canvas.drawPath(path, paint); canvas.drawRect(new RectF(180, 20, 220, 80), paint);



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);



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 );



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)




• Ejemplo:

• 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()

@Overrideprotected 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;

...




• Ejemplo (continuación):

...

switch(widthMode) { case MeasureSpec.EXACTLY: width = widthSize; break; case MeasureSpec.AT_MOST: if(width > widthSize) { width = widthSize; } break; }

...




• 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);}



Atributos propios

• Para parametrizar determinados elementos de nuestras vistas

• En XML: declarar nuevo atributo• Declaración en /res/values/attrs.xml

• En código: Obtener valor de los atributos

<?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="Grafica"> <attr name="percentage" format="integer"/> </declare-styleable></resources>



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); }}



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>



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



Puntos a tratar









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



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); }}



• Siguiente paso: sobrecarga manejadores

Un TextView extendido

@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); }



¿Preguntas...?

Arquitectura de Aplicaciones -...

Documents

Transcript of Arquitectura de Aplicaciones -...