CoodinatorLayout 实现 banner沉浸式+滚动视差+悬浮搜索框+标题置顶复杂联动效果

其他 2019-06-14 08:41:06 阅读次数: 0

1.开门见上，先上效果图

13299289-0c6804101889ff70.png
image.png 
                                    代码传送门

2.CoodinatorLayout及相关控件简介
CoordinatorLayout遵循Material Design风格，包含在 support Library中，结合AppBarLayout, CollapsingToolbarLayout,NestScrollView等 可 产生各种炫酷的折叠悬浮效果。作为一个容器可与一个或多个子View进行交互。

  AppBarLayout继承自LinearLayout，布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。

   CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。CollapsingToolbarLayout主要属性：

   (1) layout_scrollFlags：

scroll - 想滚动就必须设置这个。

enterAlways - 实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。

exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar一直在上面。

enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

    (2) layout_collapseMode (折叠模式) - 有两个值:

pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

    (3) layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。

    Toolbar主要是用来替换ActionBar的，换句话说，ActionBar能做的，Toolbar都能做。如果你对ActionBar的使用比较熟悉，你会发现Toolbar使用起来非常简单。ok，既然是替换，当然用Toolbar的时候就得先去把ActionBar给隐藏掉。隐藏掉ActionBar方法有多种，我是直接在application的主题里面设置成<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar”>

    NestedScrollView是support-v4包提供的控件,继承至FrameLayout, 并实现了NestedScrollingParent,NestedScrollingChild, ScrollingView接口。它的作用类似于android.widget.ScrollView,不同点在于NestedScrollView支持嵌套滑动，常用于内部嵌套RecyclerView一起使用。

3.布局文件实现
先看看布局视图的结构，如下图：

接下看布局代码的实现：

<?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/cl_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_barlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentScrim="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <com.youth.banner.Banner
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            android:fitsSystemWindows="true"
            app:image_scale_type="fit_xy"
            app:layout_collapseMode="parallax"
            android:background="@drawable/banner_default"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="65dp"
            app:contentInsetStart="0dp"
            app:layout_collapseMode="pin">

            <RelativeLayout
                android:id="@+id/rl_title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingTop="25dp">

                <ImageView
                    android:id="@+id/iv_left_btn"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_centerVertical="true"
                    android:layout_marginStart="7dp"
                    android:background="@drawable/shap_left_btn_bg"
                    android:paddingBottom="9dp"
                    android:paddingEnd="5dp"
                    android:paddingStart="5dp"
                    android:paddingTop="9dp"
                    android:src="@drawable/left_hot_btn" />

                <LinearLayout
                    android:id="@+id/ll_search"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:layout_marginBottom="7dp"
                    android:layout_marginEnd="15dp"
                    android:layout_marginStart="15dp"
                    android:layout_marginTop="7dp"
                    android:layout_toEndOf="@+id/iv_left_btn"
                    android:layout_toStartOf="@+id/iv_search_btn"
                    android:background="@drawable/search_bg_shap_home"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:visibility="visible">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="5dp"
                        android:layout_marginStart="3dp"
                        android:paddingBottom="7dp"
                        android:paddingTop="7dp"
                        android:src="@drawable/search_gray" />

                    <TextView
                        android:id="@+id/tv_search_hint"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="8dp"
                        android:background="@null"
                        android:drawablePadding="4dp"
                        android:lines="1"
                        android:singleLine="true"
                        android:textColor="#999999"
                        android:textSize="14sp" />

                </LinearLayout>

                <ImageView
                    android:id="@+id/iv_search_btn"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="7dp"
                    android:background="@drawable/shap_left_btn_bg"
                    android:paddingBottom="6dp"
                    android:paddingEnd="5dp"
                    android:paddingStart="5dp"
                    android:paddingTop="6dp"
                    android:src="@drawable/icon_search_white" />

            </RelativeLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>

    <com.flyco.tablayout.SlidingTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/white"
        app:tl_indicator_color="@android:color/holo_red_light"
        app:tl_indicator_corner_radius="30dp"
        app:tl_indicator_height="3dp"
        app:tl_indicator_width_equal_title="true"
        app:tl_tab_padding="25dp"
        app:tl_tab_space_equal="true"
        app:tl_textBold="SELECT"
        app:tl_textSelectColor="@android:color/holo_red_light"
        app:tl_textUnselectColor="@android:color/black"
        app:tl_textsize="17sp" />

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

<!-- 若ViewPager中的Fragment用到了实现了NestedScrollingChild接口的控件，则ViewPager外部不需要套一层NestScrollView,反之，则需要嵌套一层NestScrollView -->
<!--<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"
    android:fillViewport="true"
    android:focusableInTouchMode="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">-->

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

