[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://qiita-image-store.s3.amazonaws.com/0/137182/d22044ff-e04a-456c-8a59-c4adc2626c50.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](https://qiita-image-store.s3.amazonaws.com/0/137182/3a90e4c9-ab42-c1db-ed6f-62049749c693.png)

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

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

　　![02.PNG](https://qiita-image-store.s3.amazonaws.com/0/137182/83da0441-fae0-bce0-2652-36987b4fb77f.png)

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


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

　![03.PNG](https://qiita-image-store.s3.amazonaws.com/0/137182/3aff76d2-b2be-a33a-915f-2f99ee73540c.png)

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

　　![04.PNG](https://qiita-image-store.s3.amazonaws.com/0/137182/88b817da-4a0b-25ba-40cf-18b14833c8b5.png)

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

![05.PNG](https://qiita-image-store.s3.amazonaws.com/0/137182/20a68fe2-c538-6127-cc42-3e7df29b5417.png)

### Library追加。

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

 1. **build.gradleをクリック**してdependenciseを追加します。

```java:build.gragle
    compile 'com.android.support:design:25.3.1'
    compile 'com.android.support:cardview-v7:25.3.1'
```

　![07.PNG](https://qiita-image-store.s3.amazonaws.com/0/137182/ae34f130-f50f-cb22-d968-9cd2330f41ca.png)

　2. Sync now 

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

### 資料準備

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

[Winter Illumination at Keyakizaka-dori Street](http://coolphotojapan.com/coolphotojapan/category/culture/current/winter-illumination-at-keyakizaka-dori-street)

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

 1. drawbleに写真をPASTE.
 2. 使用するicon追加。

- drawble右クリック　→　New　→　image Assetをクリックしましょう。

 　![08.png](https://qiita-image-store.s3.amazonaws.com/0/137182/7aab9a33-7874-2667-5f4a-0e79cd8c77e1.png)

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

　![09.png](https://qiita-image-store.s3.amazonaws.com/0/137182/dea5dda3-27f5-9ccb-557d-ece2a8abfff8.png)

- Clip Art icon Click

　![10.PNG](https://qiita-image-store.s3.amazonaws.com/0/137182/cd6bba0c-e0d2-e726-c40d-c016e827d2bc.png)

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

 　![11.PNG](https://qiita-image-store.s3.amazonaws.com/0/137182/a5d1840f-2142-db42-0774-ecbf6b3e7fab.png)

　![12.PNG](https://qiita-image-store.s3.amazonaws.com/0/137182/2559d182-f37f-68d6-2b65-f85684595d00.png)

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

### string.xmlでstring追加。

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

```xml: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](https://qiita-image-store.s3.amazonaws.com/0/137182/6f4d42ff-7aa4-4452-4f84-de2489f5f1c7.png)

 1. activity_main.xmlをクリック。

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

 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/137182/d832de4a-d777-7696-183b-fcd506ce1b01.png)

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

![14_01.PNG](https://qiita-image-store.s3.amazonaws.com/0/137182/339bdf3b-0337-7c6e-a3c9-b65f4f0e602a.png)

  3.コーディング

AppBarLayout 部分です。

```xml: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 部分です。

```xml: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 部分です。

```xml: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 (インフレーション)

```java: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](https://qiita-image-store.s3.amazonaws.com/0/137182/f9332691-f10d-bcb7-ec50-49043921bdc7.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
4.