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

Transcript

1. 1.

   σβΠϯɾUI JellyBeanͱKitKatͰ ࣮ݱ͢ΔϚςϦΞϧ σβΠϯ Լ઒ ܟ߂ (@androhi) at DroidKaigi 1

2. 2.

   ࣗݾ঺հ 4 גࣜձࣾZaim 4 AndroidΞϓϦ୲౰ 4 TechInstitute ୈ2ظ 4 ͪΐͬͱߨࢣ͠·ͨ͠

   4 Realm meetup #2 4 ൃද > Realm with ContentProvider 2
3. 3.

   ͳͥJellybeanͱKitKat ͳͷ͔? 3

4. 4.

   ྫɿZaimͷόʔδϣϯγΣΞ 4 KitKat͕ѹ౗తʹଟ͍ 4 ͍࣍ͰJellyBean͕ଟ͍ 4 ͜ͷ2ͭͰશମͷ 77% Λ઎ΊΔ 4

   ৽نϢʔβʔͰ΋ 88% Λ઎ΊΔ 4
5. 5.

   ಥવͰ͕͢... 5

6. 6.

   ͜ͷࢿྉ͸3೔લʹҰ౓ࢮʹ·ͨ͠ 6

7. 7.

   4೔લ·Ͱͷ·ͱΊ 1. Android4.xͰ͸ؤுΒͳ͍ 2. SupportLibrary(AppCompat-v7)Ͱग़དྷΔ ൣғʹ͢Δ 3. ϒϥϯυΧϥʔΛ͖ͪΜͱݕ౼ʗઃఆ͢Δ 4. ໘౗͕͘͞Βͣʹ༨നΛద੾ʹઃఆ͢Δ

   7
8. 8.

   4೔લ·Ͱͷ·ͱΊ 1. Android4.xͰ͸ؤுΒͳ͍ 2. SupportLibrary(AppCompat-v7)Ͱग़དྷΔ ൣғʹ͢Δ 3. ϒϥϯυΧϥʔΛ͖ͪΜͱݕ౼ʗઃఆ͢Δ 4. ໘౗͕͘͞Βͣʹ༨നΛద੾ʹઃఆ͢Δ

   8
9. 9.

   9

10. 10.

    ActionBarActivity is dead 10

11. 11.

    Material design ? 11

12. 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. 13.

    GOAL-1 ྑ͍σβΠϯͷݪଇͱͳΔΑ͏ͳ ϏδϡΞϧݴޠΛ࡞Δ͜ͱ 13

14. 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. 15.

    GOAL-2 ϓϥοτϑΥʔϜ΍σόΠεαΠζશମͰ ౷Ұ͞ΕͨମݧΛՄೳʹ͢Δ ୯ҰͷγεςϜΛ։ൃ͢Δ͜ͱ 15

16. 16.

    https://www.youtube.com/watch?v=Q8TXgCzxEnw 16

17. 17.

    Material design! 17

18. 18.

    SupportLibrary Λ࢖ͬͯ গͣͭ͠औΓೖΕ͍͖ͯ·͠ΐ͏ 18

19. 19.

    ஈ֊తͳMaterialDesignͷಋೖ 1. AppCompatςʔϚΛద༻͢Δ <- New! 2. ToolbarʗDrawerLayoutͳͲΛ࢖͏ 3. ৽͍͠InterpolatorΛ࢖͏ <-

    New! 4. ඞཁʹԠͯ͡CardViewͳͲΛ࢖͏ 19
20. 20.

    1. AppCompatςʔϚΛద༻͢Δ 20

21. 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. 22.

    AppCompatActivityΛ࢖͏ public class MainActivity extends AppCompatActivity { @Override protected void

    onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... 22
23. 23.

    UI Component͕ஔ ͖׵ΘΔ AlertDialog AppCompatButton AppCompatCheckBox AppCompatRadioButton AppCompatRatingBar AppCompatTextView AppCompatEditText

    AppCompatSpinner SearchView etc... 23
24. 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. 25.

    AppCompatCheckBox android.support.v7.widget.AppCompatCheckBox // ࠨଆͷύσΟϯάΛऔಘʢDrawable͕͋Ε͹ͦͷ༨ന΋ʣ public int getCompoundPaddingLeft(); // Ϙλϯͷը૾ΛϦιʔε͔Βηοτ public

    void setButtonDrawable(int resId); // ্هͷDrawableܕ public void setButtonDrawable(Drawable buttonDrawable); 25
26. 26.

    AppCompatRadioButton android.support.v7.widget.AppCompatRadioButton // ࠨଆͷύσΟϯάΛऔಘʢDrawable͕͋Ε͹ͦͷ༨ന΋ʣ public int getCompoundPaddingLeft(); // Ϙλϯͷը૾ΛϦιʔε͔Βηοτ public

    void setButtonDrawable(int resId); // ্هͷDrawableܕ public void setButtonDrawable(Drawable buttonDrawable); 26
27. 27.

    AppCompatTextView android.support.v7.widget.AppCompatTextView //େจࣈ΁ͷஔ͖׵͑ON/OFF public void setAllCaps(boolean allCaps); //ςΩετͷ֤ଐੑ஋Ληοτ public void

    setTextAppearance(Context context, int resId); 27
28. 28.

    AppCompatRatingBar android.support.v7.widget.AppCompatRatingBar AppCompatEditText android.support.v7.widget.AppCompatEditText AppCompatSpinner android.support.v7.widget.AppCompatSpinner // ಛʹͳ͠ 28

29. 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. 30.

    3. Toolbar/DrawerLayout ͳͲ Λ࢖͏ 30

31. 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. 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. 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. 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. 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. 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. 37.

    ը໘શମΛΞϓϦ ͷงғؾʹ1 4 PrimaryColor 4 PrimaryDarkColor 4 AccentColor 1 http://www.google.com/design/spec/style/

    color.html#color-ui-color-application 37
38. 38.

    3. ৽͍͠InterpolatorΛ࢖͏ 38

39. 39.

    Support V4ʹ௥Ճ͞Εͨ΋ ͷ 1. FastOutSlowInInterpolator 2. FastOutLinearInInterpolator 3. LinearOutSlowInInterpolator 39

40. 40.

    4. ҎԼ͸ඞཁʹԠͯ͡࢖͏ GoogleͷSampleCodeͰɺͦΕͧΕϕʔγοΫ ͳ࣮૷Λ֬ೝͰ͖·͢ɻ AndroidStudioͰ File > Import Sample... Ͱ։͚·͢ɻ

    4 FloatingActionBar 4 CardView 4 RecyclerView 40
41. 41.

    ·ͱΊ 1. Android4.xͰ͸SupportLibraryΛத৺ʹ 2. ϒϥϯυΧϥʔ͸ɺ͖ͪΜͱݕ౼ʗઃఆ͢Δ 3. Google I/Oʹ஫໨͢Δ 4 Կ΋ͳ͍͔΋͠Εͳ͍͚Ͳ...

    ※ ηογϣϯ಺Ͱ࢖༻ͨ͠ಈըΛҎԼͰެ։ͯ͠ ͓Γ·͢ɻ http://goo.gl/EEax7D 41
42. 42.

    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ※ ZaimͰ͸ΤϯδχΞେืूதͰ͢ʂ 42