AndroidのCollapsingToolbarLayoutの例
Android CollapsingToolbarLayoutの例へようこそ。このチュートリアルでは、アプリケーションにCollapsingToolBarLayoutを作成および実装する方法について説明します。
アンドロイドのCollapsingToolbarLayout
AndroidのCollapsingToolbarLayoutは、折りたたみ可能なアプリバーを実装するためのToolbarのラッパーです。これは、AppBarLayoutの直接の子として使用するように設計されています。このタイプのレイアウトは、WhatsAppアプリケーションのプロフィール画面でよく見られます。このレイアウトには以下が含まれます ：
- Collapsing Title: The title is larger when the layout is expanded. The text size becomes smaller as the layout is collapsed and scrolled off the screen.
- app:layout_scrollFlags: The scroll flags of this layout is typically set to “scroll|exitUntilCollapsed”.
- app:collapsedTitleGravity: Specifies the gravity of title in the container when collapsed.
- app:contentScrim: This requires specifying a drawable or color value of the CollapsingToolbarLayouts content when it has been scrolled sufficiently off screen eg. ?attr/colorPrimary.
- app:scrimAnimationDuration: Specifies the duration used for scrim visibility animations. This requires an integer value such as “100”.
最新のSDKに最近アップデートした場合は、新しいプロジェクトを作成する際にスクロールアクティビティタイプを選択してください（CollapsingToolbarLayoutの事前に作成された実装が含まれています）。デフォルトの新規プロジェクトを実行すると、次のような出力が表示されます：このチュートリアルでは、デフォルトのプロジェクトに対して以下の変更を行います：ImageViewの表示、FABボタンからツールバーと同等のアイコンの表示（折りたたまれたとき）。
以下はAndroid CollapsingToolbarLayoutの例のプロジェクト構造です。
AndroidのCollapsingToolbarLayoutコードをパラフレーズしてください。
下にactivity_scrolling.xmlが示されています。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.scdev.collapsingtoolbarlayout.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/photo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="@android:drawable/ic_dialog_info" />
</android.support.design.widget.CoordinatorLayout>
app:layout_anchorとapp:layout_anchorGravityはFABをAppBarLayoutの右下にアンカーします。注意：このチュートリアルではcontent_scrolling.xmlはデフォルトのままにしておきます。menu_scrolling.xmlファイルは以下の通りに定義されています。
<menu xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
tools:context="com.scdev.collapsingtoolbarlayout.ScrollingActivity">
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />
<item
android:id="@+id/action_info"
android:orderInCategory="200"
android:title="info"
app:showAsAction="ifRoom"
android:icon="@android:drawable/ic_dialog_info"/>
</menu>
ScrollingActivity.javaのコードは以下のように定義されています。
package com.scdev.collapsingtoolbarlayout;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
public class ScrollingActivity extends AppCompatActivity {
private Menu menu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
AppBarLayout mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow = false;
int scrollRange = -1;
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
isShow = true;
showOption(R.id.action_info);
} else if (isShow) {
isShow = false;
hideOption(R.id.action_info);
}
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
this.menu = menu;
getMenuInflater().inflate(R.menu.menu_scrolling, menu);
hideOption(R.id.action_info);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
} else if (id == R.id.action_info) {
return true;
}
return super.onOptionsItemSelected(item);
}
private void hideOption(int id) {
MenuItem item = menu.findItem(id);
item.setVisible(false);
}
private void showOption(int id) {
MenuItem item = menu.findItem(id);
item.setVisible(true);
}
}
上記のコードでは、CollapsingToolbarLayoutが折りたたまれたのか展開されたのかを知るために、AppBarLayoutインスタンスにaddOnOffsetChangedListenerリスナーを追加します。 if elseの条件に応じて、ツールバーの情報オプションを表示または非表示にします。アプリケーションの出力は以下に示します。このチュートリアルはここで終了です。Android CollapsingToolbarLayoutプロジェクトは、以下のリンクからダウンロードできます。
AndroidのCollapsingToolbarLayoutの例題プロジェクトをダウンロードしてください。