Android Custom Views

A talk about custom views on Android

Source code: https://github.com/Bruno125/Custom-Views-Demo

Transcript

1. Custom Views (… & ViewGroups?)
2. MyLinearLayout MyButton Button EditText AppCompatTextView LinearLayout RelativeLayout FrameLayout ConstraintLayout Bases ViewGroup TextView MyView View MyCustomLayout
3. MyLinearLayout MyButton Bases MyView Views ViewGroups Extensiones Extensiones Base MyCustomLayout
4. • Apariencia / comportamiento personalizado • Es reusable • Rendimiento Custom Views
5. • Toma tiempo realizarlos • Complicadas de implementar • Perdemos las funcionalidades básicas de los componentes nativos Custom Views
6. • onDraw • onMeasure • onLayout Custom Views al heredar de “View” al heredar de “ViewGroup”
7. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 }
8. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 }
9. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary);
 }
10. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary);
 } createPaintFromResource
11. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary);
 } private Paint createPaintFromResource(@ColorRes int color){
 Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
 paint.setColor(ContextCompat.getColor(getContext(),color));
 return paint;
 }
12. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); canvas.drawLine(1,2,3,4,color);
 }
13. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); canvas.drawLine(startX=1,startY=2,stopX=3,stopX=4,paint);
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4 (1;2) (3;4)
14. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); 
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
15. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); Path path = new Path(); 
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
16. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); Path path = new Path(); path.moveTo(1,1); 
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
17. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); Path path = new Path(); path.moveTo(1,1); path.moveTo(1,3); 
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
18. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); Path path = new Path(); path.moveTo(1,1); path.moveTo(1,3); path.moveTo(3,3); 
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
19. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); Path path = new Path(); path.moveTo(1,1); path.moveTo(1,3); path.moveTo(3,3); path.moveTo(1,1); 
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
20. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); Path path = new Path(); path.moveTo(1,1); path.moveTo(1,3); path.moveTo(3,3); path.moveTo(1,1); canvas.drawPath(path,paint); 
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
21. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); Path path = new Path(); path.moveTo(1,1); path.moveTo(1,3); path.moveTo(3,3); path.moveTo(1,1); paint.setStyle(Paint.Style.STROKE); canvas.drawPath(path,paint);
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
22. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); 
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
23. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); paint.setTypeface(createTypeface(“myfont.ttf”)); canvas.drawText(“Hola”,x=1,y=2,paint);
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
24. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); paint.setTypeface(createTypeface(“myfont.ttf”)); canvas.drawText(“Hola”,x=1,y=2,paint);
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4 createTypeface
25. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); paint.setTypeface(createTypeface(“myfont.ttf”)); canvas.drawText(“Hola”,x=1,y=2,paint);
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4 private Typeface createTypeface(String s) {
 return Typeface.createFromAsset(getContext().getAssets(),s); } createTypeface
26. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); paint.setTypeface(createTypeface(“myfont.ttf”)); canvas.drawText(“Hola”,x=1,y=4,paint);
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4 Hola
27. onDraw @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas); Paint paint = createPaintFromResource(R.color.colorPrimary); canvas.drawPoint(...); canvas.drawArc(...); canvas.drawCircle(...); canvas.drawRect(...); ...
 } Y (0;0) X 1 2 3 4 5 6 7 8 9 10 1 2 3 4
28. El reto
30. • Cada segundo baja el contador en 1 • Al llegar a 0, sonará una alarma • El contador no puede bajar de 0 ni ser mayor a 24 • Se puede iniciar, detener y resetear el reloj • Por defecto, debe tener un tamaño de 200x200dp Requerimientos
33. 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16 18 1 3 5 7 2 4 6 8 9 11 13 15 10 12 14 16 17 18
34. 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16 18 1 3 5 7 2 4 6 8 9 11 13 15 10 12 14 16 17 18 A B C D E F G
35. 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16 18 1 3 5 7 2 4 6 8 9 11 13 15 10 12 14 16 17 18 A B C D E F G 4: B,C,D,F
36. 1 3 5 7 9 11 13 15 17 2 4 6 8 10 12 14 16 18 1 3 5 7 2 4 6 8 9 11 13 15 10 12 14 16 17 18 A B C D E F G 4: B,C,D,F
37. 
 public interface IClockView {
 /**
 * Inicia la cuenta regresiva
 */
 void start();
 
 /**
 * Regresa el reloj a 24 segundos
 */
 void reset();
 
 /**
 * Detiene el reloj
 */
 void stop();
 }

