在我们做项目的时候时常会有在底部弹出分享，过滤，筛选等需求的，那么我们今天就来看一下该如何用简单的思路完成这个需求。
实现用单独的TextView去实现Item
实现用ListView统一实现Item
开发工具：
- Android Studio
开发思路：
- 自定义Dialog的样式，使它具有Material Design的风格
- 使用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的内容应该从这个地方下手
网友评论