MaterialDesignを扱うために情報を追うTips

11812 ワード
Android MaterialDesign Android テキストリンク

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の原則
原則は

  • レイヤーの概念により影を作る
  • アニメーション
  • デザインをユーザーアクションに重点を置く

以降、この原則に則って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をオーバライドします。

style.xml
<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を書く

activity_main.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