新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)怎么在Android中利用PopupWindow實(shí)現(xiàn)一個(gè)底部彈窗功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。
(一)PopupWindow
1. 初始化
加載彈窗的布局
實(shí)例化 PopupWindow 傳入布局和彈窗的寬高
對布局里面的控件的操作
對布局本身的一些設(shè)置
// 加載彈窗的布局 pwView = LayoutInflater.from(this).inflate(R.layout.pw_search_engine, null, false) //實(shí)例化 PopupWindow popupWindow = PopupWindow( pwView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ) // 對布局里面的控件的操作 initRecyclerView() // 對布局本身的一些設(shè)置 popupWindow.isOutsideTouchable = true popupWindow.isTouchable = true popupWindow.isFocusable = true popupWindow.animationStyle = R.style.pw_bottom_anim_style popupWindow.setOnDismissListener { 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. 關(guān)閉彈窗
關(guān)閉彈窗
修改背景亮度—變亮
// 關(guān)閉彈窗 popupWindow.dismiss() // 修改背景亮度—變亮 backgroundAlpha(1f)
4. 背景亮度修改
// 控制背景亮度 private fun backgroundAlpha(bgAlpha: Float) { val lp = window.attributes lp.alpha = bgAlpha //0.0-1.0 window.attributes = lp }
(二)視圖動(dòng)畫
使用 XML 標(biāo)簽定義并使用視圖動(dòng)畫:
1. XML 標(biāo)簽
alpha 漸變透明度
scale 漸變尺寸伸縮
translate 畫面位置移動(dòng)
rotate 畫面轉(zhuǎn)移旋轉(zhuǎn)
set 定義動(dòng)畫集
2. 給 PopupWindow 添加動(dòng)畫
popupWindow.animationStyle = R.style.pw_bottom_anim_style
二、界面效果
三、設(shè)計(jì)實(shí)現(xiàn)
(一)需求分析
點(diǎn)擊主頁按鈕彈出底部彈窗
點(diǎn)擊彈窗引擎,以Toast顯示引擎名稱并關(guān)閉彈窗
點(diǎn)擊彈窗外部可以關(guān)閉彈窗
(二)文件列表
(三)布局設(shè)計(jì)
1. 主界面樣式設(shè)計(jì)
(activity_main.xml)
主界面的樣式十分簡單,就是一個(gè)普通的按鈕
2. 彈窗樣式設(shè)計(jì)
(pw_search_engine.xml)
彈窗樣式的布局也十分簡單,就是一個(gè)基本的線性布局的 RecyclerView
值得注意的是,最基本的 layoutManager 可以通過指定app:layoutManager 來實(shí)現(xiàn)
3. 彈窗列表 item 樣式設(shè)計(jì)
(item_search_engine.xml)
列表單項(xiàng),因?yàn)槭?Demo 示例,所以簡單地用一個(gè)橫向布局,內(nèi)置一個(gè)圖標(biāo) icon 和一個(gè)名稱 TextView 來進(jìn)行展示
4. 彈窗動(dòng)畫設(shè)計(jì)
(pw_bottom_in.xml 與 pw_bottom_out.xml)
(四)數(shù)據(jù)存儲(chǔ)與加載
1. 數(shù)據(jù)存儲(chǔ)(UIData.kt 與 arrays.xml)
// 搜索引擎的數(shù)據(jù)實(shí)體類,包含名稱和 icon 資源 id 兩個(gè)屬性 data class SearchEngine( val title : String, val res : Int )
以字符串?dāng)?shù)組的形式存儲(chǔ)搜索引擎的名稱以及對應(yīng)的圖標(biāo)資源
- 百度
- 搜狗
- 360
- 必應(yīng)
- 神馬
- @drawable/ic_baidu
- @drawable/ic_sougou
- @drawable/ic_360
- @drawable/ic_bing
- @drawable/ic_shenma
2. 數(shù)據(jù)加載(MainActivity.kt)
private lateinit var engines : MutableListprivate fun initData() { // 初始化引擎列表 engines = mutableListOf() // 從 arrays.xml 獲取引擎名稱數(shù)組 val titleList = resources.getStringArray(R.array.search_engine_title_list) // 由于資源 id 是整型,但是在 arrays.xml 中存儲(chǔ)的是字符串, // 所以這里先初始化一個(gè)資源 id 的數(shù)組,元素類型為整型 val iconResList : MutableList = mutableListOf() // 通過類型數(shù)組加載相關(guān)引擎資源列表,遍歷其中元素,傳入索引值, // 通過調(diào)用 getResourceId(index,0) 獲取 icon 的資源 id 存入剛才初始化的 id 數(shù)組中 val resList: TypedArray = resources.obtainTypedArray(R.array.search_engine_res_list) for (index in 0 until resList.length()) { iconResList.add(resList.getResourceId(index,0)) } // 記得及時(shí)調(diào)用 recycle() 回收 TypedArray 對象 resList.recycle() // 循環(huán),用獲得的 title 和 id 生成對應(yīng)的搜索引擎對象,存入搜索引擎列表中 for (index in titleList.indices){ if (index < iconResList.size){ engines.add(SearchEngine(titleList[index],iconResList[index])) } } }
(五)剩余內(nèi)容
上述提及的內(nèi)容代碼,此處將不再進(jìn)行展示;因?yàn)橹攸c(diǎn)是介紹底部彈窗的實(shí)現(xiàn),彈窗布局中的 RecyclerView 的實(shí)現(xiàn)就不過多介紹
1. AdapterForSearchEngine.kt 彈窗列表適配器
class AdapterForSearchEngine (dataList: MutableList) : RecyclerView.Adapter () { // 搜索引擎數(shù)據(jù)集合 private val mDataList: MutableList = mutableListOf() init { // 初始化 主要是對數(shù)據(jù)進(jìn)行初始化 mDataList.clear() mDataList.addAll(dataList) } // ViewHolder 方便 item 復(fù)用 class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {} // 獲取列表 item 數(shù)量 override fun getItemCount(): Int { return mDataList.size } // 綁定視圖與數(shù)據(jù) override fun onBindViewHolder(holder: ViewHolder, position: Int) { val engine: SearchEngine = mDataList[position] holder.itemView.titleTV.text = engine.title holder.itemView.iconIV.setImageResource(engine.res) holder.itemView.setOnClickListener { listener?.click(engine) } } // 創(chuàng)建 ViewHolder 實(shí)例 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { val view: View = LayoutInflater.from(parent.context).inflate(R.layout.item_search_engine, parent, false) return ViewHolder(view) } // 點(diǎn)擊事件 private var listener :OnItemClickListener? = null interface OnItemClickListener { fun click(engine: SearchEngine) } fun setOnItemClickListener(listener: OnItemClickListener) { this.listener = listener } }
2. MainActivity.kt
class MainActivity : AppCompatActivity() { private lateinit var engines : MutableListprivate lateinit var popupWindow : PopupWindow private lateinit var pwView : View private lateinit var mAdapter : AdapterForSearchEngine override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // 初始化數(shù)據(jù) initData() // 初始化 PopupWindow initPopupWindow() // 按鈕點(diǎn)擊事件 btn.setOnClickListener { // 顯示彈窗 showPopWindow() } } private fun initPopupWindow() { // 加載彈窗布局 pwView = LayoutInflater.from(this).inflate(R.layout.pw_search_engine, null, false) // 實(shí)例化 PopupWindow popupWindow = PopupWindow( pwView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ) // 初始化彈窗列表 initRecyclerView() // 設(shè)置 popupWindow popupWindow.isOutsideTouchable = true popupWindow.isTouchable = true popupWindow.isFocusable = true // 加載彈窗動(dòng)畫 popupWindow.animationStyle = R.style.pw_bottom_anim_style // 設(shè)置彈窗關(guān)閉監(jiān)聽——恢復(fù)亮度 popupWindow.setOnDismissListener { backgroundAlpha(1f) } } private fun showPopWindow() { val rootView = LayoutInflater.from(this).inflate( R.layout.activity_main, null ) // 設(shè)置彈窗位置 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 = AdapterForSearchEngine(engines) pwView.recyclerView?.adapter = mAdapter mAdapter.setOnItemClickListener(object : AdapterForSearchEngine.OnItemClickListener{ override fun click(engine: SearchEngine) { Toast.makeText(this@MainActivity, engine.title, Toast.LENGTH_SHORT).show() popupWindow.dismiss() } }) } private fun initData() { // 初始化引擎列表 engines = mutableListOf() // 從 arrays.xml 獲取引擎名稱數(shù)組 val titleList = resources.getStringArray(R.array.search_engine_title_list) // 由于資源 id 是整型,但是在 arrays.xml 中存儲(chǔ)的是字符串, // 所以這里先初始化一個(gè)資源 id 的數(shù)組,元素類型為整型 val iconResList : MutableList = mutableListOf() // 通過類型數(shù)組加載相關(guān)引擎資源列表,遍歷其中元素,傳入索引值, // 通過調(diào)用 getResourceId(index,0) 獲取 icon 的資源 id 存入剛才初始化的 id 數(shù)組中 val resList: TypedArray = resources.obtainTypedArray(R.array.search_engine_res_list) for (index in 0 until resList.length()) { iconResList.add(resList.getResourceId(index,0)) } // 記得及時(shí)調(diào)用 recycle() 回收 TypedArray 對象 resList.recycle() // 循環(huán),用獲得的 title 和 id 生成對應(yīng)的搜索引擎對象,存入搜索引擎列表中 for (index in titleList.indices){ if (index < iconResList.size){ engines.add(SearchEngine(titleList[index],iconResList[index])) } } } }
關(guān)于怎么在Android中利用PopupWindow實(shí)現(xiàn)一個(gè)底部彈窗功能就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
本文題目:怎么在Android中利用PopupWindow實(shí)現(xiàn)一個(gè)底部彈窗功能-創(chuàng)新互聯(lián)
當(dāng)前鏈接:http://www.dlmjj.cn/article/dojesg.html