Android Material Design:CollappingToolbar Layout使用概要
7548 ワード
Android Material Design:CollappingToolbar Layout使用概要
私は前にAndroid Materialの設計に関するいくつかの文章を書きました。http://blog.csdn.net/zhangphil/article/details/48861371 2,『Android Material Design:CoordinaorLayoutに基づいて、ナビゲーションバーToolBarを上にスクロールさせ、下にスクロールさせて、ナビゲーションバーを転がし出す』記事のリンク:http://blog.csdn.net/zhangphil/article/details/48877721 3「Android Material Design:CoordinatoLayoutとNestedScrrollView」記事のリンク:http://blog.csdn.net/zhangphil/article/details/48877865 4,『Android Material Design:Linerer LayoutCompt追加分割線divider』記事のリンク:http://blog.csdn.net/zhangphil/article/details/48899585
本文は前四篇の文章をもとに、上記の文章の中で関連する技術点を総合的に使用して、もう一つのAndroid Material Designを実現します。効果は図の通りです。
上の図はAndroid Material Designに導入されたCollappingToolbar Layoutが実現する効果です。先に上図の効果を実現するXMLレイアウトファイルのactivity_を与えます。main.xmlコードを照合して説明します。
(2)app:contentScrim=「菗フ5252」。app:contentScrim設定色値。CollappingToolbar Layoutが収縮した後の最上部の色で、図の上部の赤色です。
(3)app:expadedTitleGravity=「left bottom」アプリ:expan dedTitleGravity Collapping ToolbarLayoutを完全に展開した後、title(「zhangphil」)の位置は、デフォルトではleft+bottomです。(4)ap:layout_collappseMode="この属性は2つの値parallaxとpinがあります。ピンは固定を表します。parallaxはある程度のズーム効果があります。ズーム効果とスピードはap:layout_collappseParaxMultilier制御(値は0.0から1.0まで)です。
テストの主なActivity、MainActivity.java:
Android Material Design:CollappingToolbar Layout使用概要
私は前にAndroid Materialの設計に関するいくつかの文章を書きました。http://blog.csdn.net/zhangphil/article/details/48861371 2,『Android Material Design:CoordinaorLayoutに基づいて、ナビゲーションバーToolBarを上にスクロールさせ、下にスクロールさせて、ナビゲーションバーを転がし出す』記事のリンク:http://blog.csdn.net/zhangphil/article/details/48877721 3「Android Material Design:CoordinatoLayoutとNestedScrrollView」記事のリンク:http://blog.csdn.net/zhangphil/article/details/48877865 4,『Android Material Design:Linerer LayoutCompt追加分割線divider』記事のリンク:http://blog.csdn.net/zhangphil/article/details/48899585
本文は前四篇の文章をもとに、上記の文章の中で関連する技術点を総合的に使用して、もう一つのAndroid Material Designを実現します。効果は図の通りです。
上の図はAndroid Material Designに導入されたCollappingToolbar Layoutが実現する効果です。先に上図の効果を実現するXMLレイアウトファイルの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"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="300dip"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:collapsedTitleGravity="left"
app:contentScrim="#ff5252"
app:expandedTitleGravity="left|bottom"
app:title="zhangphil" >
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"
android:scaleType="centerCrop"
android:src="@drawable/ic_launcher" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dip"
app:divider="?android:attr/listDivider"
app:dividerPadding="5dp"
app:showDividers="beginning|middle|end" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="0" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="3" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="4" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="5" />
</android.support.v7.widget.LinearLayoutCompat>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end|right"
android:src="@drawable/ic_launcher"
app:backgroundTint="#64b5f6"
app:backgroundTintMode="multiply"
app:borderWidth="0dp"
app:elevation="10dp"
app:fabSize="normal"
app:pressedTranslationZ="20dp"
app:rippleColor="#1976d2" >
</android.support.design.widget.FloatingActionButton>
</android.support.design.widget.CoordinatorLayout>
NestedScrrollViewによってページ全体が上にスクロールされると、Android id idがイメージビューのImageViewとして徐々に消えていき、全体のページがNestedScrrollViewから下にスクロールされると、Android idがimagewのImageViewとして徐々に出現することが観測されます。全体の過程の中のToolbarは界面に固定します。CollappingToolbar Layoutに関わるいくつかのキー属性について説明します。(1) app:collappsedTitleGravity="left"この例では、そのtitleフィールド「zhangphil」であり、このtitle値はToolbarのsetTitle()によっても達成でき、両者の効果は同じである。app:collappsedTitleGravity="left"はヘッドのマップImageViewが消えると、このtitleがToolbarの位置(left,rightなどの位置)に戻ります。デフォルトはleftです。(2)app:contentScrim=「菗フ5252」。app:contentScrim設定色値。CollappingToolbar Layoutが収縮した後の最上部の色で、図の上部の赤色です。
(3)app:expadedTitleGravity=「left bottom」アプリ:expan dedTitleGravity Collapping ToolbarLayoutを完全に展開した後、title(「zhangphil」)の位置は、デフォルトではleft+bottomです。(4)ap:layout_collappseMode="この属性は2つの値parallaxとpinがあります。ピンは固定を表します。parallaxはある程度のズーム効果があります。ズーム効果とスピードはap:layout_collappseParaxMultilier制御(値は0.0から1.0まで)です。
テストの主なActivity、MainActivity.java:
package zhangphil.materialdesign;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setLogo(R.drawable.ic_launcher);
mToolbar.setNavigationIcon(android.R.drawable.ic_menu_delete);
mToolbar.setTitle("zhangphil");
//mToolbar.setSubtitle("zhangphil ");
//mToolbar.setSubtitleTextColor(Color.RED);
}
}