Android #2 Advent Calendar 2018の4日目の記事です。
対象者
- Material Designを何となく使っていた人
- 最新のMaterial Designを知りたい&情報を追いたい
対象でない人
- 何かのコミッター
目標
- 最新のMaterial Designの追い方を知る
- リファレンスを読みつつ実装できるようになること
できるだけ、ソースはGoogleからにします。補足で他の記事を使います。
Material Designとは
マテリアルデザインについて少し調べるで紹介されています。Googleが発表しました。「デザインのガイドライン」といわれています。このガイドラインに則って開発されているコンポーネント(ビューやボタン)がmaterial-componentsです。
「https://material.io/ 」みなさんもご存知のMaterialDesignの総合サイトです。
What's newには進捗がかかれています。
また、一番下にはリポジトリのリンクがあります。https://github.com/material-components
今日話すのはこのリポジトリについてです。
- android
- ios
- web
- flutter
の4種類です。今回解説するのはAndroidのみに絞っています。(Android以外知らないから)
見たところ、webがスター多いですね。Androidももっと増えろー
歴史
そもそも、Material Designが発表されたのが2014年6月25日のGoogle I/O 2014です。最近ですね。
I/O 2014 アプリに学ぶマテリアルデザイン
この記事は日本語に意訳された記事です。
- レイヤーの概念により影を作る
- アニメーション
- デザインをユーザーアクションに重点を置く
以降、この原則に則ってMaterial Designは開発されています。
Materil Designを扱うために
Catalog App
Android版のリポジトリはCatalog Appがあり、クローンして自分のスマホで動きを確認できます。(ここをAndroidStdioで開く)
コンポーネント一覧
このページは今実装されている、もしくはは今後実装される予定のコンポート達です。
開発中のisuueを見るのが楽しいですよ
Road Map
Road Mapには今後実装される予定のMaterial Designが記載されています。Androidは少し開発が遅れているようです。
情報収集サイト
Google Developer(JP)のMaterial Designタグ
Releaseブランチ
現在、1.1.0-alpha01まであります。安定板は1.0.0です。rc~
はRelease Candidate(リリース候補版)の略です。releaseをRSSで追うにはhttps://github.com/material-components/material-components-android/releases.atom としましょう。
isuueの動きを追うにはGithubのWatch機能もいいですね。メールやらだと見逃すので、SlackのRSSアプリに管理させたり色々ありますが、自分はGH:WatchというAndroidアプリで情報を追っています。
試しにChipを使ってみる
新しいコンポーネントの中にChipがあります。使ってみましょう。まずは、getting startより、Gradleに以下を記入。
dependencies {
// ...
implementation 'com.google.android.material:material:1.0.0'
// ...
}
もし、1.1.0-alpha01
を使いたい場合はこうなります。
dependencies {
// ...
implementation 'com.google.android.material:material:1.1.0-alpha01'
// ...
}
また、style.xmlにMaterial Design用のAppThemeをオーバライドします。
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
ここを参考にXMLを書く
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.chip.ChipGroup
android:layout_width="match_parent"
android:layout_height="438dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="8dp" android:layout_marginLeft="8dp"
android:layout_marginStart="8dp" android:layout_marginEnd="8dp" android:layout_marginRight="8dp">
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Action"
android:text="いぬ"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="@+id/chip"/>
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Entry"
android:text="ねこ"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/chip2"/>
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Filter"
android:text="きりん"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/chip3"/>
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Choice"
android:text="ぞう"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/chip4"/>
</com.google.android.material.chip.ChipGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
参考記事など
Google I/O 2015のビデオ翻訳記事
この記事も
Google I/O 2018 で発表された Material Design のアップデート
解説動画Android Studio: Chips - Material Components