如何实现Material Design底部的弹出栏

在我们做项目的时候时常会有在底部弹出分享，过滤，筛选等需求的，那么我们今天就来看一下该如何用简单的思路完成这个需求。

实现用单独的TextView去实现Item

实现用ListView统一实现Item

开发工具：

• Android Studio

开发思路：

1. 自定义Dialog的样式，使它具有Material Design的风格
2. 使用Dialog实现具体的功能

具体实现：

• 首先我们来看一下如何实现Material Design的风格

xml 这段话在styles.xml中

xml .../anim/popup_hide.xml

xml .../anim/popup_show

• 使用Dialog实现底部的弹出栏

java 实现用单独的TextView去实现Item

 View view = getLayoutInflater().inflate(R.layout.bottom_dialog, null);
    TextView tv_account = (TextView) view.findViewById(R.id.tv_account);
    TextView tv_compare = (TextView) view.findViewById(R.id.tv_compare);
    TextView tv_desktop = (TextView) view.findViewById(R.id.tv_desktop);
    TextView tv_location = (TextView) view.findViewById(R.id.tv_location);

    final Dialog mBottomSheetDialog = new Dialog(MainActivity.this, R.style.MaterialDialogSheet);
    mBottomSheetDialog.setContentView(view);
    mBottomSheetDialog.setCancelable(true);
    mBottomSheetDialog.getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    mBottomSheetDialog.getWindow().setGravity(Gravity.BOTTOM);
    mBottomSheetDialog.show();

    tv_account.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "account", Toast.LENGTH_SHORT).show();
            mBottomSheetDialog.dismiss();
        }
    });

    tv_compare.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "compare", Toast.LENGTH_SHORT).show();
            mBottomSheetDialog.dismiss();
        }
    });

    tv_desktop.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "desktop", Toast.LENGTH_SHORT).show();
            mBottomSheetDialog.dismiss();
        }
    });

    tv_location.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "location", Toast.LENGTH_SHORT).show();
            mBottomSheetDialog.dismiss();
        }
    });

java 实现用ListView统一实现Item

  final ArrayList bottom_Item = new ArrayList<>();
    bottom_Item.add("星期一");
    bottom_Item.add("星期二");
    bottom_Item.add("星期三");

    View view = getLayoutInflater().inflate(R.layout.bottom_dialog_list, null);
    ListView lv_bottom = (ListView) view.findViewById(R.id.lv_bottom);
    ArrayAdapter arrayAdapter = new ArrayAdapter(this, R.layout.bottom_dialog_list_item, bottom_Item);
    lv_bottom.setAdapter(arrayAdapter);

    final Dialog mBottomSheetDialog = new Dialog(MainActivity.this, R.style.MaterialDialogSheet);
    mBottomSheetDialog.setContentView(view);
    mBottomSheetDialog.setCancelable(true);
    mBottomSheetDialog.getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    mBottomSheetDialog.getWindow().setGravity(Gravity.BOTTOM);
    mBottomSheetDialog.show();

    lv_bottom.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView parent, View view, int position, long id) {
            Toast.makeText(MainActivity.this, bottom_Item.get(position), Toast.LENGTH_SHORT).show();
            mBottomSheetDialog.dismiss();
        }
    });

xml bottom_dialog.xml

其实我们应该明白，如何定制Dialog的显示方式都是根据bottom_dialog来调整的，如果你需要自定义Dialog的内容应该从这个地方下手