作为Android的控件, CoordinatorLayout已经加入最新的HelloWorld项目中, 也是Material风格的重要组件, 协调(Coordinate)其他组件, 实现联动. 那么让我们来看看这个动画效果怎么用吧?
本文源码的GitHub下载地址
欢迎Follow我的GitHub: https://github.com/SpikeKing
准备
首先新建HelloWorld项目.
在项目的build.gradle文件中, 引入头像控件库和CardView库, 在本例中会使用.
|
1 2 3 |
compile 'de.hdodenhof:circleimageview:1.3.0' compile 'com.android.support:cardview-v7:23.1.0' compile 'com.jakewharton:butterknife:7.0.1' |
页面
在activity_main.xml中, 保留CoordinatorLayout和AppBarLayout, 重新编写页面.
android:fitsSystemWindows="true"这句也需要去掉, 本例需要保留最上面的状态栏(status bar), 这个属性会导致重叠, 默认false.
activity_main.xml代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<android.support.design.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" android:fitsSystemWindows="true" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> |
修改主题颜色, 粉色符合风格
|
1 2 |
<color name="colorPrimary">#FFCCCC</color> <color name="colorPrimaryDark">#FF00FF</color> |
在AppBarLayout中, 添加CollapsingToolbarLayout控件, CollapsingToolbar会滚动消失, 被ToolBar替换, 实现滚动动画.
|
1 2 3 4 5 6 |
<android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="450dp" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> </android.support.design.widget.CollapsingToolbarLayout> |
app:layout_scrollFlags的属性, scroll滑动, exitUntilCollapsed退出到最小, snap自动滑动动画, 定义CollapsingToolbarLayout的滑动属性.
CollapsingToolbarLayout划分两部分, 一部分大图, 一部分文字.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<ImageView android:layout_width="match_parent" android:layout_height="300dp" android:scaleType="centerCrop" android:src="@drawable/large" app:layout_collapseMode="parallax" /> <FrameLayout android:layout_width="match_parent" android:layout_height="150dp" android/span> android:layout_height="150dp" androidblockquote> 更多: http://www.wangchenlong.org/ 本文源码的GitHub下载地址
准备首先新建HelloWorld项目. 在项目的build.gradle文件中, 引入头像控件库和CardView库, 在本例中会使用.
页面在
activity_main.xml代码
修改主题颜色, 粉色符合风格
在AppBarLayout中, 添加CollapsingToolbarLayout控件, CollapsingToolbar会滚动消失, 被ToolBar替换, 实现滚动动画.
CollapsingToolbarLayout划分两部分, 一部分大图, 一部分文字.
|
