Material Designの作り方 〜Bottom Sheets編〜

Transcript

1. Material Designͷ࡞Γํ ʙBottom sheetsฤʙ VASILY TECH MTG vol.2 2015/08/10 Android Team.
2. What is Bottom sheets? http://www.google.com/design/spec/components/bottom-sheets.html
3. What is Bottom sheets? - આ໌Λඞཁͱ͠ͳ͍ΞΫγϣϯΛෳ਺දࣔ͢ΔUIίϯϙʔωϯτ - ଞͷΞϓϦʹؔ࿈͢ΔΞΫγϣϯΛߦ͏ࡍʹΑ͘࢖ΘΕ·͢
 ex. ి࿩Λ͔͚ΔɺSNSʹγΣΞɺΧϝϥΛىಈ - Ϧετ or άϦουͷϨΠΞ΢τʹͰ͖Δ - ৄ͘͠͸ΨΠυϥΠϯΛࢀর͍ͯͩ͘͠͞
 http://www.google.com/design/spec/components/bottom-sheets.html
4. How to implement Bottom sheets? - ࣗલͰ࣮૷͢Δ - LibraryΛ׆༻͢Δ
 ɾhttps://github.com/soarcn/BottomSheet
 ɾhttps://github.com/Flipboard/bottomsheet
 etc… ˎ2015೥8݄ݱࡏɺDesign Support Library ͰରԠ͍ͯ͠ͳ͍Ͱ͕͢
 ɹࠓޙରԠ͕ߦΘΕͨΒͦΕΛ࢖͏ͷ͕Ұ൪ྑ͍
5. How to implement Bottom sheets? // ʲJavaʳDialogΛΧελϜ࣮ͯ͠ݱ͢Δ
 Dialog bottomSheet = new Dialog(this, R.style.iQON_BottomSheet);
 bottomSheet.setContentView(bottomSheetLayout);
 bottomSheet.setCancelable(true);
 bottomSheet.getWindow().setLayout(
 LinearLayout.LayoutParams.MATCH_PARENT, 
 LinearLayout.LayoutParams.WRAP_CONTENT);
 bottomSheet.getWindow().setGravity(Gravity.BOTTOM);
 bottomSheet.show(); ▪ ࣗલͰ࣮૷ // ʲXMLʳBottomSheet༻ͷελΠϧΛ࡞Δ
 <style name="iQON.BottomSheet" parent="@android:style/Theme.Dialog">
 <item name="android:windowIsTranslucent">true</item>
 <item name="android:windowBackground">@android:color/transparent</item>
 <item name="android:windowContentOverlay">@null</item>
 <item name="android:windowNoTitle">true</item>
 <item name="android:backgroundDimEnabled">true</item>
 <item name="android:windowIsFloating">false</item>
 <item name="android:windowAnimationStyle">@style/iQON.BottomSheet.Animation</item>
 </style> // ʲXMLʳදࣔ/ඇදࣔͷΞχϝʔγϣϯ
 <style name="iQON.BottomSheet.Animation">
 <item name=“android:windowEnterAnimation">
 @anim/bs_show
 </item>
 <item name=“android:windowExitAnimation">
 @anim/bs_hide
 </item>
 </style>
6. How to implement Bottom sheets? ▪ LibraryΛ׆༻ - ߴػೳͰଞͷ༻్ʹ΋Ԡ༻Ͱ͖ͦ͏ͳFlipboard੡ͷLibraryΛ࠾༻ - ͔͠͠ Material Design ͷ࢓༷ʹඍົʹॱक͍ͯ͠ͳ͍ - ݱঢ়Ͱ͸֎͔Βࡉ͔͍ઃఆΛߦ͑Δ࢓૊Έ͕ͳ͔ͬͨͷͰɺForkͯ͠ ύονΛ౰ͯͯ࢖͏͜ͱʹͨ͠
 https://github.com/nissiy/bottomsheet
7. Screenshot of the new Activity
8. Happy Hacking!