Material Design対応ライブラリーを使ってみた
久しぶりの投稿になります。
まずMaterial Designとはなにかについて説明したいと思います。
マテリアルデザインとはユーザーと端末の対話についてまとめたデザインマニフェストのこと。スマホやタブレット、アプリなどのIT機器だけでなく、メガネや丸い腕時計、家やテレビなど幅広いデザインで使用される概念となっています。 グーグルがマテリアルデザインを採用したのは、今回が初の試みです。アプリの外観部分は簡素化され、従来よりも広いスペースで操作できるシンプルなフラットデザインを採用したことで操作しやすくなりました。また、デザインは三次元性になり、各要素に影や奥行きを持たせて立体的に表現されています。
- リップル効果
- Interpolator
- Toolbar
つまり、マテリアルデザインとはgoogleが採用したお気に入りのデザイン。このデザインをアプリに取り入れてgoogleに媚を売りたい気に入られたいと思った私は早速google先生にマテリアルデザインをアプリに実装する方法について聞いてみました。すると、このようなサイトを教えてくれました。
Material Design?言いたい事はわかった。だがどうやって実装しろと?そんなあなたに贈るMaterial Design対応ライブラリ集
すでに有志たちがマテリアルデザインに対応したライブラリーを作っていてくれたのです。これを使わないわけにはいかない。私はこのサイトに載っているほとんどのライブラリーをアプリに実装してみました。これらのライブラリーの実装方法を順を追って説明していきたいと思います。
MaterialDesignLibrary
このライブラリーだけで大体のマテリアルデザインが実装できます。こちらで実装できるViewは以下のようになっております。
- Flat Button
- Rectangle Button
- Float Button
- Float small button
- CheckBox
- Switch
- Progress bar circular indeterminate
- Progress bar indeterminate determinate
- Progress bar indeterminate
- Slider
- Slider with number indicator
- SnackBar
- Dialog
- Color selector
全ての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の実装方法は次回紹介できればと思います。
人工知能とパズルを組み合わせたアプリAItoPuzzleをリリースしました !
I made an 8- puzzle that implement the artificial intelligence . You can play with Android.