38. public class ClockView extends View implements IClockView{
 
 /**
 * Se utiliza cuando se crean vistas manualmente, por código
 * @param context contexto en el cual se infla vista
 */
 public ClockView(Context context) {
 this(context,null);
 }
 
 /**
 * Se utiliza cuando se crea la vista desde XML.
 * @param context
 * @param attrs
 */
 public ClockView(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init();
 
 }
 
 private void init(){
 backgroundPaint = createPaintFromResource(R.color.colorPrimary);
 squarePaint = createPaintFromResource(R.color.green);
 gridPaint = createPaintFromResource(R.color.blue);
 activeTextPaint = createPaintFromResource(R.color.colorAccent);
 inactiveTextPaint = createPaintFromResource(R.color.colorInactive);
 
 if(!isInEditMode())
 start();

39. public ClockView(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init();
 
 }
 
 private void init(){
 backgroundPaint = createPaintFromResource(R.color.colorPrimary);
 squarePaint = createPaintFromResource(R.color.green);
 gridPaint = createPaintFromResource(R.color.blue);
 activeTextPaint = createPaintFromResource(R.color.colorAccent);
 inactiveTextPaint = createPaintFromResource(R.color.colorInactive);
 
 if(!isInEditMode())
 start();
 } @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 final int canvasWidth = canvas.getWidth();
 final int canvasHeight = canvas.getHeight();
 
 
 setupGrid(canvasWidth,canvasHeight);
 
 List<ClockPath> paths = initNumberPaths();
 
 updatePathsStatesForNumber(paths, currentNumber);
 
 canvas.drawRect(0,0,canvasWidth,canvasHeight,backgroundPaint);
 

40. 
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 final int canvasWidth = canvas.getWidth();
 final int canvasHeight = canvas.getHeight();
 
 
 setupGrid(canvasWidth,canvasHeight);
 
 List<ClockPath> paths = initNumberPaths();
 //prendemos / apagamos los paths para mostrar el numero
 updatePathsStatesForNumber(paths, currentNumber);
 //pintamos el fondo
 canvas.drawRect(0,0,canvasWidth,canvasHeight,backgroundPaint);
 
 if(showGridBackground) {
 canvas.drawRect(0, 0, canvasSize, canvasSize, squarePaint);
 }
 
 if(showGrid)
 paintGrid(canvas);
 
 for(ClockPath clockPath : paths){
 Paint pathPaint = clockPath.isActive ? activePaint : inactivePaint;
 canvas.drawPath(clockPath.path,pathPaint);
 }
 } private class ClockPath{
 Path path;
 boolean isActive;
 
 ClockPath(Path path, boolean isActive) {
 this.path = path;
 this.isActive = isActive;
 }
 }
41. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android=“http://schemas...”
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 
 <com.example.customviews.ClockView
 android:layout_width=“match_parent"
 android:layout_height=“match_parent" />
 
 </LinearLayout>

42. 
 //region //Timer manager private Runnable updateRunnable = new Runnable() {
 @Override public void run() {
 updateClock();
 }
 }; @Override public void start() { updateClock(); }
 
 @Override public void stop() { removeCallbacks(updateRunnable); }
 
 @Override public void reset() { currentNumber = 24; }
 
 
 private void updateClock() {
 if(currentNumber > 0) {
 currentNumber--;
 invalidate();
 
 if(currentNumber != 0) {
 //sigue actualizando
 postDelayed(updateRunnable, 1000L);
 }else{
 //suena la bocina
 MediaPlayer mp = MediaPlayer.create(getContext(), R.raw.buzzer);
 mp.start();
 }
 }
 }
 //endregion
