先看效果图
实现这个效果主要是看布局文件:如下代码
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="org.sang.a8_3coordinatorlayout.MainActivity">
<!--
CoordinatorLayout内部整体上分为两大块:
1.AppBarLayout
2.一个滚动控件(目前支持NestedScrollView/RecyclerView)
-->
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="180dp">
<!--
CollapsingToolbarLayout 是一个可折叠控件
app:layout_scrollFlags 表示头布局的折叠策略,一共有五种取值:
1.scroll 表示当底部滑动控件开始滑动时,头部跟着滑动
2.enterAlways 表示一旦底部滑动控件向下滑动时,就露头
3.enterAlwaysCollapsed 当底部滑动控件见顶的时候,头部向下滑动
4.exitUntilCollapsed表示头部折叠到最小高度时就不再折叠(最小高度指Toolbar的高度)
5.snap 当手指松开后,头部会就近折叠
app:contentScrim="@color/colorPrimary" 设置ToolBar的颜色
app:title="test2" 设置头布局的title
-->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="180dp"
app:collapsedTitleGravity="right"
app:contentScrim="@color/colorPrimary"
app:expandedTitleGravity="right|bottom"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed|snap"
app:paddingEnd="24dp"
app:title="test2">
<!--
app:layout_collapseMode="parallax" 表示ImageView的折叠策略
app:layout_collapseParallaxMultiplier="" 表示视觉乘数,取值0~1
0表示ImageView头部折叠
1表示ImageView底部折叠
越靠近0,头部折叠越快
app:layout_collapseMode="pin" 表示折叠完成后,最终停靠在头部的控件
-->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/p9"
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:title="test"></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="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/text"/>
</android.support.v4.widget.NestedScrollView>
<!--
app:layout_anchor="" 表示FAB停靠时的参考控件
app:layout_anchorGravity="right|bottom" 表示FAB在参考控件的哪个位置
-->
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_input_add"
app:fabSize="normal"
app:layout_anchorGravity="right|bottom"
app:layout_anchor="@id/appbar_layout"/>
</android.support.design.widget.CoordinatorLayout>
代码中 注释已经写得比较清楚了,主要包括 CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar、NestedScrollView、FloatingActionButton等几个控件的嵌套和属性的设置。
记得在values的styles.xml文件中
<item name="windowActionBar">false</item>
MainActivity 中就两行代码搞定:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
ok 到此。。