Android开发：如何将多组件合并为自定义Widget用于开源库？

步骤1：创建自定义Widget的布局文件 #

将你提供的布局代码保存为res/layout/custom_combined_widget.xml：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <HorizontalScrollView
        android:id="@+id/hscroll1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ScrollView
            android:id="@+id/vscroll1"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <LinearLayout
                android:id="@+id/linear2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <LinearLayout
                    android:id="@+id/linear3"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <TextView
                        android:id="@+id/textview6"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:text="TextView"
                        android:textSize="12sp"
                        android:textColor="#000000" />
                </LinearLayout>
                <View
                    android:id="@+id/linear4"
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#000000" />
                <LinearLayout
                    android:id="@+id/linear5"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <TextView
                        android:id="@+id/textview7"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="TextView"
                        android:textSize="12sp"
                        android:textColor="#000000" />
                </LinearLayout>
            </LinearLayout>
        </ScrollView>
    </HorizontalScrollView>
</LinearLayout>

步骤2：编写自定义View类 #

在项目中创建自定义View类（以Java为例），继承LinearLayout并加载上述布局：

package com.example.custom; // 替换为你的包名

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

public class CombinedWidget extends LinearLayout {

    public CombinedWidget(Context context) {
        super(context);
        init(context);
    }

    public CombinedWidget(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public CombinedWidget(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        // 加载自定义布局
        LayoutInflater.from(context).inflate(R.layout.custom_combined_widget, this, true);
        
        // 可选：获取内部控件引用以做后续操作
        // TextView leftText = findViewById(R.id.textview6);
        // TextView rightText = findViewById(R.id.textview7);
    }
}

如果你使用Kotlin，代码如下：

package com.example.custom // 替换为你的包名

import android.content.Context
import android.util.AttributeSet
import android.view.LayoutInflater
import android.widget.LinearLayout

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

    init {
        LayoutInflater.from(context).inflate(R.layout.custom_combined_widget, this, true)
        
        // 可选：获取内部控件引用
        // val leftText = findViewById<TextView>(R.id.textview6)
        // val rightText = findViewById<TextView>(R.id.textview7)
    }
}

步骤3：在布局中引用自定义Widget #

现在可以像普通控件一样在XML布局中直接引用这个自定义Widget：

<com.example.custom.CombinedWidget
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

可选：添加自定义属性（扩展功能） #

如果需要让用户在布局中配置内部控件的属性（如文本内容、颜色），可在res/values/attrs.xml中定义自定义属性：

<resources>
    <declare-styleable name="CombinedWidget">
        <attr name="leftText" format="string" />
        <attr name="rightText" format="string" />
        <attr name="dividerColor" format="color" />
    </declare-styleable>
</resources>

然后在自定义View类中读取并应用这些属性（Java示例）：

private void init(Context context, AttributeSet attrs) {
    LayoutInflater.from(context).inflate(R.layout.custom_combined_widget, this, true);
    
    TextView leftText = findViewById(R.id.textview6);
    TextView rightText = findViewById(R.id.textview7);
    View divider = findViewById(R.id.linear4);
    
    // 读取自定义属性
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CombinedWidget);
    String leftContent = typedArray.getString(R.styleable.CombinedWidget_leftText);
    String rightContent = typedArray.getString(R.styleable.CombinedWidget_rightText);
    int dividerColor = typedArray.getColor(R.styleable.CombinedWidget_dividerColor, 0xFF000000);
    
    // 应用属性
    if (leftContent != null) leftText.setText(leftContent);
    if (rightContent != null) rightText.setText(rightContent);
    divider.setBackgroundColor(dividerColor);
    
    typedArray.recycle(); // 回收TypedArray避免内存泄漏
}

对应的布局引用方式：

<com.example.custom.CombinedWidget
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:leftText="左侧文本"
    app:rightText="右侧文本"
    app:dividerColor="#FF5722" />

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