43. 
 //region //Timer manager private Runnable updateRunnable = new Runnable() {
 @Override public void run() {
 updateClock();
 }
 }; @Override public void start() { updateClock(); }
 
 @Override public void stop() { removeCallbacks(updateRunnable); }
 
 @Override public void reset() { currentNumber = 24; }
 
 
 private void updateClock() {
 if(currentNumber > 0) {
 currentNumber--;
 invalidate();
 
 if(currentNumber != 0) {
 //sigue actualizando
 postDelayed(updateRunnable, 1000L);
 }else{
 //suena la vocina
 MediaPlayer mp = MediaPlayer.create(getContext(), R.raw.buzzer);
 mp.start();
 }
 }
 }
 //endregion
44. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android=“http://schemas...”
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 
 <com.example.customviews.ClockView
 android:layout_width=“match_parent"
 android:layout_height=“match_parent” android:padding=“16dp" />
 
 </LinearLayout>
 Se ignora el padding!
45. /**
 * Setea los valores necesarios para dibujar los numeros, en base al espacio disponible para dibujar
 * @param availableWidth ancho disponible para dibujar
 * @param availableHeight alto disponible para dibujar
 */
 private void setupGrid(float availableWidth, float availableHeight){
 canvasSize = Math.min(availableWidth, availableHeight);
 if(canvasSize < 0)
 canvasSize = 0;
 nColumns = 18;
 cellSize = canvasSize / nColumns * 1.0f;
 }
46. /**
 * Setea los valores necesarios para dibujar los numeros, en base al espacio disponible para dibujar
 * @param availableWidth ancho disponible para dibujar
 * @param availableHeight alto disponible para dibujar
 */
 private void setupGrid(float availableWidth, float availableHeight){
 canvasSize = Math.min(
 availableWidth - getPaddingLeft() - getPaddingRight(),
 availableHeight - getPaddingTop() - getPaddingTop());
 if(canvasSize < 0)
 canvasSize = 0;
 nColumns = 18;
 cellSize = canvasSize / nColumns * 1.0f; horizontalOffset = getPaddingLeft();
 verticalOffset = getPaddingTop();
 }
47. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android=“http://schemas...”
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 
 <com.example.customviews.PaddingClockView
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="30dp"
 />
 
 </LinearLayout>
48. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android=“http://schemas...”
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 
 <com.example.customviews.ClockView
 android:layout_width=“wrap_content”
 android:layout_height=“wrap_content” />
 
 </LinearLayout> Ocupa todo el espacio!
49. How measurement works?
50. How measurement works?
51. How measurement works?
52. How measurement works? Créditos: Huyen Tue Dao @queencodemonkey Child Parent
53. How measurement works? Child defines LayoutParams 
 in XML or Java 1 <com.example.customviews.ClockView
 android:layout_width=“wrap_content”
 android:layout_height=“wrap_content” /> val params = ViewGroup.LayoutParams(
 width = LayoutParams.WRAP_CONTENT, height = LayoutParams.WRAP_CONTENT) child.setLayoutParams(params) Child Parent
54. How measurement works? Child defines LayoutParams 
 in XML or Java 1 <com.example.customviews.ClockView
 android:layout_width=“wrap_content”
 android:layout_height=“wrap_content” /> Child Parent val params = ViewGroup.MarginLayoutParams(
 width = LayoutParams.WRAP_CONTENT, height = LayoutParams.WRAP_CONTENT) params.setMargins(…) child.setLayoutParams(params)
55. How measurement works? Child defines LayoutParams 
 in XML or Java 1 <com.example.customviews.ClockView
 android:layout_width=“wrap_content”
 android:layout_height=“wrap_content” /> Child Parent val params = LinearLayout.LayoutParams(
 width = LayoutParams.WRAP_CONTENT, height = LayoutParams.WRAP_CONTENT) params.gravity = Gravity.CENTER child.setLayoutParams(params)
