Android ChipGroup收起折疊效果實(shí)現(xiàn)詳解
一、先上效果圖
借用某東App的效果,如下。
折疊時(shí)的效果:
展開時(shí)的效果:
二、ChipGroup和Chip
chipGroup和chip之前寫過(guò)博客,可移步Android Material 常用組件,看關(guān)于chip和chipGroup的部分,建議一定要看,因?yàn)槔锩孢€挺多坑的。這里簡(jiǎn)單貼下chip和chipGroup的代碼:
ChipGroup:
<com.google.android.material.chip.ChipGroup android:id="@+id/chip_group" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/size_15dp" app:chipSpacingHorizontal="@dimen/size_9dp" app:chipSpacingVertical="@dimen/size_8dp" app:singleSelection="true" />
Chip: 需要定義三種Chip的布局:箭頭朝上的、箭頭朝下的、普通展示文字的,如果能復(fù)用定義一種也行,這里簡(jiǎn)單貼一種:
<?xml version="1.0" encoding="utf-8"?> <com.google.android.material.chip.Chip xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/chip" style="@style/Widget.MaterialComponents.Chip.Filter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/login_model" android:textSize="@dimen/font_12sp" android:theme="@style/Theme.MaterialComponents" app:checkedIconVisible="false" app:chipBackgroundColor="@color/printer_unused_reason" app:chipMinHeight="@dimen/size_24dp" app:chipMinTouchTargetSize="0dp" />
三、在ChipGroup中動(dòng)態(tài)添加Chip
這個(gè)比較簡(jiǎn)單,inflate后add即可,如下:
//添加Chip for (index in 0 until size) { val chip = layoutInflater.inflate( R.layout.common_chip_end, mViewBind.chipGroup, false) as Chip chip.text = mWordList[index] //動(dòng)態(tài)添加ID chip.id = index mViewBind.chipGroup.addView(chip) }
四、找到每個(gè)Chip位于的行數(shù)
這個(gè)需求一般會(huì)要求顯示固定的行數(shù)(比如效果圖中某東App的二行),然后顯示有向下箭頭的Chip,點(diǎn)擊后可以展開,那么如何找到固定行數(shù)最后一行的最后一個(gè)Chip呢? 不用擔(dān)心ChipGruop
(的父類)有給我們提供Api:
/** Gets the row index of the child, primarily for accessibility. */ public int getRowIndex(@NonNull View child) { Object index = child.getTag(R.id.row_index_key); if (!(index instanceof Integer)) { return -1; } return (int) index; }
于是當(dāng)我們將添加到ChipGroup的Chip調(diào)用該Api后就知道每個(gè)Chip位于哪一行了。
五、實(shí)現(xiàn)思路
我們已經(jīng)找到每個(gè)Chip位于第幾行,自然我們就知道固定行數(shù)的最后一行的最后一個(gè)Chip是誰(shuí),我們替換該Chip為向下箭頭的Chip就可以完成折疊的效果。
展開的效果就很簡(jiǎn)單了,加上向上箭頭的Chip即可。
六、需要注意的問(wèn)題
1、Chip的復(fù)用問(wèn)題
很遺憾,chip不能復(fù)用,每次展開和折疊都會(huì)先清除ChipGroup中的Chip然后再添加,如果邊清除邊添加同一個(gè)Chip就會(huì)報(bào)錯(cuò),所以清除所有Chip后還是要用inflate重新創(chuàng)建新的Chip。
//清除 mViewBind.chipGroup.removeAllViews() //重新inflate val chip = layoutInflater.inflate( R.layout.common_chip_end, mViewBind.chipGroup, false) as Chip //添加 mViewBind.chipGroup.addView(endChip)
2、Chip的ID設(shè)置
如果在for循環(huán)中添加chip,可以直接用Chip的數(shù)據(jù)源的索引(要展示的文本集合的索引),這樣我們獲取Chip的內(nèi)容就很簡(jiǎn)單。如果是一些特殊的Chip,我們可以單獨(dú)inflate單獨(dú)添加,單獨(dú)設(shè)置ID,比如向上向下箭頭的Chip。
//設(shè)置箭頭的ID arrowUpChip.id = ARROW_UP_CHIP_ID arrowDownChip.id = ARROW_DOWN_CHIP_ID //處理Chip的點(diǎn)擊事件 mViewBind.chipGroup.setOnCheckedChangeListener { group, checkedId -> //記錄點(diǎn)擊的ID mClickChipId = if (checkedId > -1) checkedId else mClickChipId when (mClickChipId) { ARROW_DOWN_CHIP_ID -> { //箭頭向下的Chip的點(diǎn)擊 enlargeChipList(true) } ARROW_UP_CHIP_ID -> { //箭頭向上的Chip的點(diǎn)擊 enlargeChipList(false) } else -> { //其他 val text = mWordList[mClickChipId] } } }
3、點(diǎn)擊同一個(gè)Chip返回的ID為-1的問(wèn)題
ChipGroup有個(gè)坑就是重復(fù)點(diǎn)擊同一個(gè)Chip,第一次返回的Chip的ID正常,后面返回的Chip的ID都是-1,所以需要記錄首次點(diǎn)擊的Chip的ID,如果你發(fā)現(xiàn)返回的ID為-1,那么就是用戶點(diǎn)擊了上次的Chip,這一點(diǎn)要注意。
//記錄點(diǎn)擊的ID mClickChipId = if (checkedId > -1) id else mClickChipId
總結(jié): 這個(gè)重要的是實(shí)現(xiàn)思路,核心代碼也貼出來(lái)了,理解了實(shí)現(xiàn)起來(lái)就不難。寫這篇文章主要是是記錄一下。
以上就是Android ChipGroup收起折疊效果實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容,更多關(guān)于Android ChipGroup收起折疊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android控件RefreshableView實(shí)現(xiàn)下拉刷新
這篇文章主要為大家詳細(xì)介紹了Android控件RefreshableView實(shí)現(xiàn)下拉刷新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Android?Studio?Electric?Eel支持手機(jī)投屏
這篇文章主要為大家介紹了Android?Studio?Electric?Eel支持手機(jī)投屏功能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05android學(xué)習(xí)筆記之View的滑動(dòng)
Android開發(fā)中我們常常需要View滑動(dòng)實(shí)現(xiàn)一些絢麗的效果來(lái)優(yōu)化用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于android學(xué)習(xí)筆記之View滑動(dòng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01Android通過(guò)XListView實(shí)現(xiàn)上拉加載下拉刷新功能
這篇文章主要為大家詳細(xì)介紹了Android通過(guò)XListView實(shí)現(xiàn)上拉加載下拉刷新功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Android實(shí)現(xiàn)短信驗(yàn)證碼獲取自動(dòng)填寫功能(詳細(xì)版)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)短信驗(yàn)證碼獲取自動(dòng)填寫功能,很實(shí)用的功能分享給大家,感興趣的小伙伴們可以參考一下2016-08-08android開發(fā)基礎(chǔ)教程—三種方式實(shí)現(xiàn)xml文件解析
本文將介紹三種方式:sax方式/dom方式/pull方式實(shí)現(xiàn)xml文件解析,感興趣的朋友可以了解下2013-01-01Android實(shí)現(xiàn)簡(jiǎn)單的下拉刷新pulltorefresh
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)單的下拉刷新pulltorefresh的相關(guān)代碼,具有一定的實(shí)用性和操作價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07