大家都知道IOS的很多菜单都是从底部弹出的,这种展示方式还是很好看的,而丑爆的Android默认弹框一直都是大家一定要摒弃的,那么我们Android如何做出相应效果的弹框。下面我们就介绍这种做法。
- 底部弹出框布局 dialog_goods_sku_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/top_layout"
android:layout_width="match_parent"
android:layout_height="90dp"
android:elevation="1dp"
tools:ignore="UnusedAttribute">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="75dp"
android:background="@android:color/white"
android:layout_alignParentBottom="true"
android:paddingStart="120dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingBottom="5dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_total_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="¥88.88"
android:textColor="@color/colorPrimary"
android:textSize="16sp"
android:textStyle="bold"
tools:ignore="HardcodedText,TextViewEdits" />
<TextView
android:id="@+id/tv_goods_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
android:text="商品编码:888888"
tools:ignore="HardcodedText" />
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginEnd="14dp"
android:layout_marginStart="20dp"
android:layout_marginBottom="5dp"
app:cardBackgroundColor="@android:color/white"
app:cardCornerRadius="6dp"
app:cardElevation="2dp">
<ImageView
android:id="@+id/iv_goods"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/aaa"
tools:ignore="ContentDescription" />
</android.support.v7.widget.CardView>
</RelativeLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/top_layout"
android:background="@android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="14dp"
android:layout_marginStart="14dp"
android:layout_marginTop="100dp"
android:orientation="vertical">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<LinearLayout
android:id="@+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="@+id/scrollView"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_add_shopping_sku"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:alpha="0.8"
android:background="@color/colorAccent"
android:gravity="center"
android:text="加入购物车"
android:textColor="@android:color/white"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/tv_orders_sku"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="立即购买"
android:textColor="@android:color/white"
tools:ignore="HardcodedText" />
</LinearLayout>
</RelativeLayout>
- java中弹出BottomSheetDialog
private void initDialog() {
BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);
bottomSheetDialog.setContentView(R.layout.dialog_goods_sku_layout);
//给布局设置透明背景色,让图片突出来
bottomSheetDialog.getDelegate().findViewById(android.support.design.R.id.design_bottom_sheet)
.setBackgroundColor(getResources().getColor(android.R.color.transparent));
bottomSheetDialog.show();
}
其实就是简单的两步,上面是布局,下面是把布局加载到BottomSheetDialog中就好。这个需要我们引入design包即可。