56. How measurement works? Child defines LayoutParams 
 in XML or Java 1 <com.example.customviews.ClockView
 android:layout_width=“wrap_content”
 android:layout_height=“wrap_content” /> Child Parent val params = ConstraintLayout.LayoutParams(
 width = LayoutParams.WRAP_CONTENT, height = LayoutParams.WRAP_CONTENT) params.dimensionRatio = “1:1”; child.setLayoutParams(params)
57. How measurement works? Child defines LayoutParams 
 in XML or Java 1 <com.example.customviews.ClockView
 android:layout_width=“wrap_content”
 android:layout_height=“wrap_content” /> Child Parent val params = ConstraintLayout.LayoutParams(
 width = LayoutParams.WRAP_CONTENT, height = LayoutParams.WRAP_CONTENT) params.dimensionRatio = “1:1”; child.setLayoutParams(params) child.getLayoutParams()
58. How measurement works? Child defines LayoutParams 
 in XML or Java 1 Child Parent Parent calculates MeasureSpecs and passes to child.onMeasure() 2 child.onMeasure() @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) AT_MOST X como máximo X EXACTLY X debe medir exactamente X UNSPECIFIED sin restricciones! spec { mode | size }
59. How measurement works? Child defines LayoutParams 
 in XML or Java 1 Child Parent Parent calculates MeasureSpecs and passes to child.onMeasure() 2 setMeasuredDimension() @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){ //la vista hija calcula cuan grande quiere //ser en base a los specs que recibe int measuredW = … int measuredH = ... setMeasuredDimension(measuredW, measuredH) } obligatorio!! Child calculates width / height; setMeasureDimension() 3
60. How measurement works? Child defines LayoutParams 
 in XML or Java 1 Child Parent Parent calculates MeasureSpecs and passes to child.onMeasure() 2 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){ //la vista hija calcula cuan grande quiere //ser en base a los specs que recibe int measuredW = … int measuredH = ... setMeasuredDimension(measuredW, measuredH) } obligatorio!! Child calculates width / height; setMeasureDimension() 3 child.getMeasuredWidth() child.getMeasuredHeight()
61. How measurement works? Child defines LayoutParams 
 in XML or Java 1 Child Parent Parent calculates MeasureSpecs and passes to child.onMeasure() 2 Child calculates width / height; setMeasureDimension() 3 Parent calls child.layout(); Final child size / position 4 child.layout() child.getWidth() child.getHeight()
62. public class MeasuredClockView extends PaddingClockView {
 
 private int defaultSize;
 
 public MeasuredClockView(Context context) {
 this(context,null);
 }
 
 public MeasuredClockView(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init();
 }
 
 private void init(){ int density = getContext().getResources().getDisplayMetrics().density;
 defaultSize = (int) (200 * density);
 }
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 }
 }

63. public class MeasuredClockView extends PaddingClockView {
 
 private int defaultSize;
 
 public MeasuredClockView(Context context) {
 this(context,null);
 }
 
 public MeasuredClockView(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init();
 }
 
 private void init(){ int density = getContext().getResources().getDisplayMetrics().density;
 defaultSize = (int) (200 * density);
 }
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 }
 }

64. public class MeasuredClockView extends PaddingClockView {
 
 private int defaultSize;
 
 public MeasuredClockView(Context context) {
 this(context,null);
 }
 
 public MeasuredClockView(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init();
 }
 
 private void init(){ int density = getContext().getResources().getDisplayMetrics().density;
 defaultSize = (int) (200 * density);
 }
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 }
 }

65. @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 }
 }

66. @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 }
 }
 resolveSize
67. @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 }
 }
 resolveSize public static int resolveSizeAndState(int size, int measureSpec, int state) {
 int specMode = MeasureSpec.getMode(measureSpec);
 int specSize = MeasureSpec.getSize(measureSpec);
 final int result;
 switch (specMode) {
 case MeasureSpec.AT_MOST:
 if (specSize < size)
 result = specSize | MEASURED_STATE_TOO_SMALL;
 else
 result = size;
 case MeasureSpec.EXACTLY:
 result = specSize;
 case MeasureSpec.UNSPECIFIED:
 default:
 result = size;
 }
 return result | (state & MEASURED_STATE_MASK);
 }
 public static int resolveSize(int size, int measureSpec) {
 return resolveSizeAndState(size, measureSpec, 0) & MEASURED_SIZE_MASK;
 }
