使用Material Design实现沉浸式状态栏+悬浮+渐变效果实现

前言

近期发现市面上很多App都采用了沉浸式状态栏效果，近期抽时间使用Material Design控件实现了一个，故记录分享

代码实现

1、添加Material Design依赖

 implementation 'com.android.support:design:27.1.1'

2、布局搭建

"1.0" encoding="utf-8"?>
.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

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

            "wrap_content"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg_bigimg"
                app:layout_collapseMode="parallax" />

            .support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:layout_collapseMode="pin"
                app:navigationIcon="@mipmap/ic_action_add">

            .support.v7.widget.Toolbar>
        .support.design.widget.CollapsingToolbarLayout>
    .support.design.widget.AppBarLayout>

    .support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        .support.v7.widget.RecyclerView
            android:id="@+id/toolbar__recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    .support.v4.widget.NestedScrollView>
.support.design.widget.CoordinatorLayout>

3、布局属性介绍

contentScrim：指定状态栏收缩后的颜色

layout_scrollFlags有四个flag可以设置如下：
1、scroll：CollapsingToolbarLayout会随着view滚动出屏幕
2、 enterAlways：向下滑动CollapsingToolbarLayout可见
3、 enterAlwaysCollapsed：向下滑动CollapsingToolbarLayout到指定高度后显示
4、exitUntilCollapsed：向上滑动到指定高度后CollapsingToolbarLayout不显示

layout_collapseMode模式有三种
1、parallax：视差效果
2、pin：toolBar固定在顶部
3、none：没有效果

layout_behavior设置该属性可以保证NestedScrollView与AppBarLayout嵌套使用，否则NestedScrollView会全屏显示，遮盖AppBarLayout
app:layout_behavior=”@string/appbar_scrolling_view_behavior”

4、Activity代码

package net.gepergee.usualtestproject.toolBar;

import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Window;
import android.view.WindowManager;
import net.gepergee.usualtestproject.R;
import net.gepergee.usualtestproject.activity.multiColumnList.adapter.FirstLineAdapter;
import java.util.ArrayList;
import java.util.List;

/**
 * ToolBar实践
 *
 * @author petergee
 * @date 2018/8/1
 */
public class ToolBarActivity extends Activity {

    private List mList;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tool_bar);
        initData();
        initView();
    }

    private void initData() {
        mList = new ArrayList<>();
        for (int i = 0; i < 50; i++) {
            mList.add("条目" + String.valueOf(i));
        }
    }

    private void initView() {
        // translucent statusBar
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        RecyclerView toolBarRecycleView = findViewById(R.id.toolbar__recycler_view);
        // layoutManager
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        toolBarRecycleView.setLayoutManager(layoutManager);
        // item divider
        DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);
        dividerItemDecoration.setDrawable(getResources().getDrawable(R.drawable.divider_line));
        // adapter
        toolBarRecycleView.addItemDecoration(dividerItemDecoration);
        toolBarRecycleView.setAdapter(new FirstLineAdapter(this, mList));
    }
}

5、效果图