Dicas para desenvolver interfaces incríveis

Essa palestra foi realizada no Canal .NET dia 28 de julho de 2020.

Transcript

1. DICAS PARA DESENVOLVER ✨ INTERFACES INCRÍVEIS
2. APRESENTAÇÃO Ione Souza Junior Desenvolvedor Mobile @Mercos Microsoft MVP ❤ Xamarin @ionixjunior junior@ionixjunior.com.br
3. A GENTE "SE VIRA" BEM DESENVOLVENDO MAS FAZER TELAS E NOMEAR VARIÁVEIS É TENSO
4. PARA NÃO FALHAR, PROCURAMOS BUSCAR REFERÊNCIAS EM APPS RENOMADOS
5. JÁ SEI O QUE QUERO / PRECISO FAZER
6. MAS NÃO TEM O COMPONENTE QUE EU PRECISO
7. CALMA, ESTAMOS AQUI PARA ISSO
8. VAMOS OLHAR PARA ALGUNS APPS E VER COMO PODEMOS REPLICAR SUAS CARACTERÍSTICAS
9. MAS ANTES PRECISAMOS SABER QUAIS FERRAMENTAS TEMOS PARA TRABALHAR !"
10. PAGE CONTROLS
12. ENTEDI, MAS... TEM ALGUM EXEMPLO?
13. MASTER DETAIL
14. TABBED PAGE
15. NAVIGATION PAGE
16. TITLE VIEW PERTENCE À NAVIGATION PAGE
17. DISCLAIMER PODE SER UM POUCO TRABALHOSO COMBINAR ESTES LAYOUTS
18. LAYOUT CONTROLS
20. ABSOLUTE LAYOUT
21. SCROLL VIEW STACK LAYOUT FLEX LAYOUT
22. UÉ, MAS QUAL É A DIFERENÇA ENTRE O STACK LAYOUT E O FLEX LAYOUT?
23. STACK LAYOUT E FLEX LAYOUT
24. STACK LAYOUT E FLEX LAYOUT ▸ FlexLayout facilita a organização dos elementos
25. STACK LAYOUT E FLEX LAYOUT ▸ FlexLayout facilita a organização dos elementos ▸ FlexLayout permite distribuir itens em linhas ou colunas
26. STACK LAYOUT E FLEX LAYOUT ▸ FlexLayout facilita a organização dos elementos ▸ FlexLayout permite distribuir itens em linhas ou colunas ▸ Stack Layout atende a necessidade em casos simples (a grande maioria)
27. FRAME
28. GRID FLEX LAYOUT
29. UÉ, MAS QUAL É A DIFERENÇA ENTRE O GRID E O FLEX LAYOUT?
30. GRID E FLEX LAYOUT
31. GRID E FLEX LAYOUT ▸ FlexLayout é mais fácil para trabalhar com layouts adaptativos
32. GRID E FLEX LAYOUT ▸ FlexLayout é mais fácil para trabalhar com layouts adaptativos ▸ FlexLayout foi baseado no FlexBox do CSS
33. GRID E FLEX LAYOUT ▸ FlexLayout é mais fácil para trabalhar com layouts adaptativos ▸ FlexLayout foi baseado no FlexBox do CSS ▸ FlexLayout trabalha melhor com dados dinâmicos (BindableLayout)
34. GRID E FLEX LAYOUT ▸ FlexLayout é mais fácil para trabalhar com layouts adaptativos ▸ FlexLayout foi baseado no FlexBox do CSS ▸ FlexLayout trabalha melhor com dados dinâmicos (BindableLayout) ▸ Grid é melhor quando você quer fatiar uma tela e já sabe onde os elementos devem ficar (mas a definição é fixa)
35. GRID TAMBÉM É BOM PARA FAZER SOBREPOSIÇÕES MAS E O ABSOLUTE LAYOUT?
36. GRID E ABSOLUTE LAYOUT
37. GRID E ABSOLUTE LAYOUT ▸ AbsoluteLayout é útil quando precisamos de um elemento fixo na tela (mesmo fazendo scroll)
38. GRID E ABSOLUTE LAYOUT ▸ AbsoluteLayout é útil quando precisamos de um elemento fixo na tela (mesmo fazendo scroll) ▸ Grid é útil quando precisamos "fatiar" a tela, mas ele também lida bem com sobreposições
39. VIEW CONTROLS EXISTEM VÁRIOS, VAMOS VER ALGUNS...
40. LABEL
41. IMAGE BUTTON IMAGE BUTTON
42. SWITCH
43. BOX VIEW SHAPE
44. MAP
45. EXPANDER
46. CAROUSEL VIEW INDICATOR VIEW
47. REFRESH VIEW
48. SWIPE VIEW
49. LIST VIEW COLLECTION VIEW
50. UÉ, MAS QUAL A DIFERENÇA ENTRE O LIST VIEW E O COLLECTION VIEW?
51. COLLECTION VIEW PERMITE LISTAS HORIZONTAIS
52. COLLECTION VIEW PERMITE DIVIDIR EM COLUNAS (OU LINHAS)
53. DISCLAIMER COLLECTION VIEW AINDA É MUITO NOVO, USE COM MODERAÇÃO
54. LEGAL, MAS... SE TENHO SCROLL VIEW, POR QUE UTILIZAR COLLECTION VIEW OU LIST VIEW?
55. SCROLL VIEW, COLLECTION VIEW E LIST VIEW
56. SCROLL VIEW, COLLECTION VIEW E LIST VIEW ▸ CollectionView e ListView possuem mecanismos de reciclagem (RecyclerView e Dequeue), é ótimo para listas grandes
57. SCROLL VIEW, COLLECTION VIEW E LIST VIEW ▸ CollectionView e ListView possuem mecanismos de reciclagem (RecyclerView e Dequeue), é ótimo para listas grandes ▸ ScrollView não possui mecanismos de reciclagem e é ideal para listas pequenas
58. MEDIA ELEMENT
59. E TEM MUITOS OUTROS...
60. E TEM MUITOS OUTROS...
61. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle)
62. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView
63. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView
64. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton
65. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox
66. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar
67. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider
68. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper
69. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper
70. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper ▸ DatePicker
71. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper ▸ DatePicker ▸ TimerPicker
72. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper ▸ DatePicker ▸ TimerPicker ▸ Picker
73. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper ▸ DatePicker ▸ TimerPicker ▸ Picker ▸ Entry
74. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper ▸ DatePicker ▸ TimerPicker ▸ Picker ▸ Entry ▸ Editor
75. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper ▸ DatePicker ▸ TimerPicker ▸ Picker ▸ Entry ▸ Editor ▸ ActivityIndicator
76. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper ▸ DatePicker ▸ TimerPicker ▸ Picker ▸ Entry ▸ Editor ▸ ActivityIndicator ▸ ProgressBar
77. E TEM MUITOS OUTROS... ▸ Shapes (ellipse, line, path, polygon, polyline, rectangle) ▸ OpenGLView ▸ WebView ▸ RadioButton ▸ CheckBox ▸ SearchBar ▸ Slider ▸ Stepper ▸ DatePicker ▸ TimerPicker ▸ Picker ▸ Entry ▸ Editor ▸ ActivityIndicator ▸ ProgressBar ▸ TableView
78. LEGAL, MAS COMO JUNTAR TUDO ISSO PARA CRIAR UMA BOA EXPERIÊNCIA?
79. DEPENDE!
80. TWITCH APP
81. TWITCH APP
82. TWITCH APP ▸ NavigationPage
83. TWITCH APP ▸ NavigationPage ▸ TitleView
84. TWITCH APP ▸ NavigationPage ▸ TitleView ▸ FlexLayout
85. TWITCH APP ▸ NavigationPage ▸ TitleView ▸ FlexLayout ▸ CollectionView
86. TWITCH APP ▸ NavigationPage ▸ TitleView ▸ FlexLayout ▸ CollectionView ▸ RefreshView
87. TWITCH APP ▸ NavigationPage ▸ TitleView ▸ FlexLayout ▸ CollectionView ▸ RefreshView ▸ Label
88. TWITCH APP ▸ NavigationPage ▸ TitleView ▸ FlexLayout ▸ CollectionView ▸ RefreshView ▸ Label ▸ Image
89. TWITCH APP
90. TWITCH APP ▸ BoxView / Shape
91. TWITCH APP ▸ BoxView / Shape ▸ StackLayout
92. TWITCH APP ▸ BoxView / Shape ▸ StackLayout ▸ Grid
93. TWITCH APP ▸ BoxView / Shape ▸ StackLayout ▸ Grid ▸ AbsoluteLayout
94. TWITCH APP ▸ BoxView / Shape ▸ StackLayout ▸ Grid ▸ AbsoluteLayout ▸ Frame
95. TWITCH APP ▸ BoxView / Shape ▸ StackLayout ▸ Grid ▸ AbsoluteLayout ▸ Frame ▸ MediaElement
96. TWITCH APP ▸ BoxView / Shape ▸ StackLayout ▸ Grid ▸ AbsoluteLayout ▸ Frame ▸ MediaElement ▸ TabbedPage
97. BORA PROGRAMAR UM POUCO
98. SABE O QUE É MAIS LEGAL?
99. SABE O QUE É MAIS LEGAL? *Somente o código do sample da Twitch
100. SABE O QUE É MAIS LEGAL? ▸ O código desenvolvido foi 100% compartilhado* *Somente o código do sample da Twitch
101. SABE O QUE É MAIS LEGAL? ▸ O código desenvolvido foi 100% compartilhado* ▸ A feature de arrastar o vídeo não tem no app Android oficial *Somente o código do sample da Twitch
102. E AÍ? VAMOS FAZER INTERFACES INCRÍVEIS?
103. O PROJETO ESTÁ NO GITHUB GITHUB.COM/IONIXJUNIOR/XAMARIN-FORMS-INTERFACES
104. CONVITE PARA LIVE STREAMINGS QUINTAS-FEIRAS ÀS 20H SÁBADOS ÀS 10H
105. Ione Souza Junior Desenvolvedor Mobile @Mercos Microsoft MVP @ionixjunior junior@ionixjunior.com.br