如何将Android中的两个xml文件重构为可重用的组件？

Question

我在 Android 项目中有两个非常相似的不同 xml 文件——它们都指定了 ImageView 和 TextView——唯一的区别是它们在每个文件中指定了不同的文本和图像源。

青蛙.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
       android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/frog">
    </ImageView>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Frog"
        />
</LinearLayout>

企鹅.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/penguin">
    </ImageView>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Penguin"
        />
</LinearLayout>

如何将这两个文件重构为单个可重用组件，以便我可以像这样使用它们？

<LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
>
    <CustomLayout imageSrc="@drawable/penguin" text="Penguin">
    <CustomLayout imageSrc="@drawable/frog" text="Frog">
</LinearLayout>

我讨厌必须在应用程序中的任何地方复制和粘贴代码，因此在这里进行重构会很棒。我尝试过使用 ChatGPT，查看 StackOverflow 上的对话，并查看 Android 的官方文档，但未能找到有效的简单答案。有人可以帮忙吗？

提前谢谢您！

Answer 1

自定义_动物_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </ImageView>
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>
</LinearLayout>

自定义AnimalView.kt

class CustomAnimalView(context: Context, attrs: AttributeSet) : LinearLayout(context, attrs) {

    private var imageView: ImageView
    private var textView: TextView

    init {
        LayoutInflater.from(context).inflate(R.layout.custom_animal_view, this, true)
        imageView = findViewById(R.id.imageView)
        textView = findViewById(R.id.textView)
    }

    fun setValues(drawableRes: Int, text: String) {
        imageView.setImageResource(drawableRes)
        textView.setText(text)
    }
}

使用方法

<com.yourpackage.name.CustomAnimalView 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/customAnimalLayout"/>

您也可以在

Activity

和

Fragment

中以这种方式使用它。

customAnimalLayout.setValues(R.drawable.frog, "Frog")
customAnimalLayout.setValues(R.drawable.penguin, "Penguin")

示例您的用例

<LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
>
   <com.yourpackage.name.CustomAnimalView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/penguinView"/>
    <com.yourpackage.name.CustomAnimalView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frogView"/>

</LinearLayout>