Android使用 PopupWindow 实现底部弹窗功能

一、知识点

不详细展开 popupwindow 或者视图动画的所有具体使用方式，仅仅介绍一下使用的一个大概流程和一些知识要点，具体的介绍在下面设计实现中讲述

（一）popupwindow

1. 初始化

加载弹窗的布局实例化 popupwindow 传入布局和弹窗的宽高对布局里面的控件的操作对布局本身的一些设置

// 加载弹窗的布局pwview = layoutinflater.from(this).inflate(r.layout.pw_arch_engine, null, fal)//实例化 popupwindowpopupwindow = popupwindow( pwview, viewgroup.layoutparams.match_parent, viewgroup.layoutparams.wrap_content)// 对布局里面的控件的操作initrecyclerview()// 对布局本身的一些设置popupwindow.isoutsidetouchable = truepopupwindow.istouchable = truepopupwindow.isfocusable = truepopupwindow.animationstyle = r.style.pw_bottom_anim_stylepopupwindow.tondismisslistener { backgroundalpha(1f)}

2. 展示弹窗

弹出弹窗修改背景亮度—变暗

// 弹出弹窗val rootview = layoutinflater.from(this).inflate(r.layout.activity_main,null)popupwindow.showatlocation(rootview, gravity.bottom, 0, 0)// 修改背景亮度—变暗backgroundalpha(0.7f)

3. 关闭弹窗

关闭弹窗修改背景亮度—变亮

// 关闭弹窗popupwindow.dismiss() // 修改背景亮度—变亮backgroundalpha(1f)

4. 背景亮度修改

// 控制背景亮度private fun backgroundalpha(bgalpha: float) { val lp = window.attributes lp.alpha = bgalpha //0.0-1.0 window.attributes = lp}

（二）视图动画

使用 xml 标签定义并使用视图动画：

1. xml 标签

alpha 渐变透明度scale 渐变尺寸伸缩translate 画面位置移动rotate 画面转移旋转t 定义动画集

2. 给 popupwindow 添加动画

popupwindow.animationstyle = r.style.pw_bottom_anim_style

二、界面效果

三、设计实现

（一）需求分析

点击主页按钮弹出底部弹窗点击弹窗引擎，以toast显示引擎名称并关闭弹窗点击弹窗外部可以关闭弹窗

（二）文件列表

（三）布局设计

1. 主界面样式设计

（activity_main.xml）

主界面的样式十分简单，就是一个普通的按钮

<?xml version="1.0" encoding="utf-8"?><linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 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" tools:context=".mainactivity"> <button  android:id="@+id/btn"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:layout_margin="14dp"  android:text="点击——底部弹窗"  android:textcolor="@color/white"/></linearlayout>

2. 弹窗样式设计

（pw_arch_engine.xml）

弹窗样式的布局也十分简单，就是一个基本的线性布局的 recyclerview
值得注意的是，最基本的 layoutmanager 可以通过指定 app:layoutmanager 来实现

<?xml version="1.0" encoding="utf-8"?><linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white"> <androidx.recyclerview.widget.recy文化的意义clerview  android:id="@+id/recyclerview"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:overscrollmode="never"  app:layoutmanager="androidx.recyclerview.widget.linearlayoutmanager" /></linearlayout>

3. 弹窗列表 item 样式设计

（item_arch_engine.xml）

列表单项，因为是 demo 示例，所以简单地用一个横向布局，内置一个图标 icon 和一个名称 textview 来进行展示

<?xml version="1.0" encoding="utf-8"?><linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center"> <imageview  android:id="@+id/iconiv"  android:layout_width="36dp"  android:layout_height="36dp"  android:layout_margin="14dp" />   <textview  android:id="@+id/titletv"  android:layout_width="0dp"  android:layout_height="wrap_content"  android:layout_weight="1"  android:layout_marginend="36dp"  android:maxlines="1"  android:ellipsize = "end"  android:textcolor="@color/black"  android:textsize="16sp" /></linearlayout>

