Master your custom views

Real examples of how to create pixel perfect views that will make your design team happy :)

Transcript

1. Master your custom views @rmgoncalo Rui Gonçalo
2. Screens
3. Screen size: physical size (diagonal) e.g: 5.5’’
4. Screen size: physical size (diagonal) e.g: 5.5’’ Resolution: # of physical pixels on a screen e.g: 1080 pixels x 1920 pixels
5. Screen size: physical size (diagonal) e.g: 5.5’’ Screen density: # of pixels within a physical area e.g: 160 dots per inch (dpi) Resolution: # of physical pixels on a screen e.g: 1080 pixels x 1920 pixels
6. Density-independent pixel (dp): virtual pixel that abstracts different density screens 1 dp = 1 pixel on 160 dpi
8. resolution 1080x1920
 density xxhdpi 300dp x 100dp 250dp x 100dp 200dp x 100dp 150dp x 100dp
9. 300dp x 100dp 250dp x 100dp 200dp x 100dp 150dp x 100dp
10. 300dp x 100dp 250dp x 100dp 200dp x 100dp 150dp x 100dp resolution 1080x1920
 density xxhdpi resolution 1080x1920
 density xxhdpi
11. resources.displayMetrics.density resolution 1080x1920
 density xxhdpi
12. 2.6 resolution 1080x1920
 density xxhdpi resources.displayMetrics.density
13. 2.6 160 * 2.6 = 416 dpi width 1080 / 2.6 ~ 411 dp height 1920 / 2.6 ~ 731 dp resolution 1080x1920
 density xxhdpi resources.displayMetrics.density
14. 2.6 300 dp * 2.6 = 780 px 250 dp * 2.6 = 650 px 780px 650px 520px 390px 200 dp * 2.6 = 520 px 150 dp * 2.6 = 390 px 160 * 2.6 = 416 dpi width 1080 / 2.6 ~ 411 dp height 1920 / 2.6 ~ 731 dp resolution 1080x1920
 density xxhdpi resources.displayMetrics.density
15. resources.displayMetrics.density resolution 1080x1920
 density xxhdpi
16. 3.0 160 * 3.0 = 480 dpi width 1080 / 3.0 ~ 360 dp height 1920 / 3.0 ~ 640 dp resolution 1080x1920
 density xxhdpi resources.displayMetrics.density
17. 3.0 300 dp * 3.0 = 900 px 250 dp * 3.0 = 750 px 200 dp * 3.0 = 600 px 150 dp * 3.0 = 450 px 900px 750px 600px 450px 160 * 3.0 = 480 dpi width 1080 / 3.0 ~ 360 dp height 1920 / 3.0 ~ 640 dp resolution 1080x1920
 density xxhdpi resources.displayMetrics.density
18. resolution 1080x1920
 size (dp) 411x731 resolution 1080x1920
 size (dp) 360x640
19. Google Pixel Nexus 5 resolution 1080x1920
 size (dp) 411x731 resolution 1080x1920
 size (dp) 360x640
