3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ドラッグで始める最速CoordinatorLayout

Last updated at Posted at 2020-02-29

#最初に一言
スクロールに合わせてアクションバーとか消したいと思ってCoordinatorLayout使おうとして、「これめちゃくちゃ使いづらい(泣)、そもそもCoordinatorLayoutってどんなレイアウトよ?,linearなのか?constraintなのか?、Viewがなんか重なるし、スクロールしても消えないし...」って思いをしたことがある人は自分だけじゃないはず。

レイアウトのネスト構造が分かりづらいCollapsingLayout...
CoordinatorLayout調べてもandroid xに対応した記事が少ない...

今回はそんな体験を踏まえてCoordinatorLayoutの始め方を書いておこうと思った。

#CoordinatorLayoutって?
これを使えばどんなことができるのか?
↓こういうよく見るスクロールに合わせて消えるヤツ

#誰でもできるドラッグ実装!
ほぼドラッグで冒頭のスクロールで消えるヤツ作っていく!
android studio のUIからドラッグでできるようになっている。(多分最近のアップデートのおかげ(未確認))
最初にプロジェクト作ったら↓みたいな感じになってる。
キャddcプチャ.PNG

ここでパレットペインからAppBarLayoutをconstraintLayoutとかの適当な場所にドラッグする。
すると↓のようなポップアップが表示される。
キャプチccャ.PNG
これがめちゃくちゃ便利!!

とりあえずCollapsing Toolbarにチェックを入れてOKクリック。

キャプcccfaチャ.PNG こんな感じに**自動生成**される。

ここで実行してみると↓みたいな感じの動きになる。

おぉ、なんかそれっぽいぞ。雰囲気がある。

ベースはこれで完成
ここからtoolbarをなくす場合は非表示にしたり、画像載せたり、ViewPager入れたりとかしてカスタマイズしていく。

ここからはドラッグで生成されたToolbarを使う場合を想定する。
ドラッグで自動生成されたtoolbarを使う場合はデフォルトで存在するtoolbarを消して自動生成されたtoolbarを設定する必要がある。

そこでstylesを以下のように書き換えてアクションバーを非表示にする

styles.xml
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
     <!--        アクションバーの文字色-->
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

次にアクションバーの設定
onCreateに以下を加える

MainActivity.kt
setSupportActionBar(toolbar)

画像を表示する
レイアウトにImageViewを載せてapp:layout_collapseMode="parallax"属性を追加する。
また、toolbarにタイトルを設定する。
最後にCollapsingToolbarLayout
の属性に**app:layout_scrollFlags="scroll|exitUntilCollapsed"**を追加する。

cccccキャプチャ.PNG  キャプチccgasdャ.PNG

一応レイアウトファイルはこんな感じ

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@drawable/house" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="スイスの湖小屋"></androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".MainActivity">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello World!"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

実行してみると...

完成!!

ちなみにCollapsingToolbarLayoutの属性を**app:layout_scrollFlags="scroll"**に変更すると下のようにアクションバーも隠れるようになる。

#おわり
CoordinatorLayoutは正直苦手意識が強かったけどUI使って簡単に実装出来た。
中身を色々変えてアプリに組み込めそう...

今回の冒頭のrecyclerView入りはgithubに挙げてあります。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?