Skip to content

PopupWindow

Jump to bottom
xuexiangjys edited this page Apr 26, 2022 · 9 revisions

弹出窗是Android中非常重要的组件，它可以给用户予以信息提示、选择，增强用户交互体验。

XUIPopup

包括简单的自定义布局的XUIPopup以及内嵌ListView的XUIListPopup和XUISimplePopup。可定义向上弹出和向下弹出，并且弹出的指示箭头是自适应的。

XUIPopup

  • 演示效果

  • 使用案例
mNormalPopup = new XUIPopup(getContext());
TextView textView = new TextView(getContext());
textView.setLayoutParams(mNormalPopup.generateLayoutParam(
        DensityUtils.dp2px(getContext(), 250),
        WRAP_CONTENT
));
textView.setLineSpacing(DensityUtils.dp2px(4), 1.0f);
int padding = DensityUtils.dp2px(20);
textView.setPadding(padding, padding, padding, padding);
textView.setText("Popup 可以设置其位置以及显示和隐藏的动画");
textView.setTextColor(ContextCompat.getColor(getContext(), R.color.xui_config_color_sub_title_common_explain_text));
mNormalPopup.setContentView(textView);
mNormalPopup.setOnDismissListener(new PopupWindow.OnDismissListener() {
    @Override
    public void onDismiss() {
        mBtnCommonPopup.setText("显示普通浮层");
    }
});
mNormalPopup.setAnimStyle(XUIPopup.ANIM_GROW_FROM_CENTER);
mNormalPopup.setPreferredDirection(XUIPopup.DIRECTION_TOP);
mNormalPopup.show(v);
  • 常用方法

1.设置自定义布局：setContentView(View root)

2.设置弹窗弹出的动画：setAnimStyle(int animStyle)

3.设置消失的监听：setOnDismissListener(PopupWindow.OnDismissListener listener)

4.设置弹出的方向：setPreferredDirection(int preferredDirection)

XUIListPopup

  • 演示效果

  • 使用案例
String[] listItems = new String[]{
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5",
};

XUISimpleAdapter adapter = XUISimpleAdapter.create(getContext(), listItems);
mListPopup = new XUIListPopup(getContext(), adapter);
mListPopup.create(DensityUtils.dp2px(200), DensityUtils.dp2px(150), new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        ToastUtils.toast("Item " + (i + 1));
        mListPopup.dismiss();
    }
});
mListPopup.setOnDismissListener(new PopupWindow.OnDismissListener() {
    @Override
    public void onDismiss() {
        mBtnListPopup.setText("显示列表浮层");
    }
});
mListPopup.setAnimStyle(XUIPopup.ANIM_GROW_FROM_CENTER);
mListPopup.setPreferredDirection(XUIPopup.DIRECTION_TOP);
mListPopup.show(v);
  • 常用方法

1.创建弹窗：

```
T create(int width, int maxHeight, AdapterView.OnItemClickListener onItemClickListener)
T create(int width, int maxHeight)
T create(int width)
```

2.设置是否有分割线：T setHasDivider(boolean hasDivider)

3.设置分割线的资源：T setDivider(Drawable divider)

4.设置分割线的高度：T setDividerHeight(int dividerHeight)

XUISimplePopup

  • 演示效果

  • 使用案例
mMenuPopup = new XUISimplePopup(getContext(), DemoDataProvider.menuItems)
        .create(new XUISimplePopup.OnPopupItemClickListener() {
            @Override
            public void onItemClick(XUISimpleAdapter adapter, AdapterItem item, int position) {
                ToastUtils.toast(item.getTitle().toString());
            }
        });
mMenuPopup.showDown(v);
  • 常用方法

1.设置条目点击监听：T setOnPopupItemClickListener(final OnPopupItemClickListener onItemClickListener)

2.向下显示：showDown(View v)

3.向上显示：showUp(View v)

EasyPopup

对系统的PopupWindow进行的简单代理封装，方便PopupWindow的自定义和操作，支持上、下、左、右4种弹出位置。自定义的PopupWindow可继承BaseCustomPopup轻松实现。

  • 使用案例
mCirclePop = new EasyPopup(getContext())
        .setContentView(R.layout.layout_friend_circle_comment)
        .setFocusAndOutsideEnable(true)
        .createPopup();

TextView tvZan = mCirclePop.getView(R.id.tv_zan);
TextView tvComment = mCirclePop.getView(R.id.tv_comment);
tvZan.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         ToastUtils.toast("点赞");
         mCirclePop.dismiss();
     }
 });

