学习谷歌CoordinatorLayout+ViewPager+Fragment+Toolbar带来的骚操作。

1.CoordinatorLayout上一篇我们也见证了其强大:
https://blog.csdn.net/m0_37667770/article/details/79888692这篇我们来看看最常见的效果:目前比较算得上比较流行中的设计栏目:图片如下:我们清除CoordinatorLayout可以通过监听所包裹的滑动控件例如(ViewPager,或者NestedScrollView或者RecyclerView)再通过AppBarLayout标记手势滑动行为来让其他控件进行不同样式的滑动效果。
这里写图片描述

如下:CollapsingToolbarLayout来实现Toolbar折叠:
这里写图片描述
2.代码如下:
1.activity_main3.xmll代码如下:

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 这里AppBarLayout来包裹滑动之后要执行效果的布局文件。-->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
          <!-- 这里Toolbar我想让其滑动行为受到滑动控件的约束。所以用 app:layout_scrollFlags="scroll|enterAlways"-->
        <android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll|enterAlways"
             android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@drawable/shape_gradient"
            app:title="Android高级"
            >
        </android.support.v7.widget.Toolbar>
          <!-- 这里我想让头布局ImageView也随着滑动控件的滑动而来执行滑动行为所以用app:layout_scrollFlags ,关于scroll和enterAlways的解释自己可以看看api里面解释。滑动和快速反馈之类的....-->
        <ImageView
            app:layout_scrollFlags="scroll|enterAlways"
            android:background="@drawable/nbc"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="fill_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabBackground="@drawable/tabbg"
            app:tabMaxWidth="80dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@color/colorAccent" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</android.support.design.widget.CoordinatorLayout>

2.关于ViewPager里面的滑动控件当然RecylerView和Net……这些兼容控件了。listView和ScrollView或Hor…ScrollView之类的不行哦!我测试过了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res-auto">
   <!--当然这里我们可以用RecyclerView或者NestedScrollView-->
   <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:scaleType="fitXY"
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:src="@drawable/ic_launcher_background" />

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</LinearLayout>

3.就这么简单实现了这效果:
代码地址如下:记得是Main3Activity.java才是这个章节的。
https://github.com/luhenchang/Lsn16_MaterialDesign_fab_animation_Behavior.git
实现折叠地址如下:
https://github.com/luhenchang/Lsn18_MaterialDesign_AppbarLayout_CollapsingToolbarLayout.git

猜你喜欢

转载自blog.csdn.net/m0_37667770/article/details/79900125