如何使用Material Design中的BottomSheetBehavior、BottomSheetDialog和BottomSheetDialogFragment

bottom sheet是design包下支持的一个控件，它从页面底部弹出，效果如下：

有两种方式可以实现bottom sheet，第一种是使用BottomSheetBehavior，第二种是使用BottomSheetDialogFragment。因为他们都存在与design支持包中，所以必须要先导入design支持包，支持包最低版本是23.2，我导入的是24.1.0：

compile 'com.android.support:design:24.1.0'

之后同步项目会下载这个支持包。

①使用BottomSheetBehavior实现的布局文件如下：

#bottom_sheet_layout.xml




    

        

            

            

            
        
    

    
        
            
            
            
        

    

②使用 BottomSheetDialogFragment实现的布局文件以及Java文件如下：

#fragment_bottom_sheet.xml




    


        


        
    


    

Fragment文件：

#TestBottomSheetDialogFragment.java
package com.study.hq.androidnewcomponents.bottom_sheets;


import android.app.Dialog;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.BottomSheetDialogFragment;
import android.support.design.widget.CoordinatorLayout;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;


import com.study.hq.androidnewcomponents.R;


/**
 * Created by HeQing on 2016/9/19 0019.
 */
public class TestBottomSheetDialogFragment extends BottomSheetDialogFragment {


    private BottomSheetBehavior.BottomSheetCallback callback =
            new BottomSheetBehavior.BottomSheetCallback() {
                @Override
                public void onStateChanged(@NonNull View bottomSheet, int newState) {
                    if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                        dismiss();
                    }
                }


                @Override
                public void onSlide(@NonNull View bottomSheet, float slideOffset) {


                }
            };


    @Override
    public void setupDialog(Dialog dialog, int style) {
        super.setupDialog(dialog, style);
        View contentView = View.inflate(getContext(), R.layout.fragment_bottom_sheet, null);


        dialog.setContentView(contentView);


        ListView listView = (ListView)contentView.findViewById(R.id.list_view);
        String[] strArray = new String[5];
        for (int i = 0;i < strArray.length;i++){
            strArray[i] = "第"+(i+1)+"项";
        }
        listView.setAdapter(new ArrayAdapter(getContext()
                ,android.R.layout.simple_list_item_1,android.R.id.text1,strArray));


        CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams)
                ((View) contentView.getParent()).getLayoutParams();
        CoordinatorLayout.Behavior behavior = params.getBehavior();


        if (behavior != null && behavior instanceof BottomSheetBehavior) {
            ((BottomSheetBehavior) behavior).setBottomSheetCallback(callback);
        }


    }
}

最后创建一个activity文件来使用这两种方式：

#BottomSheetActivity.java
package com.study.hq.androidnewcomponents.bottom_sheets;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.BottomSheetDialogFragment;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.widget.Button;

import com.study.hq.androidnewcomponents.R;

/**
 * Created by HeQing on 2016/9/19 0019.
 */
public class BottomSheetActivity extends FragmentActivity implements View.OnClickListener{

    private BottomSheetBehavior mBottomSheetBehavior;

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

        View bottomSheet = findViewById(R.id.bottom_sheet);
        Button button1 = (Button) findViewById( R.id.button_1 );
        Button button2 = (Button) findViewById( R.id.button_2 );
        Button button3 = (Button) findViewById( R.id.button_3 );

        button1.setOnClickListener(this);
        button2.setOnClickListener(this);
        button3.setOnClickListener(this);

        mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
        mBottomSheetBehavior.setPeekHeight(120);

        mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                    mBottomSheetBehavior.setPeekHeight(120);
                }
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                mBottomSheetBehavior.setPeekHeight((int)slideOffset);
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch( v.getId() ) {
            case R.id.button_1: {
                mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                break;
            }
            case R.id.button_2: {
                mBottomSheetBehavior.setPeekHeight(120);
                mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                break;
            }
            case R.id.button_3: {
                BottomSheetDialogFragment bottomSheetDialogFragment = new TestBottomSheetDialogFragment();
                bottomSheetDialogFragment.show(getSupportFragmentManager(), bottomSheetDialogFragment.getTag());
                break;
            }
        }
    }
}

以上便是全部代码，比较简单，可以自己试一试。