20. Wide range of Android devices with different screen resolutions and densities
21. <View android:layout_width=“300dp” android:layout_height=“100dp” />
22. /res/values-sw411dp/dimens.xml /res/layout-sw411dp <View android:layout_width=“@dimen/block_width” android:layout_height=“100dp” /> sw?
23. topView centerTopView centerBottomView bottomView val screenWidth = resources.displayMetrics.widthPixels val topW = screenWidth * ( 300 / 360f ) val cTopW = screenWidth * ( 250 / 360f ) val cBottomW = screenWidth * ( 200 / 360f ) val bottomW = screenWidth * ( 150 / 360f ) val height = (100 * resources.displayMetrics.density) default view width default screen width
24. topView centerTopView centerBottomView bottomView topView.layoutParams = LinearLayout.LayoutParams(topW, height) centerTopView.layoutParams = LinearLayout.LayoutParams(cTopW, height) centerBottomView.layoutParams = LinearLayout.LayoutParams(cBottomW, height) bottomView.layoutParams = LinearLayout.LayoutParams(bottomW, height)
25. Design for 1080x1920 480dpi (xxhdpi) take into account different screens width (do the math) https://material.io/devices/ Don’t trust the Android emulator Google Pixel has 480 DPI instead of 416 DPI
26. Custom Views
27. class CustomView : View { } ViewGroup FrameLayout …
28. class CustomView : View { constructor(context: Context) : super(context) constructor(context: Context, attrs: AttributeSet) : super(context, attrs) }
29. class CustomView : View { override fun onAttachedToWindow() override fun onDetachedFromWindow() }
30. onMeasure() onLayout() onDraw() onAttachedToWindow() onDetachedFromWindow()
31. onDraw()
32. onDraw()
33. Canvas()
34. Canvas() Y X resources.displayMetrics .widthPixels resources.displayMetrics .heightPixels
35. Canvas() Y X resources.displayMetrics .widthPixels resources.displayMetrics .heightPixels Paint() - geometries - text - bitmaps Path()
36. resources.displayMetrics.widthPixels ? ? ? ? ?
37. ? ? 70dp ? ? resources.displayMetrics.widthPixels
38. ? ? ? 70dp 50dp resources.displayMetrics.widthPixels
39. ? 110dp 20dp 70dp 50dp resources.displayMetrics.widthPixels
40. 110dp 20dp 70dp 50dp resources.displayMetrics.widthPixels resources.displayMetrics.widthPixels-130dp
41. 110dp 20dp 70dp 50dp resources.displayMetrics.widthPixels resources.displayMetrics.widthPixels-130dp
42. path.lineTo(0f, containerHeight) (0, 0) (0, containerHeight)
43. path.lineTo(screenWidthPx - tagWidthBigPx, containerHeight)
44. path.cubicTo( screenWidthPx - tagWidthSmallPx, containerHeight,
 screenWidthPx - tagWidthBigPx, containerHeight + tagHeightPx,
 screenWidthPx - tagWidthSmallPx, containerHeight + tagHeightPx )
45. path.cubicTo( screenWidthPx - tagWidthSmallPx, containerHeight,
 screenWidthPx - tagWidthBigPx, containerHeight + tagHeightPx,
 screenWidthPx - tagWidthSmallPx, containerHeight + tagHeightPx ) http://cubic-bezier.com/
46. x path.cubicTo( screenWidthPx - tagWidthSmallPx, containerHeight,
 screenWidthPx - tagWidthBigPx, containerHeight + tagHeightPx,
 screenWidthPx - tagWidthSmallPx, containerHeight + tagHeightPx )
47. path.cubicTo( screenWidthPx - tagWidthSmallPx, containerHeight,
 screenWidthPx - tagWidthBigPx, containerHeight + tagHeightPx,
 screenWidthPx - tagWidthSmallPx, containerHeight + tagHeightPx ) x
48. path.cubicTo( screenWidthPx - tagWidthSmallPx, containerHeight,
 screenWidthPx - tagWidthBigPx, containerHeight + tagHeightPx,
 screenWidthPx - tagWidthSmallPx, containerHeight + tagHeightPx ) x
49. path.lineTo(screenWidthPx, containerHeight + tagHeightPx)
50. path.lineTo(screenWidthPx, 0f)
51. path.lineTo(0f, 0f)
52. private val path by lazy { Path() } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) with(path) { lineTo(…)
 cubicTo(…) … } canvas.drawPath(path, paint) }
