CoordinatorLayout是Android Design Support Library中提供的控件
效果图:
代码:
ScrollingActivity中
package com.jremm.rolechina.coo;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ImageView;
import com.jremm.rolechina.R;
public class ScrollingActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.coo_layout);
Toolbar toolbar = (Toolbar) this.findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// 设置标题
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("哆啦A梦");
}
}
coo_layout.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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:collapsedTitleGravity="left"
app:expandedTitleGravity="left|bottom"
app:collapsedTitleTextAppearance="@style/zwenzi"
app:expandedTitleTextAppearance="@style/zkwenzi"
>
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/mao"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--滑动控件-->
<include layout="@layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>
引用布局content_scrolling.xml中
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.jremm.rolechina.coo.ScrollingActivity"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/tu4"
android:scaleType="fitXY"
/>
</android.support.v4.widget.NestedScrollView>
对布局文件中控件解析:
1 CoordinatorLayout 作为根布局
2 layout_scrollFlags 设置展开时的最大高度
3 CollapsingToolbarLayout 的主要属性:
app:layout_scrollFlags=”scroll|exitUntilCollapsed”
设置为折叠效果
app:layout_scrollFlags=”scroll|enterAlways”
设置为隐藏效果
app:collapsedTitleGravity=”left”
表示当头部的衬图ImageView消失后,此title将回归到Toolbar的位置,默认是left。
app:expandedTitleGravity=”left|bottom”
表示将此CollapsingToolbarLayout完全展开后,title所处的位置,默认是left+ bottom
app:collapsedTitleTextAppearance=”@style/TextAppearance.CollapsedTitle”
指定折叠状态标题文字的样式(自己在style中设置)
app:expandedTitleTextAppearance=”@style/TextAppearance.ExpandedTitle”
指定展开状态标题文字的样式(自己在style中设置)
4 Toolbar 主要属性
app:layout_collapseMode=”pin”(子布局设置折叠模式)
有两种“pin”:固定模式,在折叠的时候最后固定在顶端;
5 NestedScrollView 滑动控件
相当于RecyclerView或ScrollView(ScrollView和上面控件不配套,不 能实现折叠效果)
必须添加app:layout_behavior=”@string/appbar_scrolling_view_behavior这个属性
当然在AppBarLayout 中的子view需要设置app:layout_scrollFlags这个属性
源码下载:
https://download.youkuaiyun.com/download/zhaihaohao1/10604796
参考文章:
https://blog.youkuaiyun.com/u012124438/article/details/56701641
http://liuwangshu.cn/application/md/3-coordinatorlayout.html
https://blog.youkuaiyun.com/xiaoshitounan/article/details/72528347
https://blog.youkuaiyun.com/gdutxiaoxu/article/details/52858598