带有子元素的 Android 自定义可展开/可折叠视图

Posted 2023-03-24

【中文标题】带有子元素的 Android 自定义可展开/可折叠视图

【英文标题】：Android custom expandable/collapsable view with child elements

【发布时间】：2021-06-09 08:59:10

【问题描述】：

我正在开发 android 中的自定义可扩展视图。 目标是我可以在 xml 文件中添加子元素，当用户单击展开/折叠按钮时，它们将被展开和折叠，如下图所示。

展开/折叠工作正常，但我不知道如何处理子视图。

在我的自定义视图的构造函数中，我膨胀了一个 xml 布局，我在里面有一个线性布局，我想在其中放置子元素。

我尝试使用question here.答案中建议的解决方案

但我得到了 ***Error，大约有数百个： “在 android.view.ViewGroup.resetResolvedLayoutDirection(ViewGroup.java:7207)”，即使我尝试在第二个 aswer 中使用解决方案，使用 while 循环而不是 for。

这是我认为的 kotlin 类：

    class CollapsableCategoryView(context: Context, attrs: AttributeSet) : LinearLayout(context, attrs) 

      /** Declare some variables */
      private var titleString : String = ""
      private var subtitleString : String = ""
      private var isExpaneded : Boolean = false

      /** The required views */
      private lateinit var ivIcon : ImageView
      private lateinit var llExpandableContent : LinearLayout

      init 

        /** Receive the attributes */
        context.theme.obtainStyledAttributes(
            attrs,
            R.styleable.CollapsableCategoryView,
            0, 0
        ).apply 
            try 
                titleString = getString(R.styleable.CollapsableCategoryView_categoryTitle) ?: ""
                subtitleString = getString(R.styleable.CollapsableCategoryView_categorySubtitle) ?: ""

             finally 
                recycle()
            
        

        /** Inflate the layout */
        val root : View = View.inflate(context, R.layout.collapsable_task_category, this)

        /** Find the views we need*/
        ivIcon = root.findViewById(R.id.ivCollapsableCategoryIcon) as ImageView
        llExpandableContent = root.findViewById(R.id.llExpandableContent) as LinearLayout

        /** onClickListener for the icon */
        ivIcon.setOnClickListener 
            toggleExpanded()
        
      

      override fun onFinishInflate() 

        for(i in 0..childCount)
            var view : View = getChildAt(i)
            removeViewAt(i)
            llExpandableContent.addView(view)
        

        super.onFinishInflate()

      

      /** This method is called when user clicks the expand/collapse button */
      fun toggleExpanded()
        isExpaneded = !isExpaneded
        if(isExpaneded)
        
            ivIcon.setImageResource(R.drawable.ic_collapse)
            llExpandableContent.visibility = VISIBLE
        else
            ivIcon.setImageResource(R.drawable.ic_expand)
            llExpandableContent.visibility = GONE
        
      
    

我在其他地方读到了另一种解决方案，但它也不起作用。该解决方案建议覆盖 addView() 方法，如下所示：

override fun addView(child: View?, index: Int, params: ViewGroup.LayoutParams?) 
        llExpandableContent.addView(child, params)
    

但是如果我这样做了，我会得到一个异常，即 lateinint var llExpandableContent 永远不会被初始化。

我也看到了覆盖 onMeasure() 方法的解决方案，但这似乎不是我解决这个问题的正确方法，因为我不想以一种特殊的方式表达我的观点，只是想要将它们添加到线性布局中。

这里是自定义视图布局的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_
    android:layout_
    android:orientation="vertical">

    <View
        android:layout_
        android:layout_
        android:background="@drawable/bg_collapsable_category_top"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/clCollapsableCategoryMain"
        android:layout_
        android:layout_
        android:background="@drawable/bg_collapsable_category_middle">

        <ImageView
            android:id="@+id/ivCollapsableCategoryIcon"
            android:layout_
            android:layout_
            android:layout_marginStart="8dp"
            android:src="@drawable/ic_expand"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/clCollapsableCategoryTitle"
            android:layout_
            android:layout_
            android:layout_marginTop="8dp"
            android:text="Title"
            app:layout_constraintStart_toEndOf="@+id/ivCollapsableCategoryIcon"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/clCollapsableCategorySubtitle"
            android:layout_
            android:layout_
            android:text="Subtitle"
            app:layout_constraintStart_toEndOf="@+id/ivCollapsableCategoryIcon"
            app:layout_constraintTop_toBottomOf="@+id/clCollapsableCategoryTitle" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <LinearLayout
        android:id="@+id/llExpandableContent"
        android:orientation="vertical"
        android:layout_
        android:layout_
        android:background="@drawable/bg_collapsable_category_middle"
        android:visibility="gone">
    </LinearLayout>

    <View
        android:layout_
        android:layout_
        android:background="@drawable/bg_collapsable_category_bottom"/>

</LinearLayout>

这是我尝试在布局 xml 文件中使用自定义视图的方式：

<com.test.test.util.CollapsableCategoryView
   android:layout_
   android:layout_>

   <TextView
      android:layout_
      android:layout_
      android:text="Child view 1"/>

</com.test.test.util.CollapsableCategoryView>

有谁知道如何解决这个问题？ 非常感谢您的任何帮助。最好的祝福， 阿戈斯顿

【参考方案1】：

所以我在另一个问题上找到了解决方案，但我再也找不到了...... 但是这个解决方案就像一个魅力:)

override fun addView(child: View?, index: Int, params: ViewGroup.LayoutParams?) 
    if(llExpandableContent == null)
        super.addView(child, index, params)
    else
        llExpandableContent?.addView(child, index, params)
    

希望它会在某个时候对其他人有所帮助:)