Material Components ことはじめ / Get Started Material Components

Transcript

1. Material Components ͜ͱ͸͡Ίɹ Sho Masegi
2. ࣗݾ঺հ • όέπඃͬͯ·͢ɻ • େֶੜͰ͢ɻ • Androidɺ࣌ʑiOS • ॳΊͯͷLT @boc_sho
3. Material Componentsͱ͸ʁ Material DesignΛ࣮ݱ͢ΔͨΊͷUI෦඼܈ ͷ͜ͱɻ ࠷ۙɺ1.0.0͕ϦϦʔε͞Εͨ
4. ࠓճ࿩͢͜ͱ - BottomAppBar - Chip
5. ࢖ͬͨ͜ͱ͋Δํ͍·͔͢ʁ
6. ਌ກΛଓ͚͍ͯͩ͘͞ɻ
7. Material Components in library - AppBarLayout - Backdrop - Banner - BottomAppBar - BottomNavigationView - BottomSheetBehavior - BottomSheetDialogFragment - CheckBox - Chip - CollapsingToolbarLayout - DataTable - Dialog - Divider - ExtendedFloatingActionButton - FloatingActionButton - ImageList - List - MaterialButton - MaterialCardView - Menu - NavigationView - ProgressIndicator - RadioButton - SideSheetBehavior - Slider - Snackbar - Switch - TabLayout - TextInputLayout - Tooltip
8. New Components - AppBarLayout - Backdrop - Banner - BottomAppBar - BottomNavigationView - BottomSheetBehavior - BottomSheetDialogFragment - CheckBox - Chip - CollapsingToolbarLayout - DataTable - Dialog - Divider - ExtendedFloatingActionButton - FloatingActionButton - ImageList - List - MaterialButton - MaterialCardView - Menu - NavigationView - ProgressIndicator - RadioButton - SideSheetBehavior - Slider - Snackbar - Switch - TabLayout - TextInputLayout - Tooltip 
9. ݱࡏ࢖͑Δ΋ͷ͸…. ( - 1.0.0) - AppBarLayout - Backdrop - Banner - BottomAppBar - BottomNavigationView - BottomSheetBehavior - BottomSheetDialogFragment - CheckBox - Chip - CollapsingToolbarLayout - DataTable - Dialog - Divider - ExtendedFloatingActionButton - FloatingActionButton - ImageList - List - MaterialButton - MaterialCardView - Menu - NavigationView - ProgressIndicator - RadioButton - SideSheetBehavior - Slider - Snackbar - Switch - TabLayout - TextInputLayout - Tooltip 
10. ݱࡏ࢖͑Δ΋ͷ͸…. - BottomAppBar - Chip - MaterialButton - MaterialCardView - TextInputLayout 
11. ࢖ͬͯΈΑ͏ʂ
12. ४උ allprojets { repositories { google() jcenter() } } build.gradle
13. ४උ dependencies { // . . . implementation ‘com.google.android.material:material:1.0.0’ // . . . } build.gradle
14. ४උ android { compileSdkVersion 28 defaultConfig { // . . . build.gradle
15. ४උ ThemeΛ”Theme.MaterialComponents.~”ʹ୅͑Δ <style name=“AppTheme” parent=“Theme.MaterialComponents.Light.NoActionBar”>
16. ४උ AndroidXʹϦϑΝΫλϦϯά͢Δ Refactor -> Migrate to AndroidX
17. ४උ׬ྃʂ
18. BottomAppBar
19. BottomAppBar <androidx.coordinatorlayout.widget.CoordinatorLayout > <com.google.android.material.bottomappbar.BottomAppBar . . . app:backgroundTint="@color/colorPrimary" app:fabAlignmentMode="center" app:fabAttached="true" app:navigationIcon="@drawable/menu"/> <com.google.android.material.floatingactionbutton.FloatingActionButton . . . app:layout_anchor="@id/bottom_app_bar" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
20. BottomAppBar <androidx.coordinatorlayout.widget.CoordinatorLayout > <com.google.android.material.bottomappbar.BottomAppBar . . . app:backgroundTint="@color/colorPrimary" app:fabAlignmentMode="center" app:fabAttached="true" app:navigationIcon="@drawable/menu"/> <com.google.android.material.floatingactionbutton.FloatingActionButton . . . app:layout_anchor="@id/bottom_app_bar" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
21. - fabAlignmentMode - fabCradleMargin - fabCradleRoundedCornerRadius - fabCradleVerticalOffset BottomAppBarͷଐੑ
22. - fabAlignmentMode BottomAppBarͷଐੑ start end
23. - fabCradleMargin BottomAppBarͷଐੑ default 10dp
24. - fabCradleRoundedCornerRadius BottomAppBarͷଐੑ default 30dp
25. - fabCradleVerticalOffset BottomAppBarͷଐੑ default 15dp
26. Chip
27. Chip <com.google.android.material.chip.ChipGroup . . . app:chipSpacing="4dp" app:chipSpacingHorizontal="2dp" app:chipSpacingVertival="2dp" app:singleSelection=“true” app:singleLine=“true"/> <com.google.android.material.chip.Chip . . . /> </com.google.android.material.chip.ChipGroup>
28. Chip <com.google.android.material.chip.ChipGroup . . . app:chipSpacing="4dp" app:chipSpacingHorizontal="2dp" app:chipSpacingVertival="2dp" app:singleSelection=“true” app:singleLine=“true"/> <com.google.android.material.chip.Chip . . . /> </com.google.android.material.chip.ChipGroup>
29. ChipGroup: singleLine false true
30. Chip val chip = Chip(context) chip.text = "Chip" chip.chipIcon = ContextCompat.getDrawable(requiredContext(), icon) chip.isCloseIconEnabled = true chip.isCheckable = false chipGroup.addView(chip as View) chip.setOnCloseIconClickListener { chipGroup.removeView(chip as View) } - Chipͷ௥Ճํ๏
31. Chip val chip = Chip(context) chip.text = "Chip" chip.chipIcon = ContextCompat.getDrawable(requiredContext(), icon) chip.isCloseIconEnabled = true chip.isCheckable = false chip.setOnCloseIconClickListener { chipGroup.removeView(chip as View) } chipGroup.addView(chip as View) - Chipͷ௥Ճํ๏
32. Chip chip.chipIcon = locationIcon chip.isCloseIconEnabled = true chip.setOnCloseIconClickListener { … } chip.isCheckable = true
33. MaterialButton MaterialCardView TextInputLayout ʹ͍ͭͯ͸. . . .
34. CodelabͰʂ
35. https:// codelabs.developers.google.com/ codelabs/mdc-101-kotlin/#0
36. ͜Μͳྑ͍΋ͷΛ༻ҙ͠ ͯ͘ΕΔͳΜͯ. . . .
37. Google࠷ߴʂ
38. Android࠷ߴʂ
39. Material Design Roadmap
40. Material Design Roadmap
41. Material Design Roadmap