如何将Android中两个相似XML文件重构为可复用组件？

步骤1：定义自定义属性 #

在res/values/attrs.xml（无此文件则新建）中添加自定义属性，用于接收图片资源和文本内容：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomLayout">
        <attr name="imageSrc" format="reference" />
        <attr name="text" format="string" />
    </declare-styleable>
</resources>

步骤2：创建自定义LinearLayout子类 #

新建对应语言的类，继承LinearLayout，在构造方法中解析属性并绑定控件：

Kotlin版本

import android.content.Context
import android.util.AttributeSet
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.TextView

class CustomLayout @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {

    init {
        inflate(context, R.layout.custom_item_layout, this)
        
        val attrsArray = context.obtainStyledAttributes(attrs, R.styleable.CustomLayout)
        val imageResId = attrsArray.getResourceId(R.styleable.CustomLayout_imageSrc, 0)
        val textContent = attrsArray.getString(R.styleable.CustomLayout_text)
        
        val imageView = findViewById<ImageView>(R.id.item_image)
        val textView = findViewById<TextView>(R.id.item_text)
        
        if (imageResId != 0) {
            imageView.setImageResource(imageResId)
        }
        textView.text = textContent
        
        attrsArray.recycle()
    }
}

Java版本

import android.content.Context;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class CustomLayout extends LinearLayout {

    public CustomLayout(Context context) {
        this(context, null);
    }

    public CustomLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.custom_item_layout, this, true);
        
        TypedArray attrsArray = context.obtainStyledAttributes(attrs, R.styleable.CustomLayout);
        int imageResId = attrsArray.getResourceId(R.styleable.CustomLayout_imageSrc, 0);
        String textContent = attrsArray.getString(R.styleable.CustomLayout_text);
        
        ImageView imageView = findViewById(R.id.item_image);
        TextView textView = findViewById(R.id.item_text);
        
        if (imageResId != 0) {
            imageView.setImageResource(imageResId);
        }
        textView.setText(textContent);
        
        attrsArray.recycle();
    }
}

步骤3：创建自定义组件的基础布局 #

在res/layout下新建custom_item_layout.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/item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
        
    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

步骤4：在布局中使用自定义组件 #

在需要的布局文件中直接引用，记得添加自定义命名空间（app:前缀），并替换成自己项目的包名：

<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"
    android:orientation="vertical">

    <com.your.package.name.CustomLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:imageSrc="@drawable/penguin"
        app:text="Penguin"/>

    <com.your.package.name.CustomLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:imageSrc="@drawable/frog"
        app:text="Frog"/>
</LinearLayout>

内容的提问来源于stack exchange，提问作者Gomes