68. @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 }
 }

69. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android=“http://schemas...”
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 
 <com.example.customviews.MeasuredClockView
 android:layout_width=“wrap_content"
 android:layout_height=“wrap_content"
 />
 
 </LinearLayout>
70. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android=“http://schemas...”
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 
 <com.example.customviews.MeasuredClockView
 android:layout_width=“120dp"
 android:layout_height=“200dp"
 />
 
 </LinearLayout>
71. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android=“http://schemas...”
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 
 <com.example.customviews.AdaptableClockView
 android:layout_width=“120dp"
 android:layout_height=“200dp"
 />
 
 </LinearLayout> Check out the code!
72. 
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 final int canvasWidth = canvas.getWidth();
 final int canvasHeight = canvas.getHeight();
 
 
 setupGrid(canvasWidth,canvasHeight);
 
 List<ClockPath> paths = initNumberPaths();
 
 updatePathsStatesForNumber(paths, currentNumber);
 
 canvas.drawRect(0,0,canvasWidth,canvasHeight,backgroundPaint);
 
 if(showGridBackground) {
 canvas.drawRect(0, 0, canvasSize, canvasSize, squarePaint);
 }
 
 if(showGrid)
 paintGrid(canvas);
 
 for(ClockPath clockPath : paths){
 Paint pathPaint = clockPath.isActive ? activePaint : inactivePaint;
 canvas.drawPath(clockPath.path,pathPaint);
 }
 }
73. 
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 final int canvasWidth = canvas.getWidth();
 final int canvasHeight = canvas.getHeight();
 
 
 (canvasWidth,canvasHeight);
 
 List<ClockPath> paths =
 
 updatePathsStatesForNumber(paths, currentNumber);
 
 canvas.drawRect(0,0,canvasWidth,canvasHeight,backgroundPaint);
 
 if(showGridBackground) {
 canvas.drawRect(0, 0, canvasSize, canvasSize, squarePaint);
 }
 
 if(showGrid)
 paintGrid(canvas);
 
 for(ClockPath clockPath : paths){
 Paint pathPaint = clockPath.isActive ? activePaint : inactivePaint;
 canvas.drawPath(clockPath.path,pathPaint);
 }
 } initNumberPaths(); setupGrid
74. 
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 final int canvasWidth = canvas.getWidth();
 final int canvasHeight = canvas.getHeight();
 
 
 (canvasWidth,canvasHeight);
 
 List<ClockPath> paths =
 
 updatePathsStatesForNumber(paths, currentNumber);
 
 canvas.drawRect(0,0,canvasWidth,canvasHeight,backgroundPaint);
 
 if(showGridBackground) {
 canvas.drawRect(0, 0, canvasSize, canvasSize, squarePaint);
 }
 
 if(showGrid)
 paintGrid(canvas);
 
 for(ClockPath clockPath : paths){
 Paint pathPaint = clockPath.isActive ? activePaint : inactivePaint;
 canvas.drawPath(clockPath.path,pathPaint);
 }
 } initNumberPaths(); setupGrid
75. @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 
 
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 } initNumberPaths(); setupGrid
76. @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 setupGrid(resolvedWidth,resolvedHeight);
 paths = initNumberPaths();
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 } initNumberPaths(); setupGrid @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int resolvedWidth = resolveSize(defaultSize,widthMeasureSpec);
 int resolvedHeight = resolveSize(defaultSize,heightMeasureSpec);
 
 
 
 
 setMeasuredDimension(resolvedWidth,resolvedHeight);
 }
77. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android=“http://schemas...”
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 
 <com.example.customviews.OptimizedClockView
 android:layout_width=“wrap_content"
 android:layout_height=“wrap_content"
 />
 
 </LinearLayout>
