继承BottomSheetDialog实现选择规格的底部弹窗

先上效果图

img

实现思路

利用BottomSheetDialog底部弹出，且可方便实现背景透明的效果，

设置需要传入商品id进行查询，以及已经选中的规格下标

对可能进行的操作进行方法回调

使用了ButterKnife进行视图和方法绑定

使用了LoadSir进行视图替换

代码

ProductCategoryDialog.class

public class ProductCategoryDialog extends BottomSheetDialog {

@BindView(R.id.iv_close)

ImageView ivClose;

@BindView(R.id.riv_image)

RoundedImageView rivImage;

@BindView(R.id.tv_remainingAmount)

TextView tvRemainingAmount;

@BindView(R.id.tv_specification)

TextView tvSpecification;

@BindView(R.id.rv_type)

RecyclerView rvType;

@BindView(R.id.tv_buyNumTitle)

TextView tvBuyNumTitle;

@BindView(R.id.iv_reduce)

ImageView ivReduce;

@BindView(R.id.tv_buyNum)

TextView tvBuyNum;

@BindView(R.id.iv_add)

ImageView ivAdd;

@BindView(R.id.ll_num)

LinearLayout llNum;

@BindView(R.id.mb_addCar)

MaterialButton mbAddCar;

@BindView(R.id.content)

ConstraintLayout content;

@BindView(R.id.textView30)

TextView textView30;

@BindView(R.id.tv_product_name)

TextView tvProductName;

@BindView(R.id.tv_productPrice)

TextView tvProductPrice;

@BindView(R.id.textView32)

TextView textView32;

private Unbinder unbinder;

private ProductCategoryBean categoryBean;

private ProductCategoryAdapter categoryAdapter;

private GoodsModel model;

private OperateListener operateListener;

private int stock = 0;

private int buyNum = 1;

private int productId;

protected LoadService mLoadService;

private LifecycleTransformer lifecycleTransformer;

private Activity activity;

private int selectIndex;

public ProductCategoryDialog(@NonNull Activity context, LifecycleTransformer lifecycleTransformer, int productId,int selectIndex) {

super(context);

this.activity = context;

this.lifecycleTransformer = lifecycleTransformer;

this.productId = productId;

this.selectIndex = selectIndex;

model = new GoodsModel();

View view = View.inflate(context, R.layout.dialog_product_category, null);

setContentView(view);

unbinder = ButterKnife.bind(this, view);

//xml配置透明无效，要获取sheet控件，直接背景设置透明

findViewById(R.id.design_bottom_sheet).setBackgroundColor(Color.TRANSPARENT);

//contentView是自定义的显示在BottomSheetDialog上的view

view.post(() -> {

//R.id.design_bottom_sheet基本是固定的,不用担心后面API的更改

BottomSheetBehavior behavior = BottomSheetBehavior.from(findViewById(R.id.design_bottom_sheet));

//此处设置表示禁止BottomSheetBehavior的执行

behavior.setHideable(false);

});

this.setCanceledOnTouchOutside(true);

//setLoadSir(content);

getCategory(productId);

}

public MaterialButton getMbAddCar() {

return mbAddCar;

}

public void setMbAddCar(MaterialButton mbAddCar) {

this.mbAddCar = mbAddCar;

}

private void initView() {

if (rvType != null) {

initRecyclerView();

}

if (categoryBean.getGoodsSpecsList().size() != 0 && categoryAdapter != null) {

categoryAdapter.setList(categoryBean.getGoodsSpecsList());

categoryAdapter.setSelectPosition(selectIndex);

categoryAdapter.notifyDataSetChanged();

seData(categoryBean.getGoodsSpecsList().get(0));

}

}

private void initRecyclerView() {

LinearLayoutManager manager = new LinearLayoutManager(getContext());

manager.setOrientation(RecyclerView.HORIZONTAL);

rvType.setLayoutManager(manager);

rvType.setAdapter(categoryAdapter = new ProductCategoryAdapter(R.layout.classify_item_top_tab));

categoryAdapter.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(BaseQuickAdapter adapter, View view, int position) {

ProductSpecsBean specsBean = (ProductSpecsBean) adapter.getData().get(position);

categoryAdapter.setSelectPosition(position);

categoryAdapter.notifyDataSetChanged();

seData(specsBean);

operateListener.selected(position,specsBean.getId());

}

});

}

