Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

DroidKaigi #1

Takahiro Shimokawa

April 25, 2015
Tweet

More Decks by Takahiro Shimokawa

Other Decks in Programming

Transcript

  1. 9

  2. 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
  3. 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
  4. 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
  5. AppCompatActivityΛ࢖͏ public class MainActivity extends AppCompatActivity { @Override protected void

    onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... 22
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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