JellyBeanとKitKatで実現するマテリアルデザイン

DroidKaigi #1

1. σβΠϯɾUI JellyBeanͱKitKatͰ ࣮ݱ͢ΔϚςϦΞϧ σβΠϯ Լ઒ ܟ߂ (@androhi) at DroidKaigi 1
2. ࣗݾ঺հ 4 גࣜձࣾZaim 4 AndroidΞϓϦ୲౰ 4 TechInstitute ୈ2ظ 4 ͪΐͬͱߨࢣ͠·ͨ͠ 4 Realm meetup #2 4 ൃද > Realm with ContentProvider 2
3. ͳͥJellybeanͱKitKat ͳͷ͔? 3
4. ྫɿZaimͷόʔδϣϯγΣΞ 4 KitKat͕ѹ౗తʹଟ͍ 4 ͍࣍ͰJellyBean͕ଟ͍ 4 ͜ͷ2ͭͰશମͷ 77% Λ઎ΊΔ 4 ৽نϢʔβʔͰ΋ 88% Λ઎ΊΔ 4
5. ಥવͰ͕͢... 5
6. ͜ͷࢿྉ͸3೔લʹҰ౓ࢮʹ·ͨ͠ 6
7. 4೔લ·Ͱͷ·ͱΊ 1. Android4.xͰ͸ؤுΒͳ͍ 2. SupportLibrary(AppCompat-v7)Ͱग़དྷΔ ൣғʹ͢Δ 3. ϒϥϯυΧϥʔΛ͖ͪΜͱݕ౼ʗઃఆ͢Δ 4. ໘౗͕͘͞Βͣʹ༨നΛద੾ʹઃఆ͢Δ 7
8. 4೔લ·Ͱͷ·ͱΊ 1. Android4.xͰ͸ؤுΒͳ͍ 2. SupportLibrary(AppCompat-v7)Ͱग़དྷΔ ൣғʹ͢Δ 3. ϒϥϯυΧϥʔΛ͖ͪΜͱݕ౼ʗઃఆ͢Δ 4. ໘౗͕͘͞Βͣʹ༨നΛద੾ʹઃఆ͢Δ 8
10. ActionBarActivity is dead 10
11. Material design ? 11
12. GOAL-1 Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. — Material design/Introduction 12
13. GOAL-1 ྑ͍σβΠϯͷݪଇͱͳΔΑ͏ͳ ϏδϡΞϧݴޠΛ࡞Δ͜ͱ 13
14. GOAL-2 Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods. — Material design/Introduction 14
15. GOAL-2 ϓϥοτϑΥʔϜ΍σόΠεαΠζશମͰ ౷Ұ͞ΕͨମݧΛՄೳʹ͢Δ ୯ҰͷγεςϜΛ։ൃ͢Δ͜ͱ 15
16. https://www.youtube.com/watch?v=Q8TXgCzxEnw 16
17. Material design! 17
18. SupportLibrary Λ࢖ͬͯ গͣͭ͠औΓೖΕ͍͖ͯ·͠ΐ͏ 18
19. ஈ֊తͳMaterialDesignͷಋೖ 1. AppCompatςʔϚΛద༻͢Δ <- New! 2. ToolbarʗDrawerLayoutͳͲΛ࢖͏ 3. ৽͍͠InterpolatorΛ࢖͏ <- New! 4. ඞཁʹԠͯ͡CardViewͳͲΛ࢖͏ 19
20. 1. AppCompatςʔϚΛద༻͢Δ 20
21. StyleΛ࡞੒͢Δ res/values/styles.xml <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- ϒϥϯυΧϥʔͷઃఆ --> <item name="colorPrimary">@color/brand_color</item> <item name="colorPrimaryDark">@color/brand_dark_color</item> <item name="colorAccent">@color/brand_accent_color</item> </style> 21
22. AppCompatActivityΛ࢖͏ public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... 22
23. UI Component͕ஔ ͖׵ΘΔ AlertDialog AppCompatButton AppCompatCheckBox AppCompatRadioButton AppCompatRatingBar AppCompatTextView AppCompatEditText AppCompatSpinner SearchView etc... 23
24. AppCompatButton android.support.v7.widget.AppCompatButton // ϢʔβʔิॿͷΠϕϯτॲཧ public void onInitializeAccessibilityEvent(AccessibilityEvent event); // Ϣʔβʔิॿ৘ใͷॲཧ public void onInitializeAccessibilityNodeInfo(AccessibilityNodeInfo info); //େจࣈ΁ͷஔ͖׵͑ON/OFF public void setAllCaps(boolean allCaps); //ςΩετͷ֤ଐੑ஋Ληοτ public void setTextAppearance(Context context, int resId); 24
25. AppCompatCheckBox android.support.v7.widget.AppCompatCheckBox // ࠨଆͷύσΟϯάΛऔಘʢDrawable͕͋Ε͹ͦͷ༨ന΋ʣ public int getCompoundPaddingLeft(); // Ϙλϯͷը૾ΛϦιʔε͔Βηοτ public void setButtonDrawable(int resId); // ্هͷDrawableܕ public void setButtonDrawable(Drawable buttonDrawable); 25
26. AppCompatRadioButton android.support.v7.widget.AppCompatRadioButton // ࠨଆͷύσΟϯάΛऔಘʢDrawable͕͋Ε͹ͦͷ༨ന΋ʣ public int getCompoundPaddingLeft(); // Ϙλϯͷը૾ΛϦιʔε͔Βηοτ public void setButtonDrawable(int resId); // ্هͷDrawableܕ public void setButtonDrawable(Drawable buttonDrawable); 26
27. AppCompatTextView android.support.v7.widget.AppCompatTextView //େจࣈ΁ͷஔ͖׵͑ON/OFF public void setAllCaps(boolean allCaps); //ςΩετͷ֤ଐੑ஋Ληοτ public void setTextAppearance(Context context, int resId); 27
28. AppCompatRatingBar android.support.v7.widget.AppCompatRatingBar AppCompatEditText android.support.v7.widget.AppCompatEditText AppCompatSpinner android.support.v7.widget.AppCompatSpinner // ಛʹͳ͠ 28
29. AlertDialog android.support.v7.AlertDialog // μΠΞϩάͷϘλϯΛऔಘ public Button getButton(int which); // ϘλϯΛλοϓͨ͠ͱ͖ͷϦεφʔΛηοτ public void setButton(int which, CharSequence text, OnClickListener listener); // ϘλϯΛλοϓͨ͠ͱ͖ʹૹΔϝοηʔδΛηοτ public void setButton(int which, CharSequence text, Message message); // पғͷ༨നΛࢦఆ͠ͳ͕ΒViewΛηοτ public void setView(View view, int spacingLeft, int spacingTop, int spacingRight, int spacingBottom); etc... 29
30. 3. Toolbar/DrawerLayout ͳͲ Λ࢖͏ 30
31. Toolbar android.support.v7.widget.Toolbar Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // ैདྷͷActionBar૬౰ͷػೳΛηοτ setSupportActionBar(toolbar); <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 31
32. DrawerLayout android.support.v4.widget.DrawerLayout <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- ϝΠϯͷViewGroup --> <RelativeLayout ... /> <!-- ϝχϡʔͷViewGroup --> <RelativeLayout android:layout_gravity="start" ... /> </android.support.v4.widget.DrawerLayout> 32
33. DrawerLayoutͷηοτΞοϓ-1 public class MainActivity extends AppCompatActivity { private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mDrawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... // ToolbarͷηοτͳͲ mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); // ActionBarDrawerToggleΛ࢖͏ͱ৽͍͠τάϧϘλϯʹͳΔ mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.app_name, R.string.app_name); mDrawerToggle.setDrawerIndicatorEnabled(true); mDrawerLayout.setDrawerListener(mDrawerToggle); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setDisplayShowHomeEnabled(true); 33
34. DrawerLayoutͷηοτΞοϓ-2 @Override public boolean onOptionsItemSelected(MenuItem item) { ... // ௨ৗͷϝχϡʔॲཧ return mDrawerToggle.onOptionsItemSelected(item) || super.onOptionsItemSelected(item); } @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); mDrawerToggle.syncState(); } 34
35. DrawerLayoutͷηοτΞοϓ-3 ListView listView = (ListView) findViewById(R.id.listView); // ΞΧ΢ϯτ৘ใͷ෦෼ View headerView = LayoutInflater.from(this) .inflate(R.layout.header_navigation_list, listView, false); listView.addHeaderView(headerView); // ϝχϡʔϦετͷ෦෼ ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, new String[]{"list1", "list2", "list3"}); listView.setAdapter(adapter); 35
36. StatusBarͷ৭Λม͑ΔʢKitKat onlyʣ <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> ... <!-- StatusBarΛಁա(API Level 19Ҏ߱ͰՄೳ) --> <item name="android:windowTranslucentStatus">true</item> </style> <!-- StatusBar෼ɺ্ʹ24dpͣΕΔͷͰύσΟϯάΛೖΕΔ --> <android.support.v7.widget.Toolbar ... android:paddingTop="24dp" ... /> <!-- ٖࣅతͳPrimaryDark৭ͷྖҬΛషΔ --> <View android:layout_width="match_parent" android:layout_height="24dp" android:background="@color/brand_dark_color" /> 36
37. ը໘શମΛΞϓϦ ͷงғؾʹ1 4 PrimaryColor 4 PrimaryDarkColor 4 AccentColor 1 http://www.google.com/design/spec/style/ color.html#color-ui-color-application 37
38. 3. ৽͍͠InterpolatorΛ࢖͏ 38
39. Support V4ʹ௥Ճ͞Εͨ΋ ͷ 1. FastOutSlowInInterpolator 2. FastOutLinearInInterpolator 3. LinearOutSlowInInterpolator 39
40. 4. ҎԼ͸ඞཁʹԠͯ͡࢖͏ GoogleͷSampleCodeͰɺͦΕͧΕϕʔγοΫ ͳ࣮૷Λ֬ೝͰ͖·͢ɻ AndroidStudioͰ File > Import Sample... Ͱ։͚·͢ɻ 4 FloatingActionBar 4 CardView 4 RecyclerView 40
41. ·ͱΊ 1. Android4.xͰ͸SupportLibraryΛத৺ʹ 2. ϒϥϯυΧϥʔ͸ɺ͖ͪΜͱݕ౼ʗઃఆ͢Δ 3. Google I/Oʹ஫໨͢Δ 4 Կ΋ͳ͍͔΋͠Εͳ͍͚Ͳ... ※ ηογϣϯ಺Ͱ࢖༻ͨ͠ಈըΛҎԼͰެ։ͯ͠ ͓Γ·͢ɻ http://goo.gl/EEax7D 41
42. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ※ ZaimͰ͸ΤϯδχΞେืूதͰ͢ʂ 42