tsurutanのつぶやき

これが、破壊的イノベーションだっっっ!!

スポンサーリンク

広告

Material Design対応ライブラリーを使ってみた

久しぶりの投稿になります。

まずMaterial Designとはなにかについて説明したいと思います。


Material design - YouTube

マテリアルデザインとはユーザーと端末の対話についてまとめたデザインマニフェストのこと。スマホやタブレット、アプリなどのIT機器だけでなく、メガネや丸い腕時計、家やテレビなど幅広いデザインで使用される概念となっています。
グーグルがマテリアルデザインを採用したのは、今回が初の試みです。アプリの外観部分は簡素化され、従来よりも広いスペースで操作できるシンプルなフラットデザインを採用したことで操作しやすくなりました。また、デザインは三次元性になり、各要素に影や奥行きを持たせて立体的に表現されています。

f:id:tsurutan:20150327222958g:plain

  • Interpolator

f:id:tsurutan:20150327223150g:plain

  • Toolbar

f:id:tsurutan:20150327223300p:plain

マテリアルデザインについてのまとめ

つまり、マテリアルデザインとはgoogleが採用したお気に入りのデザイン。このデザインをアプリに取り入れてgoogle媚を売りたい気に入られたいと思った私は早速google先生にマテリアルデザインをアプリに実装する方法について聞いてみました。すると、このようなサイトを教えてくれました。

Material Design?言いたい事はわかった。だがどうやって実装しろと?そんなあなたに贈るMaterial Design対応ライブラリ集

すでに有志たちがマテリアルデザインに対応したライブラリーを作っていてくれたのです。これを使わないわけにはいかない。私はこのサイトに載っているほとんどのライブラリーをアプリに実装してみました。これらのライブラリーの実装方法を順を追って説明していきたいと思います。

MaterialDesignLibrary

github.com

このライブラリーだけで大体のマテリアルデザインが実装できます。こちらで実装できるViewは以下のようになっております。

f:id:tsurutan:20150327214453p:plain

  • Rectangle Button

f:id:tsurutan:20150327213820p:plain

  • Float Button

f:id:tsurutan:20150327214533p:plain

  • Float small button

f:id:tsurutan:20150327214606p:plain

  • CheckBox

f:id:tsurutan:20150327215004p:plain

  • Switch

f:id:tsurutan:20150327215159p:plain

  • Progress bar circular indeterminate

f:id:tsurutan:20150327215219p:plain

  • Progress bar indeterminate determinate

f:id:tsurutan:20150327215227p:plain

  • Progress bar indeterminate

f:id:tsurutan:20150327215234p:plain

  • Slider

f:id:tsurutan:20150327215244p:plain

  • Slider with number indicator

f:id:tsurutan:20150327215255p:plain

  • SnackBar

f:id:tsurutan:20150327215302p:plain

  • Dialog

f:id:tsurutan:20150327215309p:plain

  • Color selector

f:id:tsurutan:20150327215317p:plain

全てのviewについて説明すると骨が折れるので、人気の高いRectangle ButtonとDialogの実装方法について説明したいと思います。(エディターはAndroid Studioを前提としています。)

Rectangle Button

1. ライブラリーのインポート

まず初めにライブラリーのインポートを行います。プロジェクト内にあるbuild.gradle (Module: app)を開きます。中に dependencies というブロックがあるのでそこに compile 'com.github.navasmdc:MaterialDesign:1.+@aar'と記入します。 全体的にはこのようになるはずです。

repositories {
    jcenter()
}

dependencies {
    compile 'com.github.navasmdc:MaterialDesign:1.+@aar'
}

2. xmlに記入

次にlayoutからRectangle Buttonを実装したいxmlファイルを開き以下のように記入します。

<com.gc.materialdesign.views.ButtonRectangle
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                android:text="Button" />

なんとこれだけでマテリアルデザイン対応のボタンを実装することができます。

  • 所感

このRectangle Buttonで注目してほしいところは実装が簡単なだけではなく、ボタンの色をbackgroundから指定してもリップル効果が消えないというところです。デフォルトのボタンでは直接Colorをbackgroundに指定してしまうとアニメーションが消えてしまい、味気ないものになってしまいます。また、私が以前使っていたAndroid-BootstrapでもbackgroundでColorを指定すると同様にアニメーションが消えてしまいました。(Statusを指定して色を変更すればアニメーションは消えませんが使える色が限られています。)

Dialog

1.ライブラリーのインポート

Rectangle Buttonと同じなので省略します。

2.classにコードを記入

ダイアログを表示したいclassに以下のように記入します。

Dialog dialog = new Dialog(Context context,String title, String message);
dialog.show();

また、ネガティブボタン、ポジティブボタンの処理は以下のように記入します。

// acceptボタンをクリックしたときの処理
dialog.setOnAcceptButtonClickListener(View.OnClickListener onAcceptButtonClickListener);
// cancelボタンをクリックしたときの処理
dialog.setOnCancelButtonClickListener(View.OnClickListener onCancelButtonClickListener);
// acceptボタンの取得
ButtonFlat acceptButton = dialog.getButtonAccept();
// cancelボタンの取得
ButtonFlat cancelButton = dialog.getButtonCancel();

以上です

  • 所感

このようにDialogも非常に簡単に実装できますが、こちらのダイアログはカスタマイズするのが面倒であるので、私的にMaterialDialogというライブラリーで実装するDialogをおすすめします。MaterialDialogの実装方法は次回紹介できればと思います。

Access to Materials -デザイン/アート/建築のためのマテリアルコンピューティング入門


人工知能とパズルを組み合わせたアプリAItoPuzzleをリリースしました ! f:id:tsurutan:20150515122712p:plain

I made an 8- puzzle that implement the artificial intelligence . You can play with Android.

AItoPuzzleをダウンロードする

スポンサーリンク

広告