4. 弹窗动画设计

（pw_bottom_in.xml 与 pw_bottom_out.xml）

<!--pw_bottom_in.xml--><?xml version="1.0" encoding="utf-8"?><t xmlns:android="http://schemas.android.com/apk/res/android"> <!--  平移动画  duration--动画持续时间  android:fromxdelta,android:fromydelta--起始 x,y  android:toxdelta,android:toydelta--终点 x,y --> <translate  android:duration="300"  android:fromxdelta="0"  android:fromydelta="1000"  android:toxdelta="0"  android:toydelta="0" /></t><!--pw_bottom_out.xml--><?xml version="1.0" encoding="utf-8"?><t xmlns:android="http://schemas.android.com/apk/res/android"> <translate  android:duration="300"  android:fromxdelta="0"  android:fromydelta="0"  android:toxdelta="0"  android:toydelta="1000" /></t>

（四）数据存储与加载

1. 数据存储（uidata.kt 与 arrays.xml）

// 搜索引擎的数据实体类，包含名称和 icon 资源 id 两个属性data class archengine( val title : string, val res : int)

以字符串数组的形式存储搜索引擎的名称以及对应的图标资源

<?xml version="1.0" encoding="utf-8"?><resources> <string-array name="arch_engine_title_list">  <item>百度</item>  <item>搜狗</item>  <item>360</item>  <item>必应</item>  <item>神马</item> </string-array> <string-array name="arch_engine_res_list">  <item>@drawable/ic_baidu</item>  <item>@drawable/ic_sougou</item>  <item>@drawable/ic_360</item>  <it黯乡魂追旅思em>@drawable/ic_bing</item>  <item>@drawable/ic_shenma</item> </string-array></resources>

2. 数据加载（mainactivity.kt）

