如何创建可复用的模块化LinearLayout XML文件并在多Fragment中使用

Hey there! Creating a reusable modular LinearLayout for multiple Fragments is such a smart move—it keeps your code clean, follows the DRY (Don’t Repeat Yourself) principle, and makes future updates way easier. Let’s break down exactly how to pull this off step by step.

First, make a standalone XML layout file for your reusable LinearLayout. This will contain all the views and styling you want to reuse across Fragments.

Save it in res/layout/ with a descriptive name, like layout_reusable_linear.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="wrap_content"
    android:orientation="vertical"
    android:padding="16dp"
    android:background="@drawable/rounded_corner_bg">

    <!-- Add your reusable views here -->
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/tv_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:layout_marginTop="8dp"/>

    <Button
        android:id="@+id/btn_action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"/>

</LinearLayout>

Keep the layout attributes flexible (use match_parent or wrap_content instead of fixed dimensions) so it adapts to different Fragment contexts.

Now, in any Fragment’s layout file, use the <include> tag to embed your reusable LinearLayout. You can include it multiple times in the same layout if needed, and assign unique IDs to each instance for easy reference.

Example Fragment layout (res/layout/fragment_sample.xml):

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <!-- First instance of the reusable LinearLayout -->
        <include
            layout="@layout/layout_reusable_linear"
            android:id="@+id/reusable_section_1"/>

        <!-- Fragment-specific content -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="This is unique content for the Fragment"
            android:layout_marginTop="24dp"/>

        <!-- Second instance of the reusable LinearLayout -->
        <include
            layout="@layout/layout_reusable_linear"
            android:id="@+id/reusable_section_2"/>

    </LinearLayout>
</ScrollView>

To modify the views inside the reusable LinearLayout, first find the included layout by its ID, then access its child views. Since each <include> has a unique ID, you can handle multiple instances separately.

Example Kotlin code for the Fragment:

class MySampleFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_sample, container, false)

        // Configure first reusable section
        val firstReusableLayout = view.findViewById<LinearLayout>(R.id.reusable_section_1)
        val firstTitle = firstReusableLayout.findViewById<TextView>(R.id.tv_title)
        val firstDesc = firstReusableLayout.findViewById<TextView>(R.id.tv_description)
        val firstBtn = firstReusableLayout.findViewById<Button>(R.id.btn_action)

        firstTitle.text = "First Reusable Section"
        firstDesc.text = "This section will look the same across all Fragments that use it."
        firstBtn.text = "Tap Me!"
        firstBtn.setOnClickListener {
            // Handle button click for the first section
            Toast.makeText(context, "First button clicked!", Toast.LENGTH_SHORT).show()
        }

        // Configure second reusable section
        val secondReusableLayout = view.findViewById<LinearLayout>(R.id.reusable_section_2)
        val secondTitle = secondReusableLayout.findViewById<TextView>(R.id.tv_title)
        secondTitle.text = "Second Reusable Section"
        // ... set other views as needed for the second instance

        return view
    }
}

If you want to simplify setting data and handling clicks, use Data Binding. This lets you bind variables directly to the reusable layout, avoiding repetitive findViewById calls.

First, update your reusable layout to include data variables (layout_reusable_linear.xml):

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

    <data>
        <variable
            name="titleText"
            type="String"/>
        <variable
            name="descText"
            type="String"/>
        <variable
            name="btnText"
            type="String"/>
        <variable
            name="onBtnClick"
            type="android.view.View.OnClickListener"/>
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp"
        android:background="@drawable/rounded_corner_bg">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textStyle="bold"
            android:text="@{titleText}"/>

        <TextView
            android:id="@+id/tv_description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:layout_marginTop="8dp"
            android:text="@{descText}"/>

        <Button
            android:id="@+id/btn_action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@{btnText}"
            android:onClick="@{onBtnClick}"/>

    </LinearLayout>
</layout>

Then, use Data Binding in your Fragment:

class MySampleFragment : Fragment() {

    private lateinit var binding: FragmentSampleBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentSampleBinding.inflate(inflater, container, false)

        // Configure first reusable section
        val firstReusableBinding = LayoutReusableLinearBinding.bind(binding.reusableSection1)
        firstReusableBinding.titleText = "First Reusable Section"
        firstReusableBinding.descText = "Data Binding makes this setup way cleaner!"
        firstReusableBinding.btnText = "Click Here"
        firstReusableBinding.onBtnClick = View.OnClickListener {
            Toast.makeText(context, "First button clicked via Data Binding!", Toast.LENGTH_SHORT).show()
        }

        // Configure second reusable section
        val secondReusableBinding = LayoutReusableLinearBinding.bind(binding.reusableSection2)
        secondReusableBinding.titleText = "Second Reusable Section"
        // ... set other variables

        return binding.root
    }
}

That’s all! Now you have a fully modular, reusable LinearLayout that you can drop into any Fragment with minimal effort.

内容的提问来源于stack exchange，提问作者Now.Zero