ConstraintLayout
1、作为顶层布局
2、调度协调子布局
public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent2 //源码
使用场景
1 CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView
效果如下:
布局层次
<CoordinatorLayout >
<AppBarLayout >
<Toolbar />
<TabLayout />
<ViewPager />
<Fragment>
<Fragment>
主布局
<?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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/co" app:title="标题" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="30dp" android:id="@+id/tblayout" android:background="@color/colorAccent" app:tabIndicatorColor="#30e407" app:tabMode="scrollable" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/vp_tab_pager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
注意点
AppBarLayout内包含跟随滑动隐藏的子view和一个不会到顶停留的TabLayout
不变的两点:
1.滑动隐藏的加上app:layout_scrollFlags=”scroll|enterAlways”
2.滑动的控件加上layout_behavior属性
不懂layout_scrollFlags的看我这个https://blog.csdn.net/xueshao110/article/details/95076348
2 AppBarLayout嵌套CollapsingToolbarLayout
效果如下
<?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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="48dp" app:expandedTitleMarginEnd="64dp"> <ImageView android:id="@+id/backdrop" android:layout_width="wrap_content" android:layout_height="200dp" android:scaleType="centerCrop" android:fitsSystemWindows="true" android:src="@mipmap/names" app:layout_collapseMode="pin" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/co" app:title="标题" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="30dp" android:id="@+id/tblayout" android:background="@color/colorAccent" app:tabIndicatorColor="#30e407" app:tabMode="scrollable" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/vp_tab_pager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
布局和案例1基本一样
CollapsingToolbarLayout可实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。
CollapsingToolbarLayout 提供以下属性和方法是用:
1. Collapsing title:ToolBar的标题,当CollapsingToolbarLayout全屏没有折叠时,title显示的是大字体,在折叠的过程中,title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2. Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim:状态栏的背景,调用方法setStatusBarScrim(Drawable)。还没研究明白,不过这个只能在Android5.0以上系统有效果。
4. Parallax scrolling children:CollapsingToolbarLayout滑动时,子视图的视觉差,可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0],值越大视察越大。
5. CollapseMode :子视图的折叠模式,在子视图设置,有两种“pin”:固定模式,在折叠的时候最后固定在顶端;“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。
Toolbar 覆盖问题
把 CollapsingToolbarLayout 改一下:
app:titleEnabled="false"
Toolbar 状态栏浮在顶部
(Toolbar 去掉app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed")
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="160dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:layout_collapseParallaxMultiplier="0.8"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:title="电费VB环境都施工方绝对是高房价的"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@mipmap/names"
app:layout_collapseMode="pin"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:title="标题"
app:layout_collapseMode="pin"
app:titleTextColor="@color/design_default_color_primary"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:id="@+id/tblayout"
android:background="@color/colorAccent"
app:tabIndicatorColor="#30e407"
app:tabMode="scrollable"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_tab_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
|
|