android material design之BottomSheet（六）

我的項目源碼托管位址：點選打開我的項目源碼位址

這個控件在手機迅雷中用的挺多的，而且用的地方和位置也很合适，樓主在這裡簡單寫了一下，可以當做一個dialog用，但是又比dialog好用，至于為什麼好用大家看到xml後應該會感覺出來的，

上代碼

activity

package com.fanyafeng.materialdesign.activity;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.NestedScrollView;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import com.fanyafeng.materialdesign.BaseActivity;
import com.fanyafeng.materialdesign.R;

public class BottomSheetActivity extends BaseActivity {
    private NestedScrollView nestedBottom;
    private BottomSheetBehavior bottomSheetBehavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_sheet);

        title = "測試bottom sheet";

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        initView();
        initData();
    }

    private void initView() {
        nestedBottom = (NestedScrollView) findViewById(R.id.nestedBottom);
    }

    private void initData() {

        initNest(nestedBottom);
    }

    private void initNest(final View view) {
        bottomSheetBehavior = BottomSheetBehavior.from(view);
        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                if (newState == BottomSheetBehavior.STATE_COLLAPSED || newState == BottomSheetBehavior.STATE_HIDDEN) {
                    view.setVisibility(View.GONE);
                }
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                view.setVisibility(View.VISIBLE);
                ViewCompat.setAlpha(view, slideOffset);
            }
        });
    }

    @Override
    public void onClick(View v) {
        super.onClick(v);
        switch (v.getId()) {
            case R.id.btnBottomPop:
                if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                } else {
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                }
                break;
        }
    }
}
           

來看xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.fanyafeng.materialdesign.activity.BottomSheetActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_bottom_sheet" />
    <!--父控件必須是CoordinatorLayout-->
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nestedBottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="?attr/actionBarSize"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:padding="80dp"
                android:text="人不會死在絕境，卻往往栽在十字路口"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:padding="80dp"
                android:text="人不會死在絕境，卻往往栽在十字路口"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:padding="80dp"
                android:text="人不會死在絕境，卻往往栽在十字路口"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:padding="80dp"
                android:text="人不會死在絕境，卻往往栽在十字路口"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:padding="80dp"
                android:text="人不會死在絕境，卻往往栽在十字路口"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:padding="80dp"
                android:text="人不會死在絕境，卻往往栽在十字路口"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:padding="80dp"
                android:text="人不會死在絕境，卻往往栽在十字路口"
                android:textColor="@android:color/white" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    <pre name="code" class="html">app:layout_behavior="@string/appbar_scrolling_view_behavior"
           

tools:context="com.fanyafeng.materialdesign.activity.BottomSheetActivity" tools:showIn="@layout/activity_bottom_sheet"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:id="@+id/btnBottomPop" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="onClick" android:text="彈出" android:textColor="?attr/colorPrimaryDark" android:textSize="@dimen/activity_horizontal_margin" /> </LinearLayout></android.support.v4.widget.NestedScrollView>

其中的layout_behavior很重要

app:layout_behavior="@string/appbar_scrolling_view_behavior"