前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >让你一目了然!—PopupWindow

让你一目了然!—PopupWindow

作者头像
下码看花
发布2019-09-06 09:19:30
1.2K0
发布2019-09-06 09:19:30
举报
文章被收录于专栏:AndroidStudio初识

前言

我们的基础控件之路马上就要共同完成啦,相信跟着我们坚持学习的你一定收获颇丰,那么我们本篇继续介绍 Android的基础控件 PopupWindow这个控件,花粉们一定很好奇,这个控件为什么不是以 View结尾的呢?那么就让我们一起来学习吧~

简介

很多花粉在使用各种类型的App中都会遇到这个控件,例如电商类型商品详情右上角的三个点(某东、某宝),又或者是微信的右上角加号,而我们本篇文章会分四部分对其进行讲解,赶紧开始我们的学习之旅吧~

  1. PopupWindowDialog 的区别?
  2. 重要方法。
  3. 使用。
  4. PopupWindow 添加动画。

1. PopupWindow 与 Dialog 的区别?

PopupWindowDialog 最关键的区别是 Dialog 不方便我们去指定弹窗的显示位置,只能默认的显示在页面中间。这里说的不容易指定位置是没有方便的系统的接口来控制 Dialog 的显示位置,当然你可以使用 WindowManager 来指定 Dailog 的显示位置,但对于 PopupWindow 你可以通过系统提供的接口随意定义显示位置,使用更灵活方便。

2. PopupWindow 的重要方法

上图是 PopupWindow 类的继承关系,可以看出 PopupWindow并不是继承自 View,所以它当然不是以 View作为结尾的了~

常用构造
代码语言:javascript
复制
public PopupWindow(View contentView, int width, int height, boolean focusable)//PopupWindow 的其他构造方法最终都会调用这个最终的构造方法。
 //contentView --> PopupWindow 最终显示的内容 //width --> PopupWindow 宽 //height --> PopupWindow 高 //focusable --> PopupWindow 是否获取焦点

创建 PopupWindow 必须要是三个条件,缺少一个无法显示:

代码语言:javascript
复制
1. void setHeight (int height) // 因为PopupWindow没有默认布局所以必须指定宽高2. void setWidth (int width) //因为PopupWindow没有默认布局所以必须指定宽高3. void setContentView (View contentView) //PopupWindow 要显示的内容

在设置宽高的时候可以使用固定的 px 值,或者使用 wrap_contentmatch_parent

代码语言:javascript
复制
LayoutParams.WRAP_CONTENTLayoutParams.MATCH_PARENT

3.使用

显示Popupwindow

显示PopupWindow可以分为两种方式:

  1. 附着某个控件 showAsDropDown
  2. 设置屏幕坐标 showAtLocation
附着在某个控件上(相对于这个控件本身)
代码语言:javascript
复制
public void showAsDropDown(View anchor) // 传入的View对象 anchor 相当于锚点,我们要显示布局会相对于,anchor 的位置进行显示public void showAsDropDown(View anchor, int xoff, int yoff) // 传入的View对象 anchor 相当于锚点,我们要显示布局会相对于,anchor 的位置进行显示public void showAsDropDown(View anchor, int xoff, int yoff, int gravity) // 传入的View对象 anchor 相当于锚点,我们要显示布局会相对于,anchor 的位置进行显示

页面中只有一个 Button ,我们创建的 PopupWindow 会把这 Button 传入到 PopupWindowshow() 方法当作上面所说的那个锚点 Viewanchor

看看运行后点击按钮效果:

看有点奇怪,其实是只传一个参数,没有传入位置信息,默认显示在左下方。

我们试着传入位置信息,代码如下:

代码语言:javascript
复制
popupWindow.showAsDropDown(button,0,0, Gravity.RIGHT);

内容被指定为右,所以为右下方。

代码语言:javascript
复制
popupWindow.showAsDropDown(button,100,50);

这种方法就可根据锚点随意指定位置,如图清晰可见:

设置屏幕坐标的方式(相对于当前窗口)

看上图,使用 showAtLocaton() 方法显示 PopupWindow ,运行后看一看结果:

上面我们的代码对 x, y 值都进行设置,但只有 y 轴的位置有效果,说明当 PopupWindow 的大小,或者位置超出屏幕,无论设置 x, y 是多少都不会起作用。

隐藏PopupWindow
代码语言:javascript
复制
void dismiss ()//与Dialog相同 直接调用
外部被点击取消
代码语言:javascript
复制
//如果为true点击PopupWindow外部区域可以取消PopupWindowvoid setOutsideTouchable (boolean touchable) // 设置外部是否可被点击boolean isOutsideTouchable ()   

4.PopupWindow 添加动画

我们可以通过 xml 文件来定义 PopupWindow 进入退出的动画。然后调用设置动画的方法来为 PopupWindow添加动画。设置动画的方法为:

代码语言:javascript
复制
void setAnimationStyle (int animationStyle)//传入的就是xml动画资源

这里简单说一下创建 xml 动画的步骤:

  1. 在项目的资源文件夹下创建 anim/ 文件夹,专放 xml动画资源。

在图中可以看到,我们创建了两个 xml 资源描述 PopupWindow进入动画与退出动画。

代码语言:javascript
复制
<!--pop_enter.xml 文件--><?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <scale        android:duration="200"        android:fromXScale="0.0"        android:fromYScale="0.0"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:pivotX="100%"        android:pivotY="0%"        android:toXScale="1.0"        android:toYScale="1.0">
    </scale></set>
代码语言:javascript
复制
<!--pop_exit.xml 文件--><?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <alpha        android:duration="200"        android:fromAlpha="1.0"        android:toAlpha="0.0" /></set>
  1. 在资源目录 vaules 目录的 style.xml 文件中,定义animation style,主要目的是将我们刚才定义的两个动画资源进行整合并被系统的 WindowManager(主要负责View的显示) 所引用。
代码语言:javascript
复制
<style name="popupwindow_anim_style">    <item name="android:windowEnterAnimation">@anim/popup_enter</item>    <item name="android:windowExitAnimation">@anim/pouup_exit</item></style>
  1. 代码应用动画资源

定义好Animation Style,我们就可以在代码中直接使用了。

简单的给 PopupWindow 添加动画就完成了。

结语

是不是已经迫不及待的想自己实现微信或者其他App类型的 PopWindow样式了!那还等什么,赶紧去实现吧~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 下码看花 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 简介
    • 1. PopupWindow 与 Dialog 的区别?
      • 2. PopupWindow 的重要方法
        • 3.使用
          • 4.PopupWindow 添加动画
          • 结语
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档