private void seData(ProductSpecsBean productSpecsBean) {

Glide.with(rivImage.getContext()).load(categoryBean.getGoodsDetails().getImage()).into(rivImage);

tvProductName.setText(categoryBean.getGoodsDetails().getTitle());

double price = productSpecsBean.getDiscountPrice();

String integer = String.valueOf((int) price);

int dec = (int) (price * 100) % 100;

String decimal = dec == 0 ? "00" : String.valueOf(dec);

SpanUtils.with(tvProductPrice)

.append("￥")

.setForegroundColor(Color.parseColor("#F86F57")).setFontSize(18, true)

.append(integer)

.setFontSize(30, true)

.append("." + decimal)

.setFontSize(18, true)

// .append("/" + "箱")

// .setForegroundColor(Color.parseColor("#999999")).setFontSize(14, true)

.create();

tvRemainingAmount.setText("剩余" + productSpecsBean.getAllStock());

stock = productSpecsBean.getAllStock();

// TODO: 2020/12/8 规格名

tvSpecification.setText(productSpecsBean.getUnit());

}

@OnClick({R.id.iv_close, R.id.mb_addCar, R.id.iv_reduce, R.id.iv_add})

public void onViewClicked(View view) {

switch (view.getId()) {

case R.id.iv_close:

dismiss();

break;

case R.id.mb_addCar:

if (categoryBean.getGoodsSpecsList().size() != 0) {

operateListener.addCar(categoryAdapter.getSelectPosition(), categoryBean.getGoodsDetails().getId()

, categoryBean.getGoodsSpecsList().get(categoryAdapter.getSelectPosition()).getId()

, buyNum);

} else {

ToastUtils.showShort("没有商品类别");

}

dismiss();

break;

case R.id.iv_reduce:

if (buyNum <= 1) {

ToastUtils.showShort("不能再减了");

return;

} else {

buyNum--;

tvBuyNum.setText(buyNum + "");

}

break;

case R.id.iv_add:

if (buyNum >= stock) {

ToastUtils.showShort("没有更多库存");

return;

} else {

buyNum++;

tvBuyNum.setText(buyNum + "");

}

break;

}

}

private void getCategory(int id) {

setLoadSir(content);

HashMap hashMap = new HashMap();

hashMap.put("goodsId", id);

model.getGoodsSpecList(activity, hashMap, false, true, lifecycleTransformer, new ObserverResponseListener() {

@Override

public void onSuccess(Object o) {

BaseResponse response = (BaseResponse) o;

categoryBean = response.getData();

initView();

mLoadService.showSuccess();

}

@Override

public void onError(ExceptionHandle.ResponeThrowable e) {

mLoadService.showCallback(ErrorCallback.class);

}

});

}

/**

* 注册LoadSir

*

* @param view 替换视图

*/

public void setLoadSir(View view) {

if (mLoadService == null) {

mLoadService = LoadSir.getDefault().register(view, new Callback.OnReloadListener() {

@Override

public void onReload(View v) {

getCategory(productId);

}

});

} else {

mLoadService.showCallback(LoadingCallback.class);

}

}

@Override

public void dismiss() {

super.dismiss();

unbinder.unbind();

}

public interface OperateListener {

void addCar(int selectPosition, int productId, int specsId, int buyNum);

void selected(int selectPosition,int specsId);

}

public OperateListener getOperateListener() {

return operateListener;

}

public void setOperateListener(OperateListener operateListener) {

this.operateListener = operateListener;

}

}

dialog_product_category.xml

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/white"

android:gravity="bottom"

android:orientation="vertical">

android:id="@+id/content"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:padding="20dp">

android:id="@+id/iv_close"

android:layout_width="18dp"

android:layout_height="18dp"

android:background="@drawable/ic_1089"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/textView30"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="选择规格"

android:textColor="@color/black_33"

android:textSize="16sp"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/riv_image"

android:layout_width="80dp"

