标签搜索

安卓可折叠菜单

Pop.Kite
2023-07-01 / 0 评论 / 130 阅读 / 正在检测是否收录...

安卓可折叠菜单

Android FlexMenu

引入依赖

  1. setting.gradle下添加仓库
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        //...
        maven { url 'https://jitpack.io' }
    }
}
  1. 应用的build.gradle下添加依赖
implementation 'com.github.popkter:PopView:v0.24'

使用方法

属性一览

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="FlexMenu">

        <!-- 折叠状态下显示的行数,不设置则不折叠。默认不展开-->
        <attr name="flexRows" format="integer"/>

        <!-- 展开状态下的行数,如果设置了折叠行数则默认展开,否则不生效 -->
        <attr name="expandRows" format="integer"/>

        <!-- 显示列数 默认1 -->
        <attr name="columns" format="integer"/>

        <!-- 行高,即每一个itemView的高度(包括height和margin)默认60dp -->
        <attr name="lineHeight" format="dimension"/>

        <!-- 自定义itemView的引用 默认为 ItemView -->
        <attr name="itemView" format="reference"/>

        <!-- 是否显示title栏和折叠按钮 默认为 true -->
        <attr name="showTitle" format="boolean"/>

        <!-- title名 -->
        <attr name="title" format="string"/>

        <!-- 折叠按钮的背景的引用,需要是一个selector且需要设置"state_activated"状态 -->
        <attr name="flexIcon" format="reference"/>

    </declare-styleable>

</resources>

使用

  • 作为recyclerview使用
xml布局
<com.popkter.flexmenu.FlexMenu
            android:id="@+id/flex_menu"
            app:columns="3"
            app:showTitle="false"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
初始化数据
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        val dataSet = arrayListOf<ItemView>()
        with(dataSet) {
            repeat(20) {
                add(ItemView())
            }
        }
        flexMenu.init(dataSet)
          ...
    }

}
效果图

1.png


  • 作为可折叠列表显示
xml布局
<com.popkter.flexmenu.FlexMenu
            android:id="@+id/flex_menu"
            app:flexRows="2"
            app:columns="3"
            app:title="Flex_Title"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
初始化数据
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        val dataSet = arrayListOf<ItemView>()
        with(dataSet) {
            repeat(20) {
                add(ItemView())
            }
        }
        flexMenu.init(dataSet)
          ...
    }

}
效果图(折叠和展开状态)

2.png


  • 自定义ViewHolder和数据Item、折叠按钮
自定义ViewHolder需要继承ItemViewHolder,重写init方法时不能覆盖原方法。
class LabelHolderChild(view: View) : ItemViewHolder(view) {
    private val textView = view.findViewById<TextView>(R.id.holder_container)

    override fun init(label: ItemView, clickListener: View.OnClickListener) {
        super.init(label, clickListener)
        textView.text = (label as ItemLabelChild).string
    }
}

自定义ViewHolder的xml引用需要声明为FlexMenu的itemView属性。

需要注意,itemView的背景也要是selector格式且注明state_activated才能够实现点击变色。

<!-- ViewHolder 布局文件,名为 label_holder_bp.xml -->
<?xml version="1.0" encoding="utf-8"?>
<TextView android:background="@drawable/label_holder_bg"
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/holder_container"
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:layout_margin="10dp"
          android:gravity="center"
          android:hint="TEXT_BP"/>
<!-- 布局文件,需要声明itemView的总高度 lineHeight -->
<com.popkter.flexmenu.FlexMenu
            android:id="@+id/flex_menu"
            app:flexRows="2"            
            app:columns="4"
            app:showTitle="true"
            app:itemView="@layout/label_holder_bp"
            app:lineHeight="80dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
自定义数据Item需要继承ItemView。
data class ItemLabelChild(val string: String = "") : ItemView()

自定义折叠按钮xml需要是selector格式且需要注明state_activated

初始化数据,需要声明自定义ViewHolder和自定义数据类Item

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
          ...
          val dataSet = arrayListOf<ItemView>()
        with(dataSet) {
            repeat(20) {
                add(ItemLabelChild("自定义"))
            }
        }
          ...
        activityMainBinding.flexMenu.init(dataSet, LabelHolderChild::class.java)

    }

}
效果图

3.png

视频效果
Feishu20230702-112733.mp4
1

评论 (0)

取消