tvComment.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        ToastUtils.toast("评论");
        mCirclePop.dismiss();
    }
});
mCirclePop.showAtAnchorView(mBtnCircleComment, VerticalGravity.CENTER, HorizontalGravity.LEFT, 0, 0);
  • 常用方法

1.设置自定义布局内容

```
T setContentView(View contentView)；
T setContentView(int layoutId)；
T setContentView(View contentView, int width, int height)
```

2.设置宽高

```
T setWidth(int width)；
T setHeight(int height)；
```

3.设置显示的对齐方式

```
T setVerticalGravity(@VerticalGravity int verticalGravity)；
T setHorizontalGravity(@VerticalGravity int horizontalGravity)；
```

4.设置动画的样式

```
T setAnimationStyle(@StyleRes int animationStyle)；
```

5.设置是否可以点击PopupWindow之外的地方dismiss

```
T setFocusAndOutsideEnable(boolean focusAndOutsideEnable)
```

6.设置监听

```
T setOnDismissListener(PopupWindow.OnDismissListener listener)
T setOnAttachedWindowListener(OnAttachedWindowListener listener)
```

7.弹窗显示

（1）相对anchor view显示：

void showAtAnchorView(@NonNull View anchor, @VerticalGravity final int vertGravity, @HorizontalGravity int horizGravity, int x, int y)；

（2）PopupWindow自带的显示方法：

void showAsDropDown(View anchor, int offsetX, int offsetY)；

ViewTooltip

控件提示弹出窗，可自定义弹出的位置，持续时间以及样式。

  • 演示效果

  • 使用案例
ViewTooltip
    .on(mEditText)
    .color(Color.BLACK)
    .position(ViewTooltip.Position.LEFT)
    .text("Some tooltip with long text")
    .clickToHide(true)
    .autoHide(false, 0)
    .animation(new ViewTooltip.FadeTooltipAnimation(500))
    .onDisplay(new ViewTooltip.ListenerDisplay() {
        @Override
        public void onDisplay(View view) {
            ToastUtils.toast("onDisplay");
        }
    })
    .onHide(new ViewTooltip.ListenerHide() {
        @Override
        public void onHide(View view) {
            ToastUtils.toast("onHide");
        }
    })
    .show();
  • 常用方法

1.创建并设置提示控件依附的View：ViewTooltip on(final View view)

2.设置提示显示的相对位置：position(Position position)

3.设置自定义提示布局：customView(View customView)

4.设置提示持续的时间：duration(long duration)

5.设置提示框的背景颜色：color(int color)

6.设置显示和隐藏的监听：

```
onDisplay(ListenerDisplay listener)；
onHide(ListenerHide listener)；
```

7.设置间隔的距离：padding(int left, int top, int right, int bottom)

8.设置显示和隐藏的动画：animation(TooltipAnimation tooltipAnimation)

9.设置提示的文字：text(String text)

10.设置圆角的角度：corner(int corner)

11.设置提示文字的颜色：textColor(int textColor)

12.设置提示文字的字体大小：textSize(int unit, float textSize)

13.设置是否点击隐藏：clickToHide(boolean clickToHide)

CookieBar

顶部和底部信息消息显示条, 类似Snackbar,支持自定义布局。

  • 演示效果

  • 使用案例
CookieBar.builder(getActivity())
    .setTitle(R.string.cookie_title)
    .setIcon(R.mipmap.ic_launcher)
    .setMessage(R.string.cookie_message)
    .setLayoutGravity(Gravity.BOTTOM)
    .setAction(R.string.cookie_action, new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            ToastUtils.toast("点击消失！");
        }
    })
    .show();
    
CookieBar.builder(getActivity())
    .setTitle(R.string.cookie_title)
    .setMessage(R.string.cookie_message)
    .setDuration(3000)
    .setBackgroundColor(R.color.colorPrimary)
    .setActionColor(android.R.color.white)
    .setTitleColor(android.R.color.white)
    .setAction(R.string.cookie_action, new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            ToastUtils.toast("点击消失！");
        }
    })
    .show();

XToast

自定义Toast样式

  • 使用案例
XToast.error(getContext(), R.string.error_message).show();
XToast.success(getContext(), R.string.success_message).show();
XToast.info(getContext(), R.string.info_message).show();
XToast.warning(getContext(), R.string.warning_message).show();
XToast.normal(getContext(), R.string.normal_message_without_icon).show();

简介

组件使用

资源样式

工具类使用

拓展

Clone this wiki locally