Material Design (五) CollapsingToolbarLayout的使用

CollapsingToolbar可以实现这样一种效果,在界面顶部显示一张图片(也可以是其他VIew),往上滑动的时候图片滑动至消失,ToolBar出现在顶部显示,往下滑动则相反。第一次看见的时候觉得很 眼前一亮很酷的感觉,然而现在只需要使用一些控件便可以实现这种效果

1.新建一个FruitActivity用来展示水果的详细信息
新建布局文件activity_fruit_detail.xml

根布局还是用 我们的<android.support.design.widget.CoordinatorLayout/>,为了使图片的位置可以达到系统状态栏的位置,在根布局即这里的CoordinatorLayout控件中还是要添加属性 android:fitsSystemWindows="true",而且把状态栏的颜色设置为透明

和 Material Design (三) Navigation Drawer的使用中一样,在values和values-21两个文件夹下面的style文件中写两个名字一样的style,把values-21下面的那个style 多一项 <item name="android:statusBarColor">@android:color/transparent</item>

如果项目中多个地方用到同样的设置,我们可以添加一个公用的 AppTheme.StatusBarTransparentTheme

这里的

<style name="AppTheme.StatusBarTransparentTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>

相当于

<style name="StatusBarTransparentTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style

在设置主题时要设置全名

<activity android:name=".FruitDetailActivity" android:theme="@style/AppTheme.StatusBarTransparentTheme"/>

在CoordinatorLayout中先放置一个<android.support.design.widget.AppBarLayout/>控件

在置于顶部<android.support.design.widget.AppBarLayout/>中放入一个<android.support.design.widget.CollapsingToolbarLayout/>控件

再往CollapsingToolbarLayout中依次放入<ImageView/> 和<android.support.v7.widget.Toolbar/>两个控件。

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">
 
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
 
            <ImageView
                android:id="@+id/fruit_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
 
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

app:contentScrim="?attr/colorPrimary" 设置toolBar显示时的背景色
app:layout_scrollFlags="scroll|exitUntilCollapsed" 设置折叠方式

在一个AppBarLayout下放置<android.support.v4.widget.NestedScrollView/>控件

NestedScrollView中放界面展示的内容,为了整体的Material Design效果,这里也用到CardView控件,NestedScrollView和CardView都是继承FrameLayout

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        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="15dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="35dp"
            app:cardCornerRadius="4dp">
 
            <TextView
                android:id="@+id/fruit_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp" />
        </android.support.v7.widget.CardView>
    </android.support.v4.widget.NestedScrollView>

同样在NestedScrollView中需要设置 app:layout_behavior="@string/appbar_scrolling_view_behavior"

我们可以在CoordinatorLayout中添加一个FloatingActionButton

设置app:layout_anchor="@id/app_bar_layout",是对FloatingActionButton的范围的限制

<android.support.design.widget.FloatingActionButton
        android:id="@+id/float_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/icon_share"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|end" />

完成后效果如图所示


Material Design的学习暂时告一段落,虽然各家公司都有自己的app设计风格,Material Design 不一定能用到所有的app中,但是这种设计风格给Android带来了风格统一,动画流畅的良好视觉体验,实现起来简单易行,在应用市场上很多比较成功的app都已实现Material Design 的设计,如印象笔记、随笔记等等,所以我们可以多多尝试Material Design给我们带来的新体验。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,786评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,045评论 2 59
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    wgl0419阅读 6,370评论 1 9
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,591评论 2 45
  • 可悲的生活 就是我这样的吧 该努力的时候没有努力过 结果庸庸碌碌, 一切的烦恼都是因为我顾及太多 犹豫不决 我知道...
    心想荣阅读 132评论 0 0