android:layout_height="70dp"

android:layout_marginTop="30dp"

android:scaleType="centerCrop"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintTop_toBottomOf="@+id/textView30" />

android:id="@+id/tv_product_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="20dp"

android:ellipsize="end"

android:maxWidth="150dp"

android:maxLines="2"

android:text="XXXXXX"

android:textColor="@color/black_33"

android:textSize="14sp"

android:textStyle="bold"

app:layout_constraintLeft_toRightOf="@id/riv_image"

app:layout_constraintTop_toTopOf="@id/riv_image" />

android:id="@+id/tv_productPrice"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:text="￥00.00"

android:textColor="@color/red"

android:textSize="18sp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="@+id/tv_product_name"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toEndOf="@id/tv_product_name"

app:layout_constraintTop_toTopOf="@+id/tv_product_name" />

android:id="@+id/textView32"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="15dp"

android:text="已选择："

app:layout_constraintLeft_toLeftOf="@id/tv_productPrice"

app:layout_constraintStart_toStartOf="@+id/tv_product_name"

app:layout_constraintTop_toBottomOf="@+id/tv_product_name" />

android:id="@+id/tv_specification"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="XXXXXXXXXXX"

app:layout_constraintBottom_toBottomOf="@+id/textView32"

app:layout_constraintStart_toEndOf="@+id/textView32"

app:layout_constraintTop_toTopOf="@+id/textView32" />

android:id="@+id/tv_remainingAmount"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:text="剩余0"

app:layout_constraintLeft_toLeftOf="@id/tv_productPrice"

app:layout_constraintStart_toStartOf="@+id/textView32"

app:layout_constraintTop_toBottomOf="@+id/textView32" />

android:id="@+id/rv_type"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

app:layout_constraintTop_toBottomOf="@id/tv_remainingAmount" />

android:id="@+id/tv_buyNumTitle"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="40dp"

android:text="数量"

android:textColor="@color/black"

android:textSize="14sp"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintTop_toBottomOf="@id/rv_type" />

android:id="@+id/ll_num"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

app:layout_constraintBottom_toBottomOf="@id/tv_buyNumTitle"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="@id/tv_buyNumTitle">

android:id="@+id/iv_reduce"

android:layout_width="20dp"

android:layout_height="20dp"

android:background="@drawable/ic_1026" />

android:id="@+id/tv_buyNum"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginHorizontal="10dp"

android:text="1"

android:textColor="#333333"

android:textSize="15sp" />

android:id="@+id/iv_add"

android:layout_width="20dp"

android:layout_height="20dp"

android:layout_marginRight="5dp"

android:background="@drawable/ic_1027" />

android:id="@+id/mb_addCar"

android:layout_width="match_parent"

android:layout_height="50dp"

android:layout_marginTop="25dp"

android:text="加入购物车"

android:textSize="15sp"

android:theme="@style/Theme.MaterialComponents.Light"

app:backgroundTint="@color/colorPrimary"

app:cornerRadius="20dp"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@id/ll_num"

app:rippleColor="@color/white" />

ProductCategoryAdapter.class

public class ProductCategoryAdapter extends BaseQuickAdapter {

public int selectPosition=0;

public ProductCategoryAdapter(int layoutResId) {

super(layoutResId);

}

@Override

protected void convert(@NotNull BaseViewHolder baseViewHolder, @Nullable ProductSpecsBean goodsSpecsListBean) {

TextView tv_text=baseViewHolder.getView(R.id.tv_text);

tv_text.setText(goodsSpecsListBean.getUnit());

if(selectPosition==baseViewHolder.getLayoutPosition()){

tv_text.setTextColor(Color.WHITE);

tv_text.setBackgroundResource(R.drawable.shape_primary_radius15);

}else {

tv_text.setTextColor(Color.parseColor("#999999"));

tv_text.setBackgroundResource(R.drawable.shape_stroke_gray_radius20);

}

}

public int getSelectPosition() {

return selectPosition;

}

public void setSelectPosition(int selectPosition) {

this.selectPosition = selectPosition;

}

}

dialog_product_category.xml 就一个TextView，没啥好写

img