Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dicas para desenvolver interfaces incríveis

Dicas para desenvolver interfaces incríveis

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

790726f5b5613d61926dea2e2efd4da1?s=128

Ione Souza Junior

July 28, 2020
Tweet

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

  11. None
  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

  19. None
  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