欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android ChipGroup收起折疊效果實現(xiàn)詳解

 更新時間：2022年11月22日 14:39:35   作者：TimeFine  
這篇文章主要為大家介紹了Android ChipGroup收起折疊效果實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、先上效果圖

借用某東App的效果，如下。

折疊時的效果：

展開時的效果：

二、ChipGroup和Chip

chipGroup和chip之前寫過博客，可移步Android Material 常用組件，看關(guān)于chip和chipGroup的部分，建議一定要看，因為里面還挺多坑的。這里簡單貼下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ù)用定義一種也行，這里簡單貼一種：

<?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中動態(tài)添加Chip

這個比較簡單,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]
    //動態(tài)添加ID
    chip.id = index
    mViewBind.chipGroup.addView(chip)
}

四、找到每個Chip位于的行數(shù)

這個需求一般會要求顯示固定的行數(shù)（比如效果圖中某東App的二行），然后顯示有向下箭頭的Chip，點擊后可以展開，那么如何找到固定行數(shù)最后一行的最后一個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后就知道每個Chip位于哪一行了。

五、實現(xiàn)思路

我們已經(jīng)找到每個Chip位于第幾行，自然我們就知道固定行數(shù)的最后一行的最后一個Chip是誰，我們替換該Chip為向下箭頭的Chip就可以完成折疊的效果。

展開的效果就很簡單了，加上向上箭頭的Chip即可。

六、需要注意的問題

1、Chip的復(fù)用問題

很遺憾，chip不能復(fù)用，每次展開和折疊都會先清除ChipGroup中的Chip然后再添加，如果邊清除邊添加同一個Chip就會報錯，所以清除所有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)容就很簡單。如果是一些特殊的Chip，我們可以單獨inflate單獨添加，單獨設(shè)置ID，比如向上向下箭頭的Chip。

//設(shè)置箭頭的ID
arrowUpChip.id = ARROW_UP_CHIP_ID
arrowDownChip.id = ARROW_DOWN_CHIP_ID
//處理Chip的點擊事件
mViewBind.chipGroup.setOnCheckedChangeListener { group, checkedId ->
    //記錄點擊的ID
    mClickChipId = if (checkedId > -1) checkedId else mClickChipId
    when (mClickChipId) {
        ARROW_DOWN_CHIP_ID -> {  //箭頭向下的Chip的點擊
            enlargeChipList(true)
        }
        ARROW_UP_CHIP_ID -> {    //箭頭向上的Chip的點擊
            enlargeChipList(false)
        }
        else -> {   //其他
            val text = mWordList[mClickChipId]
        }
    }
}

3、點擊同一個Chip返回的ID為-1的問題

ChipGroup有個坑就是重復(fù)點擊同一個Chip，第一次返回的Chip的ID正常，后面返回的Chip的ID都是-1，所以需要記錄首次點擊的Chip的ID，如果你發(fā)現(xiàn)返回的ID為-1，那么就是用戶點擊了上次的Chip，這一點要注意。

//記錄點擊的ID
mClickChipId = if (checkedId &gt; -1) id else mClickChipId

總結(jié): 這個重要的是實現(xiàn)思路，核心代碼也貼出來了，理解了實現(xiàn)起來就不難。寫這篇文章主要是是記錄一下。

以上就是Android ChipGroup收起折疊效果實現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于Android ChipGroup收起折疊的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論