Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
33
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

[Android]CoordinatorLayout利用してみた。

皆様こんにちは。Dreamwalkerです。
今回はAndroidのSupport DesignのCoordinator Layoutについて書いてみたいとおもいます。

序論

2年前の頃GOOGLEで、Material Designを発表した後、開発者もUIをデザインすることが、重要になりました。
Coordinator Layoutは基本APIじゃなくて、support DESIGN WIDGETです。SDK22.2.0から追加されました。

         2017_05_02_15_46_04_959.gif

ソース : https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior

最初にこれを見て驚きました。今回は上のような画面を作ってみます。

テスト環境は下のようになります。

software Version
Android Studio 2.3.1
test device 4.4.2
windows 10(64)

本論

新しいPROJECT

まず、新しいProjectを作りたいと思います。

01.PNG

左側は保安の問題なので消しました。Android Studioを開けたら普通こんな画面が出ます。

 1. Start a new Android Studio projectをClickしましょう。

  02.PNG

 2. Projectの名前とdomainを自由に書いましょう。<NEXT>クリック

 3. 私はいつもこの設定で始まっています。自由に選んでください。<NEXT>クリック

 03.PNG

 4. Empty Activity 選択。<NEXT>クリック

  04.PNG

 5. Activity 名前をご自由に。。<FINISH>クリック

05.PNG

Library追加。

皆様全部アンドロイドマスターなので、しやすいと思います。

  1. build.gradleをクリックしてdependenciseを追加します。
build.gragle
    compile 'com.android.support:design:25.3.1'
    compile 'com.android.support:cardview-v7:25.3.1'

 07.PNG

 2. Sync now

ここまで、問題ないと初期設定完了です。

資料準備

私は冬の欅坂が好きなので、下のサイトで写真とtextを参考しました。

Winter Illumination at Keyakizaka-dori Street

皆さんが使いたい写真やテキスト準備してください。

  1. drawbleに写真をPASTE.
  2. 使用するicon追加。
  • drawble右クリック → New → image Assetをクリックしましょう。

 08.png

  • icon typeをAction Bar and Tab icons 選択。

 09.png

  • Clip Art icon Click

 10.PNG

  • 使いたいアイコンを検索。

 11.PNG

 12.PNG

私の場合はfavoriteとaccess timeを使いました。ご自由に選んでみましょう。
アイコンはこの方法以外にもKOKO!でダウンロードして追加しても良いですので、便利な方法でしましょう。

string.xmlでstring追加。

これは決まっていることではないですので、自由に入力しましょう。

string.xml
 <string name="news_title">WINTER ILLUMINATION AT KEYAKIZAKA-DORI STREET</string>
 <string name="cont">In winter, beautiful illumination shines all over the Tokyo.
                     When I see beautiful illumination, I’m excited even though cold 
                     night.Many other illumination events or installation are held at 
                     Roppongi Hills. All of them ends at December 25th.</string>
 <string name="published_date">2017-05-02 12:13:43</string>

Layout Coding

java fileで追加しても良いですが、私はxmlでいじっていきたいと。。

13.PNG

  1. activity_main.xmlをクリック。

  2. コンポネントTree作成。

 自分が考えたコンポネントTreeはしたのようになしました。

image.png

見ずらい方は下を見たら理解できると思います。

14_01.PNG

3.コーディング

AppBarLayout 部分です。

activity_main.xml

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:fitsSystemWindows="true"
            app:expandedTitleTextAppearance="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop"
                android:src="@drawable/keyaki"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:title="@string/news_title"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">


            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

NestedScrollView 部分です。

activity_main.xml
<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            app:cardElevation="5dp"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:padding="12dp"
                    android:text="@string/news_title"
                    android:textColor="@color/colorPrimaryText"
                    android:textSize="20sp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="12dp">

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:contentDescription="@string/app_name"
                        android:src="@drawable/ic_clock" />

                    <TextView
                        android:layout_gravity="center_vertical"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="9"
                        android:padding="12dp"
                        android:text="@string/published_date"
                        android:textColor="@color/colorPrimaryText"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                </LinearLayout>
                <TextView
                    android:layout_gravity="center_vertical"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:lineSpacingMultiplier="1.5"
                    android:layout_marginTop="12dp"
                    android:padding="12dp"
                    android:text="@string/new_cont"
                    android:textSize="13sp"
                    />

            </LinearLayout>


        </android.support.v7.widget.CardView>

    </android.support.v4.widget.NestedScrollView>

FloatingActionButton 部分です。

activity_main.xml

<android.support.design.widget.FloatingActionButton
        app:elevation="6dp"
        android:src="@drawable/ic_fav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:pressedTranslationZ="12dp"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right"/>

Inflation (インフレーション)

MainActivity.java

   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.tool_bar);
        setSupportActionBar(toolbar);
        if (getSupportActionBar() != null){
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }
    }

結論

RUNしてみました。

  2017_05_02_17_11_25_226.gif

完成です。。。

ソースコードは私のGithubであります。
https://github.com/JAICHANGPARK/Coordinator-Layout101

色んな方法ありますが、ここまで読んでくれたあなた参考になったら、嬉しいです。
XMLでレイアウト構成することは最初にコンポネントTreeを書いて見ることが大事です。
そして、沢山の練習が必要です。

読みいただきありがとうございました。
次のPostで会いましょう!
良いゴールデンウィークをー

Dreamwalker。

References

  1. http://coolphotojapan.com/coolphotojapan/category/culture/current/winter-illumination-at-keyakizaka-dori-street
  2. https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html
  3. https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
33
Help us understand the problem. What are the problem?