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

Transcript

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

9. 9

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