53. private val paint by lazy { Paint().apply { style = Paint.Style.FILL color = Color.WHITE isAntiAlias = true } }
54. onMeasure() onLayout() onDraw() onAttachedToWindow() onDetachedFromWindow()
56. <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/blue"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <com.example.CustomView android:layout_width="match_parent" android:layout_height="wrap_content"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="12dp" android:text="123" android:textSize="30sp"/> </FrameLayout> </FrameLayout>
57. <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/blue"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <com.example.CustomView android:layout_width="match_parent" android:layout_height="wrap_content"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="12dp" android:text="123" android:textSize="30sp"/> </FrameLayout> </FrameLayout>
58. override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { 
 val customHeightMeasuredSpec =
 MeasureSpec.makeMeasureSpec( containerHeight + tagHeightPx, MeasureSpec.EXACTLY)
 
 super.onMeasure(widthMeasureSpec, customHeightMeasuredSpec) } setMeasuredDimension(measuredWidth: Int, measuredHeight: Int)
59. onMeasure() onLayout() onDraw() onAttachedToWindow() onDetachedFromWindow() invalidate()
61. BL BR TR TL
62. BL BR TR TL
63. BL BR TR TL
64. BL BR TR TL
65. BL BR TR TL AL AR
66. BL BR TR TL AL AR
67. BL BR TR TL AL AR
68. TL width center in x axis = width / 2
69. TLx = width / 2 - peekTopWidth / 2 TLy = 0f TL width center in x axis = width / 2 peekTopWidth y x
70. BLx = (width / 2 - peekBottomWidth / 2) * (1 - offset * 3) BL x offset = 0,1 BLx = 100 * (1 - 0,1 * 3) = 100 * 0,7 = 70 offset = 0,2 BLx = 100 * (1 - 0,2 * 3) = 100 * 0,4 = 40
71. BL y peekHeight BLy = if(BLx >= 0) { peekHeight } else { 
 ??????????
 }
72. BL y BLy = if(BLx >= 0) { peekHeight } else { 
 ??????????
 } peekHeight
73. peekHeight BLy = peekHeight - (peekHeight * offset) offset = 0,1 BLy = 100 - (100 * 0,1) = 100 - 10 = 90 offset = 0,6 BLy = 100 - (100 * 0,6) = 100 - 60 = 40
74. peekHeight BLy = peekHeight - (peekHeight * offset) offset = 0,1 BLy = 100 - (100 * 0,1) = 100 - 10 = 90 offset = 0,35 BLy = 100 - (100 * 0,35) = 100 - 35 = 65 offset is 0,35!!!
75. x x (anchorOffset, 0) (1, 1) offset = 0,35 peekHeight peekHeight - (peekHeight * offset)
76. x x (anchorOffset, 0) (1, 1) To calculate the slope of a line you need only two points from that line m = ( y2 - y1 ) / ( x2 - x1 )
77. x x (anchorOffset, 0) (1, 1) m = ( 1 - 0 ) / ( 1 - anchorOffset )
78. x x (anchorOffset, 0) (1, 1) Equation of a line given a point and the slope y - y1 = m ( x - x1 )
79. x x (anchorOffset, 0) (1, 1) y - 0 = ( 1 / (1 - anchorOffset ) ) * ( x - anchorOffset )
80. x x (anchorOffset, 0) (1, 1) y = ( x - anchorOffset ) / ( 1 - anchorOffset )
81. BLy =
 
 if(BLx >= 0) { peekHeight } else { if(anchorOffset = 0) { anchorOffset = offset } verticalOffset = (offset - anchorOffset) / (1 - anchorOffset) peekHeight - (peekHeight * verticalOffset) } BL y y = ( x - anchorOffset ) / ( 1 - anchorOffset )
82. BL BR TR TL TRx = width - TLx TRy = TLy BRx = width - BLx BRy = BLy
83. ALx = BLx ALy = peekHeight ARx = BRx ARy = peekHeight BL BR TR TL AL AR
84. override fun onPanelSlide(slideOffset: Float) { offset = slideOffset invalidate() } private fun init() { setWillNotDraw(false) LayoutInflater.from(context).inflate(xml, this, true)
 invalidate() }
85. Be careful with onDraw() don’t call methods that call onDraw() or requestLayout()
86. Master your custom views #19231A DARK JUNGLE GREEN @rmgoncalo Rui Gonçalo