微信对话框_微信对话框左上角数字 - CSDN
精华内容
参与话题
  • 微信小程序弹出对话框

    万次阅读 2017-07-19 10:13:07
    在很多应用中,对话框是不可避免的,那么如何在微信小程序里面弹出一个对话框呢,请看下文: 1.在wxml文件中编写布局: 点击弹出对话框 对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text=...

        在很多应用中,对话框是不可避免的,那么如何在微信小程序里面弹出一个对话框呢,请看下文:

    第一种方法:

    1.在wxml文件中编写布局:

    <view>
      <button bindtap="bindViewTap">点击弹出对话框</button>
      <view >
        <modal title="对话框" hidden="{{modalHidden}}" confirm-text="确定"
        cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">
          您好,我是modal对话框
        </modal>
      </view>
    </view>


    2.在js文件实现对话框的隐藏和显示

    //获取应用实例
    var app = getApp()
    Page({
      data: {
        modalHidden:true,//是否隐藏对话框
      },
      //事件处理函数
      bindViewTap: function() {
        this.setData({
          modalHidden:!this.data.modalHidden
        })
        
      },
      //确定按钮点击事件
      modalBindaconfirm:function(){
        this.setData({
          modalHidden:!this.data.modalHidden,
        })
      },
      //取消按钮点击事件
      modalBindcancel:function(){
        this.setData({
          modalHidden:!this.data.modalHidden,
        })
      },
      
    })

    3.效果图如下:



    第二种方法:直接调用微信小程序的api

    wx.showModal({
            title:'提示',
            content:'这是一个示例弹窗',
            success:function(res){
              console.log(res)
              if(res.confirm){
                console.log('用户点击了确定')
              }else {
                console.log('用户点击了取消')
              }
            }
          })








    展开全文
  • 仿微信对话框效果,弹出带动画效果,详细讲解请参考:http://blog.csdn.net/jakeyangchina/article/details/53423453
  • 微信小程序】自定义模态对话框实例

    万次阅读 多人点赞 2017-06-16 18:25:13
    自定义模态对话框实例由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。 wx.showModal(OBJECT) 自定义 ...

    自定义模态对话框实例

    由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。

    • wx.showModal(OBJECT)
    • 自定义
    • 模态对话框

    涉及文件

    • 界面 wxml
    • 样式 wxcss
    • 事件及方法 js

    效果图

    这里写图片描述

    这里写图片描述

    界面代码 .wxml

    <button class="show-btn" bindtap="showDialogBtn">弹窗</button>
    
    <!--弹窗-->
    <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
    <view class="modal-dialog" wx:if="{{showModal}}">
      <view class="modal-title">添加数量</view>
      <view class="modal-content">
        <view class="modal-input">
          <input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"></input>
        </view>
      </view>
      <view class="modal-footer">
        <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
        <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
      </view>
    </view>

    样式 .wxss

    .show-btn {
      margin-top: 100rpx;
      color: #22cc22;
    }
    
    .modal-mask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.5;
      overflow: hidden;
      z-index: 9000;
      color: #fff;
    }
    
    .modal-dialog {
      width: 540rpx;
      overflow: hidden;
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 9999;
      background: #f9f9f9;
      margin: -180rpx 105rpx;
      border-radius: 36rpx;
    }
    
    .modal-title {
      padding-top: 50rpx;
      font-size: 36rpx;
      color: #030303;
      text-align: center;
    }
    
    .modal-content {
      padding: 50rpx 32rpx;
    }
    
    .modal-input {
      display: flex;
      background: #fff;
      border: 2rpx solid #ddd;
      border-radius: 4rpx;
      font-size: 28rpx;
    }
    
    
    .input {
      width: 100%;
      height: 82rpx;
      font-size: 28rpx;
      line-height: 28rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      color: #333;
    }
    
    input-holder {
      color: #666;
      font-size: 28rpx;
    }
    
    .modal-footer {
      display: flex;
      flex-direction: row;
      height: 86rpx;
      border-top: 1px solid #dedede;
      font-size: 34rpx;
      line-height: 86rpx;
    }
    
    .btn-cancel {
      width: 50%;
      color: #666;
      text-align: center;
      border-right: 1px solid #dedede;
    }
    
    .btn-confirm {
      width: 50%;
      color: #ec5300;
      text-align: center;
    }

    事件及方法 .js

    Page({
        data: {
          showModal: false,
        },
        onLoad: function () {
        },
        /**
         * 弹窗
         */
        showDialogBtn: function() {
          this.setData({
            showModal: true
          })
        },
        /**
         * 弹出框蒙层截断touchmove事件
         */
        preventTouchMove: function () {
        },
        /**
         * 隐藏模态对话框
         */
        hideModal: function () {
          this.setData({
            showModal: false
          });
        },
        /**
         * 对话框取消按钮点击事件
         */
        onCancel: function () {
          this.hideModal();
        },
        /**
         * 对话框确认按钮点击事件
         */
        onConfirm: function () {
          this.hideModal();
        }
    })

    实现思路解读及原理

    1. 界面解读:
      用一个蒙层+弹窗来组成,用绑定的数据{{showModal}}来控制弹窗的显示和隐藏

    2. 事件及方法解读:
      让弹窗显示的方法:

        showDialogBtn: function() {
          this.setData({
            showModal: true
          })
        }

    让弹窗消失的方法:

        hideModal: function () {
          this.setData({
            showModal: false
          });
        }

    这里有个要特别注意的地方,就是下面这个方法:

        preventTouchMove: function () {
        }

    为什么是空方法?因为要结合界面wxml看,蒙层view里有一个事件绑定catchtouchmove="preventTouchMove"。这养写的原因是阻断事件向下传递,避免在弹窗后还可以点击或者滑动蒙层下的界面。如果不这样写的话,如果主界面是一个可以滚动的界面,想想看,当弹窗弹出的时候用户还可以操作滚动列表,我想你的产品经理会来找你的。

     3. 样式解读:(这个标题没加代码块标识,但还是像代码块一样被显示了,这是个bug!!!- -)
    

    .modal-mask和.modal-dialog样式的写法需要特别注意。
    主要是层级关系,弹窗要保证在最上层,不被界面遮挡,然后蒙层要遮挡住界面,但是不可遮挡弹窗。所以.modal-mask和.modal-dialog的z-index值要注意。

    展开全文
  • 首先看一下实现的效果图: 实现思路,首先要对Dialog进行自定义,使用我们自己的布局,其次我们发现Dialog中展示的数据类型、展示的样式也是略有不同的,这就需要我们在数据格式方法进行一些设置,以实现在同一个...

    首先看一下实现的效果图:

    实现思路,首先要对Dialog进行自定义,使用我们自己的布局,其次我们发现Dialog中展示的数据类型、展示的样式也是略有不同的,这就需要我们在数据格式方法进行一些设置,以实现在同一个Dialog去展示不同的效果。

     

    public class CommonShareToDialog extends Dialog {
    
        public CommonShareToDialog(Context context) {
            super(context);
        }
    
        public CommonShareToDialog(Context context, int theme) {
            super(context, theme);
        }
    
        public static class Builder {
            private Context context;
            private boolean noTitle = true;
            private String title;
            private String message;
            private ImageView ivShowDetail;
            private List<GroupMemberEntity> mGroupMemberEntities;
            private DialogGroupMemberAdapter mGroupMemberAdapter;
            private ShareContent shareContent;
            private boolean isShow;
            private Animation mRotateAnimation;
            private OnSendClickListener mOnSendClickListener;
            private OnCancleClickListener mOnCancleClickListener;
            private OnContentClickListener mOnContentClickListener;
    
            private Handler mHandler = new Handler() {
                public void handleMessage(android.os.Message msg) {
                    switch (msg.what) {
                        case 0:
                            // 执行动画
                            mRotateAnimation = AnimationUtils.loadAnimation(context, R.anim.imageviwe_rotate);
                            // 动画执行完后停留在执行完的状态
                            mRotateAnimation.setFillAfter(true);
                            ivShowDetail.startAnimation(mRotateAnimation);
                            break;
                        case 1:
                            // 执行动画
                            mRotateAnimation = AnimationUtils.loadAnimation(context, R.anim.imageviwe_rotate_normal);
                            // 动画执行完后停留在执行完的状态
                            mRotateAnimation.setFillAfter(true);
                            ivShowDetail.startAnimation(mRotateAnimation);
                            break;
                        default:
                            break;
                    }
                }
    
                ;
            };
    
            public Builder(Context context) {
                this.context = context;
            }
    
            public Builder setTitle(String title) {
                this.title = message;
                return this;
            }
    
            public Builder setNoTitle(boolean noTitle) {
                this.noTitle = noTitle;
                return this;
            }
    
            /**
             * Set the Dialog title from resource
             *
             * @param resId
             * @return
             */
            public Builder setTitle(int resId) {
                this.title = (String) context.getText(resId);
                return this;
            }
    
            public Builder setMessage(String message) {
                this.message = message;
                return this;
            }
    
            /**
             * Set the Dialog message from resource
             *
             * @param resId
             * @return
             */
            public Builder setMessage(int resId) {
                this.message = (String) context.getText(resId);
                return this;
            }
    
            public Builder setGroupMemberEntities(List<GroupMemberEntity> groupMemberEntities) {
                mGroupMemberEntities = groupMemberEntities;
                return this;
            }
    
            public Builder setShareContent(ShareContent shareContent) {
                this.shareContent = shareContent;
                return this;
            }
    
            public Builder setOnSendClickListener(OnSendClickListener onSendClickListener) {
                mOnSendClickListener = onSendClickListener;
                return this;
            }
    
            public Builder setOnCancleClickListener(OnCancleClickListener onCancleClickListener) {
                mOnCancleClickListener = onCancleClickListener;
                return this;
            }
    
            public Builder setOnContentClickListener(OnContentClickListener onContentClickListener) {
                mOnContentClickListener = onContentClickListener;
                return this;
            }
    
            public interface OnSendClickListener {
                void onSendClick(CommonShareToDialog dialog, String editContent);
            }
    
            public interface OnCancleClickListener {
                void OnCancleClick(CommonShareToDialog dialog);
            }
    
            public interface OnContentClickListener {
                void OnContentClick(CommonShareToDialog dialog);
            }
    
            public CommonShareToDialog create() {
                LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                final CommonShareToDialog dialog = new CommonShareToDialog(context, R.style.common_dialog);
                final View layoutContainer = inflater.inflate(R.layout.dialog_common_share_to, null);
                // 标题
                TextView tvTitle = (TextView) layoutContainer.findViewById(R.id.textview_title);
                // 单个群组成员的详细列表
                final RelativeLayout layoutGroupDetail = (RelativeLayout) layoutContainer.findViewById(R.id.layout_group_detail);
                final RecyclerView rvGroupDetail = (RecyclerView) layoutContainer.findViewById(R.id.recyclerview_group_detail);
                GridLayoutManager GroupDetailManager = new GridLayoutManager(context, 4, GridLayoutManager.VERTICAL, false);
                rvGroupDetail.setLayoutManager(GroupDetailManager);
                int space = context.getResources().getDimensionPixelSize(R.dimen.seven);
                rvGroupDetail.addItemDecoration(new SpaceItemDecoration(space, space));
                // 点击展开群成员图标
                ivShowDetail = (ImageView) layoutContainer.findViewById(R.id.imageview_arrow_down);
                // 头像显示的RecyclerView
                RecyclerView rvMemberMultiple = (RecyclerView) layoutContainer.findViewById(R.id.recyclerview_member_multiple);
                // 分享内容的布局
                final LinearLayout layoutShareContent = (LinearLayout) layoutContainer.findViewById(R.id.layout_share_content);
                ImageView ivShareIcon = (ImageView) layoutContainer.findViewById(R.id.imageview_share_icon);
                TextView tvShareContent = (TextView) layoutContainer.findViewById(R.id.textview_share_content);
                // 编辑输入框
                final BottomLineEditText etShareText = (BottomLineEditText) layoutContainer.findViewById(R.id.edittext_share_text);
                etShareText.requestFocus(); //获取焦点 光标出现
                final TextView tvInputLabel = (TextView) layoutContainer.findViewById(R.id.textview_input_label);
                tvInputLabel.setVisibility(View.GONE);
                // 操作按钮
                TextView tvConfirm = (TextView) layoutContainer.findViewById(R.id.textview_send);
                TextView tvCancle = (TextView) layoutContainer.findViewById(R.id.textview_cancel);
                if (noTitle) {
                    if (title != null) {
                        tvTitle.setText(title);
                    }
                } else {
                    tvTitle.setVisibility(View.GONE);
                }
                ivShowDetail.setOnClickListener(new View.OnClickListener() {
    
                    DialogGroupMemberAdapter groupAdapter;
    
                    @Override
                    public void onClick(View view) {
                        ivShowDetail.setFocusable(true);
                        ivShowDetail.setFocusableInTouchMode(true);
                        ivShowDetail.requestFocus();
                        hideSoftKeyboard(etShareText);
                        isShow = !isShow;
                        if (isShow) {
                            mHandler.sendEmptyMessage(0);
                            layoutGroupDetail.setVisibility(View.VISIBLE);
                            layoutShareContent.setVisibility(View.GONE);
                            if (groupAdapter == null) {
                                groupAdapter = new DialogGroupMemberAdapter(context);
                            } else {
                                runLayoutAnimation(rvGroupDetail);
                            }
                            List<GroupMemberEntity> entities = new ArrayList<>();
                            List<String> urlStrs = mGroupMemberEntities.get(0).getImageUrls();
                            for (String url : urlStrs) {
                                List<String> strs = new ArrayList<>();
                                strs.add(url);
                                GroupMemberEntity entity = new GroupMemberEntity(2, "", strs);
                                entities.add(entity);
                            }
                            groupAdapter.setGroupMemberEntities(entities);
                            rvGroupDetail.setAdapter(groupAdapter);
                        } else {
                            mHandler.sendEmptyMessage(1);
                            if (groupAdapter != null) {
                                groupAdapter.setGroupMemberEntities(null);
                                groupAdapter.notifyDataSetChanged();
                            }
                            layoutGroupDetail.setVisibility(View.GONE);
                            layoutShareContent.setVisibility(View.VISIBLE);
                        }
                    }
                });
                if (mGroupMemberEntities != null) {
                    ivShowDetail.setVisibility(View.GONE);
                    layoutGroupDetail.setVisibility(View.GONE);
                    GridLayoutManager gridLayoutManager;
                    if (mGroupMemberEntities.size() == 1) {
                        gridLayoutManager = new GridLayoutManager(context, 1, GridLayoutManager.VERTICAL, false);
                        GroupMemberEntity groupMemberEntity = mGroupMemberEntities.get(0);
                        if (groupMemberEntity.getMemeberType() == 3) {// 如果是一个单个的群组,则显示展示图标
                            ivShowDetail.setVisibility(View.VISIBLE);
                        }
                    } else {
                        gridLayoutManager = new GridLayoutManager(context, 4, GridLayoutManager.VERTICAL, false);
                    }
                    if (mGroupMemberAdapter == null) {
                        mGroupMemberAdapter = new DialogGroupMemberAdapter(context);
                    }
                    mGroupMemberAdapter.setGroupMemberEntities(mGroupMemberEntities);
                    rvMemberMultiple.setLayoutManager(gridLayoutManager);
    //                int spacing = context.getResources().getDimensionPixelSize(R.dimen.seven_dp);
    //                rvMemberMultiple.addItemDecoration(new SpaceItemDecoration(spacing, spacing));
                    rvMemberMultiple.setAdapter(mGroupMemberAdapter);
                }
                if (shareContent != null) {
                    tvShareContent.setText(shareContent.getDesc());
                    ImageLoader.getInstance().displayImage(shareContent.getIconUrl(), ivShareIcon);
                }
                layoutContainer.setOnTouchListener(new View.OnTouchListener() {
                    @Override
                    public boolean onTouch(View view, MotionEvent motionEvent) {
                        layoutContainer.setFocusable(true);
                        layoutContainer.setFocusableInTouchMode(true);
                        layoutContainer.requestFocus();
                        hideSoftKeyboard(etShareText);
                        return false;
                    }
                });
                etShareText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(150)});// 在代码里设置输入字数的上限,也可以在xml文件里设置
                etShareText.addTextChangedListener(new TextWatcher() {
    
                    @Override
                    public void onTextChanged(CharSequence s, int start, int before, int count) {
                        if (TextUtils.isEmpty(s)) {
                            tvInputLabel.setVisibility(View.GONE);
                        } else {
                            if (s.toString().length() >= 150) {
                                tvInputLabel.setVisibility(View.VISIBLE);
                                tvInputLabel.setText("最多输入150个字");
                            }
                        }
                    }
    
                    @Override
                    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                        // TODO Auto-generated method stub
    
                    }
    
                    @Override
                    public void afterTextChanged(Editable s) {
    
                    }
                });
                tvConfirm.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        if (mOnSendClickListener != null) {
                            mOnSendClickListener.onSendClick(dialog, etShareText.getText().toString());
                        }
                    }
                });
                tvCancle.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        if (mOnCancleClickListener != null) {
                            mOnCancleClickListener.OnCancleClick(dialog);
                        }
                    }
                });
                layoutShareContent.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        layoutShareContent.setFocusable(true);
                        layoutShareContent.setFocusableInTouchMode(true);
                        layoutShareContent.requestFocus();
                        hideSoftKeyboard(etShareText);
                        if (mOnContentClickListener != null) {
                            mOnContentClickListener.OnContentClick(dialog);
                        }
                    }
                });
                dialog.setContentView(layoutContainer);
                return dialog;
            }
    
            /**
             * @Author: lzsheng
             * @Description: 数据变化的时候触发动画
             * @Params: [recyclerView]
             * @Return: void
             */
            private void runLayoutAnimation(final RecyclerView recyclerView) {
                final Context context = recyclerView.getContext();
                final LayoutAnimationController controller =
                        AnimationUtils.loadLayoutAnimation(context, R.anim.layout_animation_fall_down);
                recyclerView.setLayoutAnimation(controller);
                recyclerView.getAdapter().notifyDataSetChanged();
                recyclerView.scheduleLayoutAnimation();
            }
    
            private void hideSoftKeyboard(EditText editText) {
                InputMethodManager imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
                boolean isOpen = imm.isActive();
                if (isOpen) {
                    imm.hideSoftInputFromWindow(editText.getWindowToken(), 0);
                }
            }
        }
    }

    这个自定义对话框类中可能进行更多扩展,视自己的功能需求而定,

    与这个Dialog类紧密相关的是DialogGroupMemberAdapter类,那么这个类是用来做什么呢?

     

    public class DialogGroupMemberAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    
        private Context mContext;
        private List<GroupMemberEntity> mGroupMemberEntities;
        private OnRecyclerViewItemClick onRecyclerViewItemClick;
        private NineGridImageViewAdapter<String> mGridImageAdapter;
    
        private final int TYPE_MEMEBER_SINGLE = 1;       // 单个成员,显示头像、左边显示名字
        private final int TYPE_MEMEBER_MULTIPLE = 2;     // 多个成员,只显示头像
        private final int TYPE_GROUP_SINGLE = 3;         // 单个群组,显示头像、左边显示名字
        private final int TYPE_GROUP_MULTIPLE = 4;       // 多个群组,只显示头像
        private final int TYPE_MEMBER_MULTIPLE_FULL = 5; // 多个成员,显示头像、下边显示名字
    
        public DialogGroupMemberAdapter(Context context) {
            this.mContext = context;
            mGridImageAdapter = new NineGridImageViewAdapter<String>() {
    
                @Override
                protected void onDisplayImage(Context context, ImageView imageView, String s) {
                    ImageLoader.getInstance().displayImage(s, imageView);
                }
    
                @Override
                protected ImageView generateImageView(Context context) {
                    return super.generateImageView(context);
                }
            };
        }
    
        public void setGroupMemberEntities(List<GroupMemberEntity> groupMemberEntities) {
            mGroupMemberEntities = groupMemberEntities;
        }
    
        public void setOnRecyclerViewItemClick(OnRecyclerViewItemClick onRecyclerViewItemClick) {
            this.onRecyclerViewItemClick = onRecyclerViewItemClick;
        }
    
        //根据数据的类型memeberType,返回不同的ItemViewType
        @Override
        public int getItemViewType(int position) {
            if (mGroupMemberEntities != null && mGroupMemberEntities.size() > 0) {
                int memberType = mGroupMemberEntities.get(position).getMemeberType();
                if (memberType == TYPE_MEMEBER_SINGLE) {
                    return TYPE_MEMEBER_SINGLE;
                } else if (memberType == TYPE_MEMEBER_MULTIPLE) {
                    return TYPE_MEMEBER_MULTIPLE;
                } else if (memberType == TYPE_GROUP_SINGLE) {
                    return TYPE_GROUP_SINGLE;
                } else if (memberType == TYPE_GROUP_MULTIPLE) {
                    return TYPE_GROUP_MULTIPLE;
                } else if (memberType == TYPE_MEMBER_MULTIPLE_FULL) {
                    return TYPE_MEMBER_MULTIPLE_FULL;
                }
            }
            return 0;
        }
    
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            switch (viewType) {
                case TYPE_MEMEBER_SINGLE:
                    HolderMemeberSingle holderMemeberSingle = new HolderMemeberSingle(
                            LayoutInflater.from(mContext).inflate(R.layout.item_member_single, parent, false));
                    return holderMemeberSingle;
                case TYPE_MEMEBER_MULTIPLE:
                    HolderMemeberMultiple holderMemeberMultiple = new HolderMemeberMultiple(
                            LayoutInflater.from(mContext).inflate(R.layout.item_member_multiple, parent, false));
                    return holderMemeberMultiple;
                case TYPE_GROUP_SINGLE:
                    HolderGroupSingle holderGroupSingle = new HolderGroupSingle(
                            LayoutInflater.from(mContext).inflate(R.layout.item_group_single, parent, false));
                    return holderGroupSingle;
                case TYPE_GROUP_MULTIPLE:
                    HolderGroupMultiple holderGroupMultiple = new HolderGroupMultiple(
                            LayoutInflater.from(mContext).inflate(R.layout.item_group_multiple, parent, false));
                    return holderGroupMultiple;
                case TYPE_MEMBER_MULTIPLE_FULL:
                    HolderMemberMultipleFull holderMemberMultipleFull = new HolderMemberMultipleFull(
                            LayoutInflater.from(mContext).inflate(R.layout.item_member_multiple_full, parent, false));
                    return holderMemberMultipleFull;
                default:
                    return null;
            }
        }
    
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            if (mGroupMemberEntities != null) {
                GroupMemberEntity groupMemberEntity = mGroupMemberEntities.get(position);
                int memberType = groupMemberEntity.getMemeberType();
                switch (memberType) {
                    case TYPE_MEMEBER_SINGLE:
                        ImageLoader.getInstance().displayImage(groupMemberEntity.getImageUrls().get(0), ((HolderMemeberSingle) holder).ivMemberPic);
                        ((HolderMemeberSingle) holder).tvName.setText(groupMemberEntity.getName());
                        break;
                    case TYPE_MEMEBER_MULTIPLE:
                        ImageLoader.getInstance().displayImage(groupMemberEntity.getImageUrls().get(0), ((HolderMemeberMultiple) holder).ivMemberPic);
                        break;
                    case TYPE_GROUP_SINGLE:
                        ((HolderGroupSingle) holder).ivMemberPic.setAdapter(mGridImageAdapter);
                        ((HolderGroupSingle) holder).ivMemberPic.setImagesData(groupMemberEntity.getImageUrls());
                        ((HolderGroupSingle) holder).tvName.setText(groupMemberEntity.getName());
                        break;
                    case TYPE_GROUP_MULTIPLE:
                        ((HolderGroupMultiple) holder).ivMemberPic.setAdapter(mGridImageAdapter);
                        ((HolderGroupMultiple) holder).ivMemberPic.setImagesData(groupMemberEntity.getImageUrls());
                        break;
                    case TYPE_MEMBER_MULTIPLE_FULL:
                        ImageLoader.getInstance().displayImage(groupMemberEntity.getImageUrls().get(0), ((HolderMemberMultipleFull) holder).ivMemberPic);
                        ((HolderMemberMultipleFull) holder).tvName.setText(groupMemberEntity.getName());
                        break;
                    default:
                        break;
                }
            }
        }
    
        @Override
        public int getItemCount() {
            if (mGroupMemberEntities != null && mGroupMemberEntities.size() > 0) {
                return mGroupMemberEntities.size();
            }
            return 0;
        }
    
        class HolderMemeberSingle extends RecyclerView.ViewHolder implements View.OnClickListener {
    
            ImageView ivMemberPic;
            TextView tvName;
    
            public HolderMemeberSingle(View itemView) {
                super(itemView);
                ivMemberPic = (ImageView) itemView.findViewById(R.id.imageview_pic_member_single);
                tvName = (TextView) itemView.findViewById(R.id.textview_name_single);
                itemView.setOnClickListener(this);
            }
    
            @Override
            public void onClick(View view) {
                if (onRecyclerViewItemClick != null) {
                    onRecyclerViewItemClick.onItemClick(view, getAdapterPosition());
                }
            }
        }
    
        class HolderMemeberMultiple extends RecyclerView.ViewHolder implements View.OnClickListener {
    
            ImageView ivMemberPic;
    
            public HolderMemeberMultiple(View itemView) {
                super(itemView);
                ivMemberPic = (ImageView) itemView.findViewById(R.id.imageview_pic_member_multiple);
                itemView.setOnClickListener(this);
            }
    
            @Override
            public void onClick(View view) {
                if (onRecyclerViewItemClick != null) {
                    onRecyclerViewItemClick.onItemClick(view, getAdapterPosition());
                }
            }
        }
    
        class HolderGroupSingle extends RecyclerView.ViewHolder implements View.OnClickListener {
    
            NineGridImageView ivMemberPic;
            TextView tvName;
    
            public HolderGroupSingle(View itemView) {
                super(itemView);
                ivMemberPic = (NineGridImageView) itemView.findViewById(R.id.imageview_pic_group_single);
                tvName = (TextView) itemView.findViewById(R.id.textview_name_group_single);
                itemView.setOnClickListener(this);
            }
    
            @Override
            public void onClick(View view) {
                if (onRecyclerViewItemClick != null) {
                    onRecyclerViewItemClick.onItemClick(view, getAdapterPosition());
                }
            }
        }
    
    
        class HolderGroupMultiple extends RecyclerView.ViewHolder implements View.OnClickListener {
    
            NineGridImageView ivMemberPic;
    
            public HolderGroupMultiple(View itemView) {
                super(itemView);
                ivMemberPic = (NineGridImageView) itemView.findViewById(R.id.imageview_pic_group_multiple);
                itemView.setOnClickListener(this);
            }
    
            @Override
            public void onClick(View view) {
                if (onRecyclerViewItemClick != null) {
                    onRecyclerViewItemClick.onItemClick(view, getAdapterPosition());
                }
            }
        }
    
        class HolderMemberMultipleFull extends RecyclerView.ViewHolder implements View.OnClickListener {
    
            ImageView ivMemberPic;
            TextView tvName;
    
            public HolderMemberMultipleFull(View itemView) {
                super(itemView);
                ivMemberPic = (ImageView) itemView.findViewById(R.id.imageview_pic_member_full);
                tvName = (TextView) itemView.findViewById(R.id.textview_name_full);
                itemView.setOnClickListener(this);
            }
    
            @Override
            public void onClick(View view) {
                if (onRecyclerViewItemClick != null) {
                    onRecyclerViewItemClick.onItemClick(view, getAdapterPosition());
                }
            }
        }
    
        /**
         * item点击接口
         */
        public interface OnRecyclerViewItemClick {
            void onItemClick(View view, int position);
        }
    }

    这个代码逻辑还是比较清晰的,我们能看到这个类就是用来展示不同的群组或者个人的布局样式的。

    这个Dioalog类中有一个重要的实体类(GroupMemberEntity)集合, 所有的群组和成员的数据都由外部通过这个集合注入

     

    public class GroupMemberEntity implements Serializable {
    
    
        private int memeberType;
        /**
         *
         */
        private String name;
        /**
         *
         */
        private List<String> imageUrls;
    
        public GroupMemberEntity(int memeberType, String name, List<String> imageUrls) {
            this.memeberType = memeberType;
            this.name = name;
            this.imageUrls = imageUrls;
        }
    
        public int getMemeberType() {
            return memeberType;
        }
    
        public void setMemeberType(int memeberType) {
            this.memeberType = memeberType;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public List<String> getImageUrls() {
            return imageUrls;
        }
    
        public void setImageUrls(List<String> imageUrls) {
            this.imageUrls = imageUrls;
        }
    
        @Override
        public String toString() {
            return "GroupMemberEntity{" +
                    "memeberType=" + memeberType +
                    ", name='" + name + '\'' +
                    ", imageUrls=" + imageUrls +
                    '}';
        }
    
    }

    这个类中的 memeberType 属性用来区分不同的数据格式,这个和 DialogGroupMemberAdapter 类中的 ItemViewType 类型是一致的,不同的数据设置不同的格式,在适配器中进行区分并展示,这样不管外部是什么样的数据需要展示,只需要将它们转换成我们定义的这个类型数据,就可以轻松展示出来我们想要的效果。

     

    使用简单示例:展示单个群组的情况:

     

    mBtnShareSingleGroup.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    List<GroupMemberEntity> groupMemberEntities = new ArrayList<>();
                    List<String> picUrls = new ArrayList<>();
                    for (int i = 0; i < 8; i++) {
                        picUrls.add("drawable://" + R.drawable.icon_user);
                    }
                    GroupMemberEntity memberEntity = new GroupMemberEntity(3, "幸福一家人", picUrls);
                    groupMemberEntities.add(memberEntity);
                    ShareContent shareContent = new ShareContent("百万英雄赢百万,终极一问,脱离贫困,快来参与答题吧!", "http://app.toutiao.com/news_article/#news_article", "drawable://" + R.drawable.icon_share);
                    if (mShareDialogSingleGroup == null) {
                        mShareDialogSingleGroup = new CommonShareToDialog.Builder(MainActivity.this)
                                .setTitle("发送给:")
                                .setGroupMemberEntities(groupMemberEntities)
                                .setShareContent(shareContent)
                                .setOnSendClickListener(new CommonShareToDialog.Builder.OnSendClickListener() {
                                    @Override
                                    public void onSendClick(CommonShareToDialog dialog, String editContent) {
                                        Toast.makeText(MainActivity.this, "已分享", Toast.LENGTH_SHORT).show();
                                        dialog.dismiss();
                                    }
                                })
                                .setOnContentClickListener(new CommonShareToDialog.Builder.OnContentClickListener() {
                                    @Override
                                    public void OnContentClick(CommonShareToDialog dialog) {
                                        // todo startActivity(intent);跳转页面
                                    }
                                })
                                .setOnCancleClickListener(new CommonShareToDialog.Builder.OnCancleClickListener() {
                                    @Override
                                    public void OnCancleClick(CommonShareToDialog dialog) {
                                        dialog.dismiss();
                                    }
                                }).create();
                        Window window = mShareDialogSingleGroup.getWindow();
                        window.setGravity(Gravity.CENTER);
                        window.setWindowAnimations(R.style.CenterDialog_Animation);
                        window.getDecorView().setPadding(0, 0, 0, 0);
                        WindowManager.LayoutParams lp = window.getAttributes();
    //        lp.width = WindowManager.LayoutParams.MATCH_PARENT;// 设置宽度为全屏
                        lp.width = (int) (getResources().getDisplayMetrics().widthPixels * 0.75);
                        lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
                        window.setAttributes(lp);
                        mShareDialogSingleGroup.setCanceledOnTouchOutside(true);
                    }
                    if (mShareDialogSingleGroup != null && !mShareDialogSingleGroup.isShowing()) {
                        mShareDialogSingleGroup.show();
                    }
                }
            });

     

    源码下载

    GitHub地址

    由于作者水平有限,语言描述及代码实现中难免有纰漏,望各位看官多提宝贵意见!

    Hello , World !

    感谢所有!

     


     

    展开全文
  • html入门练手——微信对话框效果图css部分html部分存在问题 效果图 css部分 <style> .fake { background-color: rgb(236, 236, 236); } .phonehead { background-color: rgb(236, 236, 236); ...

    html入门练手——微信对话框

    刚入门html,学到了元素的动态布局,就试试看,写得很死很烦,慢慢来吧。

    效果图

    在这里插入图片描述

    css部分

    气泡框部分参考CSS实现微信对话框

        <style>
          .fake {
            background-color: rgb(236, 236, 236);
          }
          .phonehead {
            background-color: rgb(236, 236, 236);
            height: 5%;
            width: 100%;
            font-size: 13px;
            font-weight: 800;
            overflow: auto;
            padding: 5px 0;
          }
          .line1 {
            width: 33%;
            float: left;
          }
          .chathead {
            background-color: rgb(236, 236, 236);
            height: 13%;
            width: 100%;
            font-size: 18px;
            font-weight: 800;
            overflow: auto;
            padding: 3px 0 3px 0;
          }
          .chat {
            background-color: rgb(236, 236, 236);
            height: 577px;
            border-top: 1px solid rgb(214, 214, 214);
            border-bottom: 1px solid rgb(214, 214, 214);
            padding: 5px 0 0 0;
          }
          .avatar1 {
            padding: 0 10px;
            float: left;
          }
          .avatar1 img {
            height: 45px;
            border-radius: 4px;
          }
          .avatar2 {
            padding: 0 10px;
            float: left;
          }
          .avatar2 img {
            height: 45px;
            border-radius: 4px;
          }
          .dialog1 {
            /* 左边儿的对话框 */
            margin: 5px 3px;
            float: left;
            clear: both;
          }
          .dialog2 {
            /* 右边儿的对话框 */
            margin: 5px 3px;
            float: right;
            clear: both;
          }
          .word1 {
            /* ref: https://blog.csdn.net/weixin_30379911/article/details/99922923 */
            left: 3px;
            min-width: 20px;
            max-width: 240px;
            background: white;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 18px;
            color: black;
            word-break: break-word;
            position: relative;
            padding: 10px 14px;
            float: left;
          }
          .word1::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            left: -12px;
            top: 15px;
            border: 6px solid;
            border-color: transparent white transparent transparent;
          }
          .word2 {
            right: 3px;
            min-width: 20px;
            max-width: 240px;
            background: rgb(150 237 107);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 18px;
            color: black;
            word-break: break-word;
            position: relative;
            padding: 10px 14px;
            float: left;
          }
          .word2::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            right: -12px;
            top: 12px;
            border: 6px solid;
            border-color: transparent transparent transparent rgb(150 237 107);
          }
          .reply {
            height: 58px;
            background-color: rgb(245 245 245);
          }
        </style>
    

    html部分

      <body>
        <div class="fake" style="float: left; width:400px">
          <!-- 造假部分 -->
          <div class="phonehead">
            <!-- 手机自带头部 -->
            <div class="line1" style="text-align: left;">
              <!-- 1.1信号 -->
              <div style="height: 100%; float: left; padding: 2px ; margin: 0 2px;">
                <img src="img/信号.png" height="14px" />
              </div>
              <!-- 1.2运营商 -->
              中国移动&nbsp;&nbsp;4G
            </div>
            <div class="line1" style="text-align: center;">
              <!-- 2.时间 -->
              16:04
            </div>
            <div class="line1" style="text-align: right;">
              <!-- 3.电量 -->
              <div
                style="height: 100%; float: right; padding: 2px 0; margin: 0 2px;"
              >
                <img src="img/电量.png" height="14px" />
              </div>
            </div>
          </div>
          <div class="chathead">
            <!-- 对话框头部 -->
            <div class="line1" style="text-align: left;">
              <div
                style="height: 100%; float: left; padding: 2px ; margin: 0 15px;"
              >
                <img src="img/arrow.png" height="21px" />
              </div>
            </div>
            <div class="line1" style="text-align: center;">
              A同学
            </div>
            <div
              class="line1"
              style="text-align: right; margin-right:4px; width:30%;"
            >
              ···
            </div>
          </div>
          <div class="chat">
            <!-- 对话内容 -->
            <div class="dialog1">
              <div class="avatar1"><img src="img/a.jpg" /></div>
              <div class="word1">
                啊啊啊啊啊啊啊啊
              </div>
            </div>
            <div class="dialog2">
              <div class="word2">
                啦啦啦啦啦啦
              </div>
              <div class="avatar2"><img src="img/B.jpg" /></div>
            </div>
            <div class="dialog1">
              <div class="avatar1"><img src="img/a.jpg" /></div>
              <div class="word1">
                嘻嘻嘻嘻嘻嘻嘻嘻
              </div>
            </div>
            <div class="dialog2">
              <div class="word2">
                略略略略略
              </div>
              <div class="avatar2"><img src="img/B.jpg" /></div>
            </div>
            <div class="dialog2">
              <div class="word2">
                呼呼呼呼呼呼
              </div>
              <div class="avatar2"><img src="img/B.jpg" /></div>
            </div>
          </div>
          <div class="reply">
            <!-- 回复内容 -->
            <div>
              <img src="img/reply.png" width="400px" />
            </div>
          </div>
        </div>
      </body>
    

    待解决问题

    • 信号图标、闹钟、电量以及回复都是盗用截图里的,需要找素材
    • 语音、小程序、图片、视频
    • 等等等等
    展开全文
  • CSS模拟微信对话框

    千次阅读 2019-02-22 21:07:47
    通过border来实现小三角形,模拟微信对话框: &lt;div class="left"&gt; &lt;p&gt;你好,我是卖茶叶的&lt;/p&gt; &lt;/div&gt; &lt;div class="right"...
  • 微信小程序-弹出对话框

    千次阅读 2019-08-12 00:38:51
    对话框微信小程序的,界面交互的一种方式,其他的还有toast等。 https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html 怎么使用 下面是一个官方的使用方式,用触发时间来...
  • 微信PC端无法拖入文件

    千次阅读 2020-03-06 19:53:06
    问题:桌面文件或图片,无法拖入微信PC端,显示黑色圆圈禁止符号! 解决: 1.windows系统,按“WIN + R”出现“运行”对话框,然后在对话框中输入“regedit”,点击确定。 2.出现“注册表编辑器”对话框,按...
  • 微信小程序 实现简单弹出层

    万次阅读 2019-05-25 17:14:34
    模态对话框之所以被叫做“模态”,就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的。 那么这样一来,我们的思路就很明确了: 1. 构建一个蒙层(mask),使得背景变暗,并且阻止用户...
  • 微信的WeixinJSBridge还是很牛逼的,虽然官方文档只公布了3个功能,但是还内置的很多功能没公布,但是存在 比如自动关闭当前浏览器内置函数:WeixinJSBridge.call('closeWindow'); 直接调用即可。
  •   在聊天对话框中输入,并点击发送执行,如果代码执行成功是无法发送给对方的,能够发送给对方说明代码没执行成功。在测试的时候最好还是将消息发送给自己   我这里列出的是我自己测试成功的代码,我测试的手机...
  • 微信小程序例子——使用modal组件弹出对话框
  • 好吧,来研究一下模态对话框的性质自己DIY吧~实现思路模态对话框之所以被叫做“模态”,就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的。 那么这样一来,我们的思路就很明确了:
  • qq,微信截图隐藏对话框

    千次阅读 2017-05-16 17:27:07
    小化对话框,command+ctrl+a,截图
  • 微信小程序:自定义弹出层

    万次阅读 2018-06-13 10:55:43
    最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西…… 场面一度十分尴尬 可是得做啊,要不然产品大姐又要暴走了…… 好吧,来研究一下模态对话框的性质...
  • 1.js代码(一般情况下只调用显示对话框的函数,当点击对话框外部的时候,对话框可以消失)//显示对话框 showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, ti
  • 微信短信验证码登录教程

    万次阅读 2018-08-30 19:43:42
    第一步 打开微信 点击登录以后出现 点击 用短信验证码登录 以后出现 点击获取验证码  之后出来一个对话框 点击确定 然后过一会手机会收到一条验证码  把验证码输入进去 点击登录 会出现一个滑块...
  • iPhone 4s iOS 9.3.5 环境安装微信

    万次阅读 2019-02-19 03:08:36
    进入Appstore的“更新”-“已购项目”找到微信,点击...该版本的“微信”与此设备不兼容。”的对话框,点击“下载”。这样就会在手机上下载最新的兼容当前手机环境的微信版本了。我安装完后看到的版本是7.0.2。 ...
  • 打开微信电脑版并登陆。点击左下角的设置图标。点击“快捷按键”。点击“截取屏幕”或“打开微信”右边的白框框。在弹出的对话框中间区域点击一下,然后按CapsLock键,就会看到显示的快捷键变成了“无”,然后点击...
  • 介绍一个苹果手机微信删除记录恢复工具的下载和使用方法,该方法非常简单对于一般的手机用户都可以独立操作,仅仅需要五步就可以完成手机微信记录的恢复,无需发送数据能够有效保障用户个人隐私。
1 2 3 4 5 ... 20
收藏数 17,568
精华内容 7,027
关键字:

微信对话框