Kevin Learn QMUI--＞ QMUIBottomSheet

Posted 2022-03-28 Kevin_小飞象

简介

在 Dialog 的基础上重新定制了 show() 和 hide() 时的动画效果, 使 Dialog 在界面底部升起和降下。提供了以下两个面板样式：
列表样式：使用 QMUIBottomSheet.BottomListSheetBuilder 生成。
宫格类型：使用 QMUIBottomSheet.BottomGridSheetBuilder 生成。

开始使用

qmui

1. 引入库
   请确保配置了 JCenter 仓库源，然后直接引用:
   implementation "com.qmuiteam:qmui:2.0.0-alpha10"
   至此，QMUI 已被引入项目中。

2. 配置主题
   把项目的 theme 的 parent 指向 QMUI.Compat，至此，QMUI 可以正常工作。
   <style name="Theme.QMUIDemo" parent="QMUI.Compat.NoActionBar"></style>

效果图

核心代码

public class BottomSheetActivity extends BaseActivity 
    final int TAG_SHARE_WECHAT_FRIEND = 0;
    final int TAG_SHARE_WECHAT_MOMENT = 1;
    final int TAG_SHARE_WEIBO = 2;
    final int TAG_SHARE_CHAT = 3;
    final int TAG_SHARE_LOCAL = 4;

    @BindView(R.id.topbar)
    QMUITopBar mTopBar;

    @Override
    protected int getLayoutId() 
        return R.layout.activity_bottom_sheet;
    

    @Override
    protected void initView() 
        mTopBar.setTitle("底页弹框");
        mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View v) 
                finish();
            
        );
    

    @OnClick(R.id.qmui_take,R.id.qmui_select,R.id.qmui_share)
    public void clicked(View view) 
        switch (view.getId()) 
            case R.id.qmui_take:
                showBottomSheet();
                break;

            case R.id.qmui_select:
                showBottomSheetWithTitle();
                break;

            case R.id.qmui_share:
                showBottomSheetWithShare();
                break;

            default:
                break;
        
    

    private void showBottomSheetWithShare() 
        QMUIBottomSheet.BottomGridSheetBuilder builder = new QMUIBottomSheet.BottomGridSheetBuilder(this);
        builder.addItem(R.mipmap.icon_more_operation_share_friend, "分享到微信", TAG_SHARE_WECHAT_FRIEND,
                QMUIBottomSheet.BottomGridSheetBuilder.FIRST_LINE)
                .addItem(R.mipmap.icon_more_operation_share_moment, "分享到朋友圈", TAG_SHARE_WECHAT_MOMENT,
                        QMUIBottomSheet.BottomGridSheetBuilder.FIRST_LINE)
                .addItem(R.mipmap.icon_more_operation_share_weibo, "分享到微博", TAG_SHARE_WEIBO,
                        QMUIBottomSheet.BottomGridSheetBuilder.FIRST_LINE)
                .addItem(R.mipmap.icon_more_operation_share_chat, "分享到私信", TAG_SHARE_CHAT,
                        QMUIBottomSheet.BottomGridSheetBuilder.FIRST_LINE)
                .addItem(R.mipmap.icon_more_operation_save, "保存到本地", TAG_SHARE_LOCAL,
                        QMUIBottomSheet.BottomGridSheetBuilder.SECOND_LINE)
                .setAddCancelBtn(true)
                .setSkinManager(QMUISkinManager.defaultInstance(this))
                .setOnSheetItemClickListener(new QMUIBottomSheet.BottomGridSheetBuilder.OnSheetItemClickListener() 
                    @Override
                    public void onClick(QMUIBottomSheet dialog, View itemView) 
                        dialog.dismiss();
                        int tag = (int) itemView.getTag();
                        switch (tag) 
                            case TAG_SHARE_WECHAT_FRIEND:
                                Toast.makeText(BottomSheetActivity.this, "分享到微信", Toast.LENGTH_SHORT).show();
                                break;
                            case TAG_SHARE_WECHAT_MOMENT:
                                Toast.makeText(BottomSheetActivity.this, "分享到微信朋友圈", Toast.LENGTH_SHORT).show();
                                break;
                            case TAG_SHARE_WEIBO:
                                Toast.makeText(BottomSheetActivity.this, "分享到微博", Toast.LENGTH_SHORT).show();
                                break;
                            case TAG_SHARE_CHAT:
                                Toast.makeText(BottomSheetActivity.this, "分享到私信", Toast.LENGTH_SHORT).show();
                                break;
                            case TAG_SHARE_LOCAL:
                                Toast.makeText(BottomSheetActivity.this, "保存到本地", Toast.LENGTH_SHORT).show();
                                break;
                        
                    
                )
                .build()
                .show();
    

    private void showBottomSheetWithTitle() 
        new QMUIBottomSheet.BottomListSheetBuilder(this)
                .setTitle("请选择所在的部门")
                .addItem(ContextCompat.getDrawable(this, R.mipmap.icon_tabbar_util),"研发部")
                .addItem(ContextCompat.getDrawable(this, R.mipmap.icon_tabbar_util),"售后部")
                .addItem(ContextCompat.getDrawable(this, R.mipmap.icon_tabbar_util),"品质部")
                .addItem(ContextCompat.getDrawable(this, R.mipmap.icon_tabbar_util),"工程部")
                .addItem(ContextCompat.getDrawable(this, R.mipmap.icon_tabbar_util),"人事部")
                .setAllowDrag(true)
                .setGravityCenter(false)
                .setNeedRightMark(true)
                .setCheckedIndex(3)
                .setAddCancelBtn(true)
                .setOnSheetItemClickListener(new QMUIBottomSheet.BottomListSheetBuilder.OnSheetItemClickListener() 
                    @Override
                    public void onClick(QMUIBottomSheet dialog, View itemView, int position, String tag) 
                        dialog.dismiss();
                        Toast.makeText(BottomSheetActivity.this, "you clicked " + position,
                                Toast.LENGTH_SHORT).show();
                    
                )
                .build()
                .show();
    

    private void showBottomSheet() 
        new QMUIBottomSheet.BottomListSheetBuilder(this)
                .addItem("拍照")
                .addItem("相册")
                .setAddCancelBtn(true)
                .setGravityCenter(true)
                .setOnSheetItemClickListener(new QMUIBottomSheet.BottomListSheetBuilder.OnSheetItemClickListener() 
                    @Override
                    public void onClick(QMUIBottomSheet dialog, View itemView, int position, String tag) 
                        dialog.dismiss();
                        Toast.makeText(BottomSheetActivity.this, "you clicked " + position,
                                Toast.LENGTH_SHORT).show();
                    
                )
                .build()
                .show();