使用Material Design實現沉浸式狀態列+懸浮+漸變效果實現
阿新 • • 發佈:2019-02-04
前言
近期發現市面上很多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));
}
}