<!--</android.support.v4.widget.NestedScrollView>-->

</android.support.design.widget.CoordinatorLayout>
布局中有几个点需要注意下

CollapsingToolbarLayout要设置app:layout_scrollFlags="scroll|exitUntilCollapsed”，scroll是让CollapsingToolbarLayout可折叠，exitUntilCollapsed是向上滚动时收缩view，但可以将Toolbar一直固定在顶部

Toolbar一直固定在顶部需要给Toolbar加上app:layout_collapseMode=“pin”属性

当折叠的时候让banner出现滚动视差需要设置app:layout_collapseMode="parallax"

我们这里用到了NestedScrollView嵌套ViewPager(为了保证CollapsingToolbarLayout能够折叠，ViewPager中的Fragment用到了实现了NestedScrollingChild接口的控件，则ViewPager外部不需要套一层NestScrollView,反之，则需要嵌套一层NestScrollView)，这里需要注意，不管是NestedScrollView嵌套ViewPager还是嵌套RecyclerView，都需要设置android:fillViewport=“true”，否则会出现内容不显示或者内容显示不全

接下来看MainActivity中的代码：

package com.example.jokerwan.coolcoodinatorlayout;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.flyco.tablayout.SlidingTabLayout;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

@BindView(R.id.iv_left_btn)
ImageView ivLeftHotBtn;
@BindView(R.id.ll_search)
LinearLayout llSearch;
@BindView(R.id.iv_search_btn)
ImageView ivSearchBtn;
@BindView(R.id.rl_title)
RelativeLayout rlTitle;
@BindView(R.id.tab_layout)
SlidingTabLayout tabLayout;
@BindView(R.id.app_barlayout)
AppBarLayout appBarlayout;
@BindView(R.id.viewpager)
ViewPager viewpager;

private ArrayList<Fragment> fragments;
private HomeFragment homeFragment1;
private HomeFragment homeFragment2;
private String[] titles = new String[]{"恐怖电影", "喜剧专场"};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);

    Utils.setStatusBarTransparent(this);

    viewpager.clearDisappearingChildren();

    fragments = new ArrayList<>();
    List<Fragment> fragments1 = getSupportFragmentManager().getFragments();
    if (fragments1 != null && fragments1.size() > 1) {
        homeFragment1 = (HomeFragment) fragments1.get(0);
        homeFragment2 = (HomeFragment) fragments1.get(1);
    } else {
        homeFragment1 = new HomeFragment();
        homeFragment2 = new HomeFragment();
    }

    fragments.add(homeFragment1);
    fragments.add(homeFragment2);

    tabLayout.setViewPager(viewpager, titles,this,fragments);


    appBarlayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (verticalOffset == 0) {
                rlTitle.setBackgroundColor(Color.argb(0, 221, 48, 10));
                ivLeftHotBtn.setBackground(getResources().getDrawable(R.drawable.shap_left_btn_bg));
                ivSearchBtn.setVisibility(View.VISIBLE);
                ivSearchBtn.setBackground(getResources().getDrawable(R.drawable.shap_left_btn_bg));
                llSearch.setVisibility(View.GONE);
            } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
                rlTitle.setBackgroundColor(Color.argb(255, 221, 48, 10));
                ivLeftHotBtn.setBackground(null);
                llSearch.setVisibility(View.VISIBLE);
                ivSearchBtn.setBackground(null);
            } else {
                int alpha = (int) (255 - verticalOffset / (float) appBarLayout.getTotalScrollRange() * 255);
                rlTitle.setBackgroundColor(Color.argb(alpha, 221, 48, 10));
                llSearch.setVisibility(View.GONE);
                ivSearchBtn.setVisibility(View.VISIBLE);
            }
        }
    });
}

}
关于滑动改变搜索框的透明度和按钮的变化，起初我想的是通过监听CollapsingToolbarLayout的收缩来做，结果发现CollapsingToolbarLayout并没有提供监听收缩的方法，尴尬了，后来发现AppBarLayout有一个偏移量监听的方法addOnOffsetChangedListener()，符合我们的需求。对了，差点儿忘了banner沉浸式，在MainActivity中可以看到我将浸式状态栏的代码封装到Utils中，代码给大家贴出来。

public static void setStatusBarTransparent(Activity activity){

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

        Window window = activity.getWindow();

        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

        window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);

        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

        window.setStatusBarColor(Color.TRANSPARENT);

    } else {

        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

    }

}

好了，大功告成。

转载于:https://www.jianshu.com/p/1672933d3758

猜你喜欢

转载自blog.csdn.net/weixin_33810006/article/details/91292633
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022