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

DroidKaigi #1

Transcript

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

   View Slide

2. ࣗݾ঺հ
   4 גࣜձࣾZaim
   4 AndroidΞϓϦ୲౰
   4 TechInstitute ୈ2ظ
   4 ͪΐͬͱߨࢣ͠·ͨ͠
   4 Realm meetup #2
   4 ൃද > Realm with ContentProvider
   2
   

   View Slide

3. ͳͥJellybeanͱKitKat ͳͷ͔?
   3
   

   View Slide

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

   View Slide

5. ಥવͰ͕͢...
   5
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. View Slide

10. ActionBarActivity is dead
    10
    

    View Slide

11. Material design ?
    11
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

17. Material design!
    17
    

    View Slide

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

    View Slide

19. ஈ֊తͳMaterialDesignͷಋೖ
    1. AppCompatςʔϚΛద༻͢Δ <- New!
    2. ToolbarʗDrawerLayoutͳͲΛ࢖͏
    3. ৽͍͠InterpolatorΛ࢖͏ <- New!
    4. ඞཁʹԠͯ͡CardViewͳͲΛ࢖͏
    19
    

    View Slide

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

    View Slide

21. StyleΛ࡞੒͢Δ
    res/values/styles.xml
    
    <br/><!-- ϒϥϯυΧϥʔͷઃఆ --><br/><item name="colorPrimary">@color/brand_color</item><br/><item name="colorPrimaryDark">@color/brand_dark_color</item><br/><item name="colorAccent">@color/brand_accent_color</item><br/>
    21
    

    View Slide

22. AppCompatActivityΛ࢖͏
    public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ...
    22
    

    View Slide

23. UI Component͕ஔ
    ͖׵ΘΔ
    AlertDialog
    AppCompatButton
    AppCompatCheckBox
    AppCompatRadioButton
    AppCompatRatingBar
    AppCompatTextView
    AppCompatEditText
    AppCompatSpinner
    SearchView
    etc...
    23
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

30. 3. Toolbar/DrawerLayout ͳͲ
    Λ࢖͏
    30
    

    View Slide

31. Toolbar
    android.support.v7.widget.Toolbar
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    // ैདྷͷActionBar૬౰ͷػೳΛηοτ
    setSupportActionBar(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
    

    View Slide

32. 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">
    
    ... />
    
    android:layout_gravity="start"
    ... />
    
    32
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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 adapter =
    new ArrayAdapter<>(this, android.R.layout.simple_list_item_1,
    new String[]{"list1", "list2", "list3"});
    listView.setAdapter(adapter);
    35
    

    View Slide

36. StatusBarͷ৭Λม͑ΔʢKitKat onlyʣ
    <br/>...<br/><!-- StatusBarΛಁա(API Level 19Ҏ߱ͰՄೳ) --><br/><item name="android:windowTranslucentStatus">true</item><br/>
    
    ...
    android:paddingTop="24dp"
    ...
    />
    
    android:layout_width="match_parent"
    android:layout_height="24dp"
    android:background="@color/brand_dark_color"
    />
    36
    

    View Slide

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

    View Slide

38. 3. ৽͍͠InterpolatorΛ࢖͏
    38
    

    View Slide

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

    View Slide

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

    View Slide

41. ·ͱΊ
    1. Android4.xͰ͸SupportLibraryΛத৺ʹ
    2. ϒϥϯυΧϥʔ͸ɺ͖ͪΜͱݕ౼ʗઃఆ͢Δ
    3. Google I/Oʹ஫໨͢Δ
    4 Կ΋ͳ͍͔΋͠Εͳ͍͚Ͳ...
    ※ ηογϣϯ಺Ͱ࢖༻ͨ͠ಈըΛҎԼͰެ։ͯ͠
    ͓Γ·͢ɻ
    http://goo.gl/EEax7D
    41
    

    View Slide

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

    View Slide