android开发:CoordinatorLayout配合AppBarLayout实现炫酷悬停标题栏

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_39027256/article/details/102689684

首先介绍上述几个控件在使用的时候的注意点:

CoordinatorLayout:

是一个类似FrameLayout的布局,它是根布局

AppBarLayout:

是一个vertical的LinearLayout,他必须严格地是CoordinatorLayout的直接View,不然他一点作用都发挥不出来。

CollapsingToolbarLayout:

它是AppBarLayout下的子控件,CollapsingToolbarLayout可以看成一个可折叠的toolbar,里面包含一个imageView和一个toolbar当它缩到最小的时候就是一个普通的toolbar,它可以实现:随着滑动,图片逐渐缩小最后只剩下toolbar。必须在CollapsingToolbarLayout设置layout_scrollFlags属性才可以跟随其他view缩放,至于它的属性后面介绍。

它内部的子View一般都要加上属性:app:layout_collapseMode="",常用的是parallax,pin。parallax是视差滚动,用在imageView, pin是固定,用在toolbar。

内容控件:

我们需要和AppBarLayout同一级下添加一个内容控件,并添加

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

他们的层次关系如下图(图是网上扣来的)

先看下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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.ganshenml.slideholdsmoothdemo.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#30469b"
            app:expandedTitleMarginStart="0dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"  />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:background="@color/cardview_dark_background"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"

                />


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

    </android.support.design.widget.AppBarLayout>
<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</ScrollView>
    <include layout="@layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>

Activity代码: 

在activity添加如下代码:

  //获取Toolbar
        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        //使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上,设置到Toolbar上则不会显示
        CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
        mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");
        //通过CollapsingToolbarLayout修改字体颜色
        mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色
        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);//设置收缩后Toolbar上字体的颜色

运行效果:

首先我们再java代码里获取了CollapsingToolbarLayout,并设置了它的标题,设置未收缩的字体颜色和收缩时的颜色,它的标题初始化的时候是在CollapsingToolbarLayout的底部。

我们在CollapsingToolbarLayout中设置

layout_scrollFlags="scroll|exitUntilCollapsed"

scroll:想滚动就必须设置

exitUntilCollapsed:代表CollapsingToolbarLayout随滚动缩放到最小高度然后悬停在顶部,然后我们往下拉的时候图片慢慢的出现

xml中有个Toolbar,上图灰色的条目,我们设置

app:layout_collapseMode="pin" 它代表着不会随内容移动

整个过程就是CollapsingToolbarLayout随着内容滚动逐渐缩小,标题也逐渐缩小并且往上移直到和Toolbar重合然后就悬停。

当我们修改layout_scrollFlags为:

app:layout_scrollFlags="scroll|enterAlways">

再次运行得到的效果:

enterAlways:代表着CollapsingToolbarLayout慢慢收缩直到最小高度(这个过程Toolbar是不动的,因为我们设置了app:layout_collapseMode="pin")最后和Toolbar重合之后整个界面连带Toolbar往屏幕外移,同时我们再往下滑的时候CollapsingToolbarLayout瞬间出现。

而上面Toolbar设置成灰色是为了解释的更清楚,当我们把Toolbar设置为透明后,运行效果:

那如果我们想做到像一些商城软件那样,在图片之下有个搜索框,一滑上去搜索框跟随滑动到达顶部,效果如下:

做到这种效果可以在AppBarLayout里面,CollapsingToolbarLayout的外面添加我们的view

最后讲一下layout_scrollFlags的几个属性值大概意思:

scroll:如果单单设置它,当我下拉的时候默认优先滚动Scrolling View,直到Scrolling View到达顶部再滚动CollapsingToolbarLayout,效果:

scroll|enterAlways:当我下拉的时候默认优先滚动CollapsingToolbarLayout,再滚动Scrolling View,效果:

scroll|enterAlways|enterAlwaysCollapsed:enterAlwaysCollapsed是enterAlways的一个附加值,当我下拉的时候默认优先滚动CollapsingToolbarLayout到它最小高度,再滚动Scrolling View,最后再完全滚动CollapsingToolbarLayout,效果:

scroll|snap:有弹性的收缩,有个临界点,不超过则回弹,超过直接向上弹效果:

其他属性:

contentScrim:代表CollapsingToolbarLayou缩到最小后的背景颜色
expandedTitleMarginStart:CollapsingToolbarLayou还没开始收缩时距离左边的距离,上面我们设置未0,所以文字在最左边。

写的可能比较乱,我看的时候也是一脸懵逼,必须要自己写代码运行总结才行,以下是别的参考:

csdn:https://blog.csdn.net/baidu_31093133/article/details/52807465

简书:https://www.jianshu.com/p/1f3974408528

github地址:https://github.com/David-lvfujiang/SlideHoldSmoothDemo.git

猜你喜欢

转载自blog.csdn.net/qq_39027256/article/details/102689684
今日推荐