Material Design之BottomSheetDialog

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Common_it/article/details/80407156

底部动作条(BottomSheetDialog)是一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。底部动作条简单、清晰。特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代。

效果

---

普通弹出

    public void common(View view) {
        View viewContent = LayoutInflater.from(this).inflate(R.layout.item_bttom_dialog, null);
        TextView tv_item_cancle = viewContent.findViewById(R.id.tv_item_cancle);
        //实例化BottomSheetDialog
        final BottomSheetDialog mBottomSheetDialog = new BottomSheetDialog(this, R.style.dialog);
        //点击遮罩不消失
        mBottomSheetDialog.setCanceledOnTouchOutside(false);
        //设置弹出的界面
        mBottomSheetDialog.setContentView(viewContent);
        //弹出
        mBottomSheetDialog.show();
        //取消
        tv_item_cancle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mBottomSheetDialog.dismiss();
                Toast.makeText(BottomSheetActivity.this, "取消", Toast.LENGTH_SHORT).show();
            }
        });
    }

样式

    <style name="dialog" parent="@style/Theme.AppCompat.Dialog">
        <item name="android:windowFrame">@null</item><!--边框-->
        <item name="android:windowIsFloating">true</item><!--是否浮现在activity之上-->
        <item name="android:windowIsTranslucent">false</item><!--半透明-->
        <item name="android:windowNoTitle">true</item><!--无标题-->
        <item name="android:windowBackground">@color/transparent</item><!--背景透明-->
        <item name="android:backgroundDimEnabled">true</item><!--模糊-->
        <item name="android:windowAnimationStyle">@style/Animation.Design.BottomSheetDialog</item><!--弹出动画-->
    </style>

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:paddingBottom="10dp"
    android:background="@null"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="相册"
            android:textColor="#333333"
            android:textSize="16sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#d7d7d7" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="拍照"
            android:textColor="#333333"
            android:textSize="16sp" />
    </LinearLayout>

    <TextView
        android:id="@+id/tv_item_cancle"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="取消"
        android:background="@drawable/background"
        android:textColor="#333333"
        android:textSize="16sp" />
</LinearLayout>

---

列表弹出

    public void list(View view) {
        View viewContent = LayoutInflater.from(this).inflate(R.layout.item_bottom_list, null);
        RecyclerView rv_item_bottomlist = viewContent.findViewById(R.id.rv_item_bottomlist);
        //实例化适配器
        BottomSheetAdapter mBottomSheetAdapter = new BottomSheetAdapter(this, mData);
        //设置LayoutManager
        rv_item_bottomlist.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        //设置适配器
        rv_item_bottomlist.setAdapter(mBottomSheetAdapter);
        //实例化BottomSheetDialog
        BottomSheetDialog mBottomSheetDialog = new BottomSheetDialog(this);
        //设置弹出的界面
        mBottomSheetDialog.setContentView(viewContent);
        //弹出
        mBottomSheetDialog.show();
    }

适配器

public class BottomSheetAdapter extends RecyclerView.Adapter<BottomSheetAdapter.ViewHolder> {
    private List<String> mData;
    private LayoutInflater mLayoutInflater;

    public BottomSheetAdapter(Context mContext, List<String> mData) {
        this.mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        this.mData = mData;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(mLayoutInflater.inflate(R.layout.item_show_bottomlist, parent, false));
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.tv_bottom_list_show.setText(mData.get(position));
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        private TextView tv_bottom_list_show ;
        public ViewHolder(View itemView) {
            super(itemView);
            tv_bottom_list_show=itemView.findViewById(R.id.tv_bottom_list_show);
        }
    }
}

XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_item_bottomlist"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

适配器XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_bottom_list_show"
        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:textColor="#333333"
        android:textSize="15sp" />

</LinearLayout>