Android Material Design : CollapsingToolbarLayout使用简介

淡淡的烟草味﹌ 2024-02-17 16:16 5阅读 0赞

**Android Material Design : CollapsingToolbarLayout使用简介**

我之前写了若干篇关于Android Material设计的文章：  
1，《Android Material Design的FloatingActionButton，Snackbar和CoordinatorLayout》[http://blog.csdn.net/zhangphil/article/details/48861371][http_blog.csdn.net_zhangphil_article_details_48861371]  
2，《Android Material Design：基于CoordinatorLayout实现向上滚动导航条ToolBar滚出、向下滚动导航条滚出》文章链接：[http://blog.csdn.net/zhangphil/article/details/48877721][http_blog.csdn.net_zhangphil_article_details_48877721]  
3《Android Material Design：CoordinatorLayout与NestedScrollView》文章链接：[http://blog.csdn.net/zhangphil/article/details/48877865][http_blog.csdn.net_zhangphil_article_details_48877865]  
4，《Android Material Design ：LinearLayoutCompat添加分割线divider 》文章链接：[http://blog.csdn.net/zhangphil/article/details/48899585][http_blog.csdn.net_zhangphil_article_details_48899585]

本文在前四篇文章的基础上，综合使用上述文章中涉及到的技术点，实现另外一种Android Material Design : CollapsingToolbarLayout。  
效果如图所示：

![Center][]

上图所示就是Android Material Design 中引入的CollapsingToolbarLayout要实现的效果。  
先给出实现上图效果的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>

可以观察到，当整个页面由NestedScrollView触发向上滚动时候，android id为imageView的ImageView渐渐消失，当整个页面由NestedScrollView向下滚动时候，android id为imageView的ImageView渐渐出现。而整个过程中的Toolbar则固定（pin）在界面中。  
对CollapsingToolbarLayout涉及到的几个关键属性加以说明。  
（1） app:collapsedTitleGravity="left"。  
在本例中就是那个title字段“zhangphil”，这个title值也可以由Toolbar的setTitle()完成，两者之间效果相同。app:collapsedTitleGravity="left"表示当头部的衬图ImageView消失后，此title（zhangphil）将回归到Toolbar的位置（left，right等位置），默认是left。

（2）app:contentScrim="\#ff5252"。  
app:contentScrim设置颜色值。是CollapsingToolbarLayout收缩后最顶部的颜色，就是图中顶部的红色。

（3）app:expandedTitleGravity="left|bottom"  
app:expandedTitleGravity表示将此CollapsingToolbarLayout完全展开后，title（“zhangphil”）所处的位置，默认是left + bottom。  
（4）app:layout\_collapseMode=" "  
此属性有两个值parallax和pin。Pin表示固定。parallax 则有一定的缩放效果。缩放效果和速率则可由app:layout\_collapseParallaxMultiplier控制（值从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);
    	}
    }

[http_blog.csdn.net_zhangphil_article_details_48861371]: http://blog.csdn.net/zhangphil/article/details/48861371
[http_blog.csdn.net_zhangphil_article_details_48877721]: http://blog.csdn.net/zhangphil/article/details/48877721
[http_blog.csdn.net_zhangphil_article_details_48877865]: http://blog.csdn.net/zhangphil/article/details/48877865
[http_blog.csdn.net_zhangphil_article_details_48899585]: http://blog.csdn.net/zhangphil/article/details/48899585
[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/138a11f805a04c9eadbcf4f1d2331774.png