private lateinit var engines : mutablelist<archengine>private fun initdata() {// 初始化引擎列表 engines = mutablelistof()// 从 arrays.xml 获取引擎名称数组 val titlelist = resources.getstringarray(r.array.arch_engine_title_list)// 由于资源 id 是整型，但是在 arrays.xml 中存储的是字符串，// 所以这里先初始化一个资源 id 的数组，元素类型为整型 val iconreslist : mutablelist<int> = mutablelistof() // 通过类型数组加载相关引擎资源列表，遍历其中元素，传入索引值， // 通过调用 getresourceid(index,0) 获取 icon 的资源 id 存入刚才初始化的 id 数组中 val reslist: typedarray =  resources.obtaintypedarray(r.array.arch_engine_res_list) for (index in 0 until reslist.length()) {  iconreslist.add(reslist.getresourceid(index,0)) } // 记得及时调用 recycle() 回收 typedarray 对象 reslist.recycle()// 循环，用获得的 title 和 id 生成对应的搜索引擎对象，存入搜索引擎列表中 for (index in titlelist.indices){  if (index < iconreslist.size){   engines.add(archengine(titlelist[index],iconreslist[index]))  } }}

（五）剩余内容

上述提及的内容代码，此处将不再进行展示；因为重点是介绍底部弹窗的实现，弹窗布局中的 recyclerview 的实现就不过多介绍

1. adapterforarchengine.kt 弹窗列表适配器

class adapterforarchengine (datalist: mutablelist<archengine>) :  recyclerview.adapter<adapterforarchengine.viewholder>() { // 搜索引擎数据集合 private val mdatalist: mutablelist<archengine> = mutablelistof() init {  // 初始化 主要是对数据进行初始化  mdatalist.clear()  mdatalist.addall(datalist) } // viewholder 方便 item 复用 class viewholder(view: view) : recyclerview.viewholder(view) {} // 获取列表 item 数量 override fun getitemcount(): int {  return mdatalist.size }  // 绑定视图与数据 override fun onbindviewholder(holder: viewholder, position: int) {  val engine: archengine = mdatalist[position]  holder.itemview.titletv.text = engine.title  holder.itemview.iconiv.timageresource(engine.res)  holder.itemview.tonclicklistener {   listener?.click(engine)  } } // 创建 viewholder 实例 override fun oncreateviewholder(parent: viewgroup, viewtype: int): viewholder {  val view: view = layoutinflater.from(parent.context).inflate(r.layout.item_arch_engine, parent, fal)  return viewholder(view) } // 点击事件 private var listener :onitemclicklistener? = null interface onitemclicklistener {  fun click(engine: archengine) } fun tonitemclicklistener(listener: onitemclicklistener) {  this.listener = listener }}

2. mainactivity.kt

class mainactivity : appcompatactivity() { private lateinit var engines : mutablelist<archengine> private lateinit var popupwindow : popupwindow private lateinit var pwview : view private lateinit var madapter : adapterforarchengine override fun oncreate(savedinstancestate: bundle?) {  super.oncreate(savedinstancestate)  tcontentview(r.layout.activity_main)  // 初始化数据  initdata()  // 初始化 popupwindow  initpopupwindow()  // 按钮点击事件  btn.tonclicklistener {   // 显示弹窗   showpopwindow()  } } private fun 黄河边的英雄故事initpopupwindow() {  // 加载弹窗布局  pwview = layoutinflater.from(this).inflate(r.layout.pw_arch_engine, null, fal)  // 实例化 popupwindow  popupwindow = popupwindow(    pwview,    viewgroup.layoutparams.match_parent,    viewgroup.layoutparams.wrap_content  )  // 初始化弹窗列表  initrecyclerview()  // 设置 popupwindow  popupwindow.isoutsidetouchable = true  popupwindow.istouchable = true  popupwindow.isfocusable = true  // 加载弹窗动画  popupwindow.animationstyle = r.style.pw_bottom_anim_style  // 设置弹窗关闭监听——恢复亮度  popupwindow.tondismisslistener {   backgroundalpha(1f)  } } private fun showpopwindow() {apple tree  val rootview = layoutinflater.from(this).inflate(    r.layout.activity_main,    null  )  // 设置弹窗位置  popupwindow.showatlocation(rootview, gravity.bottom, 0, 0)  // 使得背景亮度变暗  backgroundalpha(0.7f) } // 控制背景亮度 private fun backgroundalpha(bgalpha: float) {  val lp = window.attributes  lp.alpha = bgalpha //0.0-1.0  window.attributes = lp } private fun initrecyclerview() {  madapter = adapterforarchengine(engines)  pwview.recyclerview?.adapter = madapter  madapter.tonitemclicklistener(object : adapterforarchengine.onitemclicklistener{   override fun click(engine: archengine) {    toast.maketext(this@mainac最近的时事热点tivity, engine.title, toast.length_short).show()    popupwindow.dismiss()   }  }) } private fun initdata() {  // 初始化引擎列表  engines = mutablelistof()  // 从 arrays.xml 获取引擎名称数组  val titlelist = resources.getstringarray(r.array.arch_engine_title_list)  // 由于资源 id 是整型，但是在 arrays.xml 中存储的是字符串，  // 所以这里先初始化一个资源 id 的数组，元素类型为整型  val iconreslist : mutablelist<int> = mutablelistof()  // 通过类型数组加载相关引擎资源列表，遍历其中元素，传入索引值，  // 通过调用 getresourceid(index,0) 获取 icon 的资源 id 存入刚才初始化的 id 数组中  val reslist: typedarray =    resources.obtaintypedarray(r.array.arch_engine_res_list)  for (index in 0 until reslist.length()) {   iconreslist.add(reslist.getresourceid(index,0))  }  // 记得及时调用 recycle() 回收 typedarray 对象  reslist.recycle()  // 循环，用获得的 title 和 id 生成对应的搜索引擎对象，存入搜索引擎列表中  for (index in titlelist.indices){   if (index < iconreslist.size){    engines.add(archengine(titlelist[index],iconreslist[index]))   }  } }}

到此这篇关于android使用 popupwindow 实现底部弹窗功能的文章就介绍到这了,更多相关android popupwindow底部弹窗内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！