1. 程式人生 > >使用Material Design實現沉浸式狀態列+懸浮+漸變效果實現

使用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、效果圖

這裡寫圖片描述