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

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

实现用单独的TextView去实现Item 实现用ListView统一实现Item

开发工具：

• Android Studio

开发思路：

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

具体实现：

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

xml 这段话在styles.xml中

 <style name="MaterialDialogSheet" parent="@android:style/Theme.Dialog">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:windowAnimationStyle">@style/MaterialDialogSheetAnimation</item>
</style>

<style name="MaterialDialogSheetAnimation">
    <item name="android:windowEnterAnimation">@anim/popup_show</item>
    <item name="android:windowExitAnimation">@anim/popup_hide</item>
</style>

xml .../anim/popup_hide.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:fromYDelta="0"
    android:toYDelta="100%p"
    android:duration="300"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>

xml .../anim/popup_show

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:fromYDelta="100%p"
    android:toYDelta="0"
    android:duration="300"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>

• 使用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<String> 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<String> arrayAdapter = new ArrayAdapter<String>(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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/popup_window"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:background="@android:color/white"
android:padding="10dp"
android:orientation="vertical">

<TextView
    android:id="@+id/tv_account"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_account_circle_black_24dp"
    android:drawablePadding="15dp"
    android:gravity="center_vertical"
    android:padding="15dp"
    android:text="account"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/tv_compare"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_compare_arrows_black_24dp"
    android:drawablePadding="15dp"
    android:gravity="center_vertical"
    android:padding="15dp"
    android:text="compare"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/tv_desktop"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_desktop_mac_black_24dp"
    android:drawablePadding="15dp"
    android:gravity="center_vertical"
    android:padding="15dp"
    android:text="desktop"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/tv_location"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_place_black_24dp"
    android:drawablePadding="15dp"
    android:gravity="center_vertical"
    android:padding="15dp"
    android:text="location"
    android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

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