Android Design Support Library

Android Design Support Library

2015年6月ごろに公式から追加されたライブラリー。マテリアルデザインを実現しやすくするためのライブラリーだそうな。FloatActionButtonもこれで実現されるボタンのひとつで、Android StudioのいつかのバージョンからはBlank  Activityにデフォルトで追加されている。

どんなものかっていうのはこことかこことか見るのがよさそう。

簡単に箇条書すると、

  • NavigationView
  • TextInputLayout
  • FloatingActionButton
  • TabLayout
  • CoordinatorLayout

内容は名前から想像できたりできなかったり。上のサイトとかで見てみると、なるほど最近のアプリでよく見るボタンとかページのうごきのようです。

前の記事ではFloatingActionButtonが入っているからレイアウトウインドウが使えない、という書き方をしたけど、本当はこの中のCoordinatorLayoutが問題だったような気がする。

Blank Activityで作成したactivity_main.xmlの中身を見ると、

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.testtest.test.MainActivity">

とある。前述のライブラリの一番下に箇条書きしたやつ。これが先に設定されていたから、初心者向けのレイアウトの変更ができなかったのだと予想。

じゃあCoordinatorLayoutってなんなんだろうと思って調べてみると、こういうのがでてきた。

CoordinatorLayoutとは

CoordinatorLayoutのCoordinatorには調整者やまとめ役という意味があります。
CoordinatorLayoutはAndroidのLinearLayoutなどのViewGroupの種類の一つで、
CoordinatorLayoutを使うことで、子Viewの大きさや位置を動的に管理できます。
デフォルトのプロジェクトのテンプレートなどの例を見ながらこのレイアウトを理解していきましょう。

上のページの中にあるgifを見ると理解がしやすい。つまりCoordinatorLayoutもLinearLayoutとかと同じレイアウトの一つだ、と。どういうレイアウトかというと、レイアウトが動的に変わるページのレイアウトだ、と。

やはりちょっとアドバンストなレイアウトのようです。しかしこれでちょっと予想ができた。多分、Contents_main.xmlは上の説明でいう「子View」だったんだろうな、と。

xmlの記述は難しそうだが、構造だけ見るとさらに予想ができる。

シンプルに構造だけ記述すると以下のようなレイアウトになっています。

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            <Toolbar />
        </CollapsingToolbarLayout>
    </AppBarLayout>
    <include layout="@layout/content_scrolling" />
    <FloatingActionButton/>
</CoordinatorLayout>

本格的にCoordinatorLayoutの説明をする前に、このレイアウトの中を説明してきます。

たぶん、<include layout=“@layout/content_scrolling” />これが実際のメインの内容物になるんだろうな。デフォルトでいうcontent_main.xml。

今のところの理解はこれでいいということにしよう。とりあえず基本のレイアウトを理解してから動的な方の勉強に入りたい。さっきのリンクのページはよさそうだからまた読んどく。

あと、そもそもマテリアルデザインってなんだ?という疑問も生まれたので調べてみた。

マテリアルデザイン

こことかにのってた。

マテリアルデザインとは、スマートフォンやタブレットをはじめ、テレビ、メガネ、腕時計など様々なデバイスで統一感があるデザインを取り入れることにより、デバイスが変わっても使いやすいシームレスなデザインの概念。マテリアルデザインはデバイスが変わっても違和感がなく、ユーザーがストレスを感じずに操作できることが肝となる。

※「シームレス(Seamless)」は「継ぎ目のない」という意味で、異なるデバイス、ソフト、サービスで違和感なく操作できることを意味する。

「マテリアル(Material)」は「素材」という意味の英単語で、マテリアルデザインは現実世界と連続的であり、同じ物理的性質を持ったデザインという考えが取り入れられている。マテリアルデザインは現実世界で感じるような”質量”を感じられるような、自然なデザインを目指している。

マテリアルデザインは2014年6月にGoogleが発表したデザインの概念で、Gmail、Google Maps、Google Calendar、Google日本語入力などに導入されている。Android 5.0 LollipopではマテリアルUIの作成をサポートしており、Googleがマテリアルデザインというガイドラインを提示することにより、Androidのデザインが統一されてユーザーにとって使いやすくデザインとなる。

なんとなく理解。Google系のデザインのこと。これも勉強が必要ですね。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中