Slide 1
Slide 1 text
σβΠϯɾUI
JellyBeanͱKitKatͰ
࣮ݱ͢ΔϚςϦΞϧ
σβΠϯ
Լ ܟ߂ (@androhi) at DroidKaigi
1
Slide 2
Slide 2 text
ࣗݾհ
4 גࣜձࣾZaim
4 AndroidΞϓϦ୲
4 TechInstitute ୈ2ظ
4 ͪΐͬͱߨࢣ͠·ͨ͠
4 Realm meetup #2
4 ൃද > Realm with ContentProvider
2
Slide 3
Slide 3 text
ͳͥJellybeanͱKitKat ͳͷ͔?
3
Slide 4
Slide 4 text
ྫɿZaimͷόʔδϣϯγΣΞ
4 KitKat͕ѹతʹଟ͍
4 ͍࣍ͰJellyBean͕ଟ͍
4 ͜ͷ2ͭͰશମͷ 77% ΛΊΔ
4 ৽نϢʔβʔͰ 88% ΛΊΔ
4
Slide 5
Slide 5 text
ಥવͰ͕͢...
5
Slide 6
Slide 6 text
͜ͷࢿྉ3લʹҰࢮʹ·ͨ͠
6
Slide 7
Slide 7 text
4લ·Ͱͷ·ͱΊ
1. Android4.xͰؤுΒͳ͍
2. SupportLibrary(AppCompat-v7)Ͱग़དྷΔ
ൣғʹ͢Δ
3. ϒϥϯυΧϥʔΛ͖ͪΜͱݕ౼ʗઃఆ͢Δ
4. ໘͕͘͞Βͣʹ༨നΛదʹઃఆ͢Δ
7
Slide 8
Slide 8 text
4લ·Ͱͷ·ͱΊ
1. Android4.xͰؤுΒͳ͍
2. SupportLibrary(AppCompat-v7)Ͱग़དྷΔ
ൣғʹ͢Δ
3. ϒϥϯυΧϥʔΛ͖ͪΜͱݕ౼ʗઃఆ͢Δ
4. ໘͕͘͞Βͣʹ༨നΛదʹઃఆ͢Δ
8
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
ActionBarActivity is dead
10
Slide 11
Slide 11 text
Material design ?
11
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
GOAL-1
ྑ͍σβΠϯͷݪଇͱͳΔΑ͏ͳ
ϏδϡΞϧݴޠΛ࡞Δ͜ͱ
13
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
GOAL-2
ϓϥοτϑΥʔϜσόΠεαΠζશମͰ
౷Ұ͞ΕͨମݧΛՄೳʹ͢Δ
୯ҰͷγεςϜΛ։ൃ͢Δ͜ͱ
15
Slide 16
Slide 16 text
https://www.youtube.com/watch?v=Q8TXgCzxEnw
16
Slide 17
Slide 17 text
Material design!
17
Slide 18
Slide 18 text
SupportLibrary Λͬͯ
গͣͭ͠औΓೖΕ͍͖ͯ·͠ΐ͏
18
Slide 19
Slide 19 text
ஈ֊తͳMaterialDesignͷಋೖ
1. AppCompatςʔϚΛద༻͢Δ <- New!
2. ToolbarʗDrawerLayoutͳͲΛ͏
3. ৽͍͠InterpolatorΛ͏ <- New!
4. ඞཁʹԠͯ͡CardViewͳͲΛ͏
19
Slide 20
Slide 20 text
1. AppCompatςʔϚΛద༻͢Δ
20
Slide 21
Slide 21 text
StyleΛ࡞͢Δ
res/values/styles.xml
<!-- ϒϥϯυΧϥʔͷઃఆ -->
<item name="colorPrimary">@color/brand_color</item>
<item name="colorPrimaryDark">@color/brand_dark_color</item>
<item name="colorAccent">@color/brand_accent_color</item>
21
Slide 22
Slide 22 text
AppCompatActivityΛ͏
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
22
Slide 23
Slide 23 text
UI Component͕ஔ
͖ΘΔ
AlertDialog
AppCompatButton
AppCompatCheckBox
AppCompatRadioButton
AppCompatRatingBar
AppCompatTextView
AppCompatEditText
AppCompatSpinner
SearchView
etc...
23
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
AppCompatCheckBox
android.support.v7.widget.AppCompatCheckBox
// ࠨଆͷύσΟϯάΛऔಘʢDrawable͕͋Εͦͷ༨നʣ
public int getCompoundPaddingLeft();
// Ϙλϯͷը૾ΛϦιʔε͔Βηοτ
public void setButtonDrawable(int resId);
// ্هͷDrawableܕ
public void setButtonDrawable(Drawable buttonDrawable);
25
Slide 26
Slide 26 text
AppCompatRadioButton
android.support.v7.widget.AppCompatRadioButton
// ࠨଆͷύσΟϯάΛऔಘʢDrawable͕͋Εͦͷ༨നʣ
public int getCompoundPaddingLeft();
// Ϙλϯͷը૾ΛϦιʔε͔Βηοτ
public void setButtonDrawable(int resId);
// ্هͷDrawableܕ
public void setButtonDrawable(Drawable buttonDrawable);
26
Slide 27
Slide 27 text
AppCompatTextView
android.support.v7.widget.AppCompatTextView
//େจࣈͷஔ͖͑ON/OFF
public void setAllCaps(boolean allCaps);
//ςΩετͷ֤ଐੑΛηοτ
public void setTextAppearance(Context context, int resId);
27
Slide 28
Slide 28 text
AppCompatRatingBar
android.support.v7.widget.AppCompatRatingBar
AppCompatEditText
android.support.v7.widget.AppCompatEditText
AppCompatSpinner
android.support.v7.widget.AppCompatSpinner
// ಛʹͳ͠
28
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
3. Toolbar/DrawerLayout ͳͲ
Λ͏
30
Slide 31
Slide 31 text
Toolbar
android.support.v7.widget.Toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// ैདྷͷActionBar૬ͷػೳΛηοτ
setSupportActionBar(toolbar);
31
Slide 32
Slide 32 text
DrawerLayout
android.support.v4.widget.DrawerLayout
32
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
StatusBarͷ৭Λม͑ΔʢKitKat onlyʣ
...
<!-- StatusBarΛಁա(API Level 19Ҏ߱ͰՄೳ) -->
<item name="android:windowTranslucentStatus">true</item>
36
Slide 37
Slide 37 text
ը໘શମΛΞϓϦ
ͷงғؾʹ1
4 PrimaryColor
4 PrimaryDarkColor
4 AccentColor
1 http://www.google.com/design/spec/style/
color.html#color-ui-color-application
37
Slide 38
Slide 38 text
3. ৽͍͠InterpolatorΛ͏
38
Slide 39
Slide 39 text
Support V4ʹՃ͞Εͨ
ͷ
1. FastOutSlowInInterpolator
2. FastOutLinearInInterpolator
3. LinearOutSlowInInterpolator
39
Slide 40
Slide 40 text
4. ҎԼඞཁʹԠͯ͡͏
GoogleͷSampleCodeͰɺͦΕͧΕϕʔγοΫ
ͳ࣮Λ֬ೝͰ͖·͢ɻ
AndroidStudioͰ File > Import Sample...
Ͱ։͚·͢ɻ
4 FloatingActionBar
4 CardView
4 RecyclerView
40
Slide 41
Slide 41 text
·ͱΊ
1. Android4.xͰSupportLibraryΛத৺ʹ
2. ϒϥϯυΧϥʔɺ͖ͪΜͱݕ౼ʗઃఆ͢Δ
3. Google I/Oʹ͢Δ
4 Կͳ͍͔͠Εͳ͍͚Ͳ...
※ ηογϣϯͰ༻ͨ͠ಈըΛҎԼͰެ։ͯ͠
͓Γ·͢ɻ
http://goo.gl/EEax7D
41
Slide 42
Slide 42 text
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
※ ZaimͰΤϯδχΞେืूதͰ͢ʂ
42