使用Material Design實現沉浸式狀態欄+懸浮+漸變效果實現

前言

近期發現市面上很多App都採用了沉浸式狀態欄效果，近期抽時間使用Material Design控件實現了一個，故記錄分享

代碼實現

1、添加Material Design依賴

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

2、佈局搭建

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

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

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

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

            <android.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">

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

    <android.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">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/toolbar__recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v4.widget.NestedScrollView>
</android.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<String> 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、效果圖