78. Personalizando nuestro view <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
 <declare-styleable name="clock_view">
 <attr name="background_color" format="color"/>
 <attr name="active_text_color" format="color"/>
 <attr name="inactive_text_color" format="color"/>
 <attr name="show_grid" format="boolean"/>
 <attr name="show_square" format="boolean"/>
 <attr name="default_value" format="integer"/>
 </declare-styleable>
 
 </resources> attrs.xml
79. public class CustomizableClockView extends OptimizedClockView {
 public CustomizableClockView(Context context) {
 this(context, null);
 }
 
 public CustomizableClockView(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init(attrs);
 }
 
 private void init(@Nullable AttributeSet attrs){
 
 TypedArray a = getContext().getTheme().obtainStyledAttributes(
 attrs,
 R.styleable.clock_view,
 0, 0);
 try {
 //Read custom background color
 int backColor = a.getColor(R.styleable.clock_view_background_color, -1)
 if(backColor != -1){
 mBackgroundColor = backColor;
 }
 //Read custom active text color
 int activeColor = a.getColor(R.styleable.clock_view_active_text_color, -1);
 if(activeColor != -1){
 mActiveTextColor = activeColor;
 }
 //Read custom inactive text color
 int inactiveColor = a.getColor(R.styleable.clock_view_inactive_text_color, -1);
 if(inactiveColor != -1){
 mInactiveTextColor = inactiveColor;
 }
 //Set grid
 mShowGrid = a.getBoolean(R.styleable.clock_view_show_grid,false);
 mShowGridBackground = a.getBoolean(R.styleable.clock_view_show_square,false);

80. 
 private void init(@Nullable AttributeSet attrs){
 
 TypedArray a = getContext().getTheme().obtainStyledAttributes(
 attrs,
 R.styleable.clock_view,
 0, 0);
 try {
 //Read custom background color
 int backColor = a.getColor(R.styleable.clock_view_background_color, -1)
 if(backColor != -1){
 mBackgroundColor = backColor;
 }
 //Read custom active text color
 int activeColor = a.getColor(R.styleable.clock_view_active_text_color, -1);
 if(activeColor != -1){
 mActiveTextColor = activeColor;
 }
 //Read custom inactive text color
 int inactiveColor = a.getColor(R.styleable.clock_view_inactive_text_color, -1);
 if(inactiveColor != -1){
 mInactiveTextColor = inactiveColor;
 }
 //Set grid
 mShowGrid = a.getBoolean(R.styleable.clock_view_show_grid,false);
 mShowGridBackground = a.getBoolean(R.styleable.clock_view_show_square,false);
 //Set default number
 int defaultNumber = a.getInt(R.styleable.clock_view_default_value,24);
 if(defaultNumber >= 0 && defaultNumber < 25)
 mCurrentNumber = defaultNumber;
 
 } finally {
 a.recycle();
 }
 
 super.init();
 }

81. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:background="#fff"
 android:orientation="vertical">
 
 
 <com.example.customviews.CustomizableClockView
 android:layout_width="240dp"
 android:layout_height="240dp"
 android:layout_gravity="center_horizontal"
 android:layout_margin="8dp"
 app:background_color=“#ff0" //amarillo
 app:active_text_color=“#00f" //azul
 app:inactive_text_color=“#ffa500" //naranja
 app:show_grid="true"
 app:default_value="20" />
 
 </LinearLayout>

82. Recapitulando… • Nos dan flexibilidad, pero no son sencillos de crear • Para los custom views, importante: • onDraw • onMeasure • Para los custom view groups, importante: • onMeasure • onLayout
83. Info adicional • Huyen Tue Dao (@queencodemonkey)
 Measure, Layout, Draw, Repeat • Caster.IO
 Custom Views & View Groups • Android Docs
 Creating a View Class • Alberto Ballano (@aballano)
 Android layouts to the next level: Custom Views, Compound ViewGroups and Custom ViewGroups • Caren Chang (@calren24)
 Advanced Android Touches
84. Gracias! @brunoaybarg @bruno.aybar Repositorio:
 https://github.com/Bruno125/Custom-Views-Demo Slides: https://speakerdeck.com/bruno125/custom-views Bruno125