Android：如何在单个Fragment中实现多页面/分段（不使用ViewPager）

针对你的需求，推荐用**「容器承载+状态驱动+动画过渡」**的方案，既能满足共用Fragment/ViewModel/Repository的要求，也能实现固定按钮、指示器动画、手动切换的功能，比单纯的显示隐藏更易维护和扩展。

一、核心布局结构 #

把整个页面拆成三个固定区域，用ConstraintLayout作为根布局：

• 顶部：步骤指示器（比如用LinearLayout包裹多个步骤项）
• 中间：FrameLayout作为步骤内容容器，把所有步骤的表单布局都放在这里（初始只显示第一步）
• 底部：固定在屏幕底部的操作按钮（下一步/上一步）

示例布局片段：

<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <!-- 步骤指示器 -->
    <LinearLayout
        android:id="@+id/step_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        android:orientation="horizontal"
        android:padding="16dp">
        <!-- 步骤1项 -->
        <TextView
            android:id="@+id/step1"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="步骤1"
            android:textColor="@color/selected_color"/>
        <!-- 步骤2项 -->
        <TextView
            android:id="@+id/step2"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="步骤2"
            android:textColor="@color/unselected_color"/>
    </LinearLayout>

    <!-- 步骤内容容器 -->
    <FrameLayout
        android:id="@+id/step_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/step_indicator"
        app:layout_constraintBottom_toTopOf="@id/action_buttons">

        <!-- 步骤1表单 -->
        <include layout="@layout/step1_form" android:id="@+id/step1_form"/>
        <!-- 步骤2表单 -->
        <include layout="@layout/step2_form" android:id="@+id/step2_form" android:visibility="gone"/>
    </FrameLayout>

    <!-- 底部操作按钮 -->
    <LinearLayout
        android:id="@+id/action_buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        android:orientation="horizontal"
        android:padding="16dp">
        <Button
            android:id="@+id/btn_prev"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="上一步"
            android:visibility="gone"/>
        <Button
            android:id="@+id/btn_next"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="下一步"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

二、ViewModel状态管理 #

在ViewModel里统一管理当前步骤和所有表单数据，确保数据共用：

class RegisterViewModel : ViewModel() {
    // 当前步骤，1为第一步，2为第二步
    val currentStep = MutableLiveData<Int>().apply { value = 1 }
    // 表单数据，共用所有步骤的输入
    val fullName = MutableLiveData<String>()
    val gender = MutableLiveData<String>()
    val email = MutableLiveData<String>()
    val password = MutableLiveData<String>()

    // 切换到下一步
    fun goNext() {
        if (currentStep.value == 1) {
            currentStep.value = 2
        }
    }

    // 切换到上一步
    fun goPrev() {
        if (currentStep.value == 2) {
            currentStep.value = 1
        }
    }

    // 跳转到指定步骤（支持手动切换）
    fun jumpToStep(step: Int) {
        if (step in 1..2) {
            currentStep.value = step
        }
    }
}

三、Fragment中的切换逻辑与动画 #

在Fragment中观察ViewModel的步骤变化，切换视图并添加动画，同时处理按钮和指示器的点击：

class RegisterFragment : Fragment() {
    private lateinit var viewModel: RegisterViewModel
    private lateinit var stepContainer: FrameLayout
    private lateinit var step1Form: View
    private lateinit var step2Form: View
    private lateinit var stepIndicator: LinearLayout
    private lateinit var btnPrev: Button
    private lateinit var btnNext: Button

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_register, container, false)
        viewModel = ViewModelProvider(this)[RegisterViewModel::class.java]
        initViews(view)
        setupObservers()
        setupListeners()
        return view
    }

    private fun initViews(view: View) {
        stepContainer = view.findViewById(R.id.step_container)
        step1Form = view.findViewById(R.id.step1_form)
        step2Form = view.findViewById(R.id.step2_form)
        stepIndicator = view.findViewById(R.id.step_indicator)
        btnPrev = view.findViewById(R.id.btn_prev)
        btnNext = view.findViewById(R.id.btn_next)
    }

    private fun setupObservers() {
        viewModel.currentStep.observe(viewLifecycleOwner) { step ->
            // 切换步骤视图，添加过渡动画
            TransitionManager.beginDelayedTransition(stepContainer)
            when (step) {
                1 -> {
                    step1Form.visibility = View.VISIBLE
                    step2Form.visibility = View.GONE
                    btnPrev.visibility = View.GONE
                    btnNext.text = "下一步"
                    updateIndicatorStatus(1)
                }
                2 -> {
                    step1Form.visibility = View.GONE
                    step2Form.visibility = View.VISIBLE
                    btnPrev.visibility = View.VISIBLE
                    btnNext.text = "完成"
                    updateIndicatorStatus(2)
                }
            }
        }
    }

    private fun setupListeners() {
        // 下一步/上一步按钮点击
        btnNext.setOnClickListener {
            if (viewModel.currentStep.value == 1) {
                // 校验第一步表单，通过后再跳转
                if (validateStep1()) {
                    viewModel.goNext()
                }
            } else {
                // 完成注册逻辑
                submitRegister()
            }
        }
        btnPrev.setOnClickListener {
            viewModel.goPrev()
        }

        // 指示器手动切换
        stepIndicator.getChildAt(0).setOnClickListener {
            viewModel.jumpToStep(1)
        }
        stepIndicator.getChildAt(1).setOnClickListener {
            // 可添加校验：比如第一步未填写则不允许跳第二步
            if (validateStep1()) {
                viewModel.jumpToStep(2)
            }
        }

        // 可选：添加左右滑动切换步骤
        val gestureDetector = GestureDetector(requireContext(), object : GestureDetector.SimpleOnGestureListener() {
            override fun onFling(e1: MotionEvent?, e2: MotionEvent?, velocityX: Float, velocityY: Float): Boolean {
                if (e1 == null || e2 == null) return false
                val diffX = e2.x - e1.x
                if (diffX < -100 && velocityX < -200) {
                    // 左滑，跳下一步
                    if (viewModel.currentStep.value == 1 && validateStep1()) {
                        viewModel.goNext()
                    }
                } else if (diffX > 100 && velocityX > 200) {
                    // 右滑，跳上一步
                    if (viewModel.currentStep.value == 2) {
                        viewModel.goPrev()
                    }
                }
                return true
            }
        })
        stepContainer.setOnTouchListener { _, event ->
            gestureDetector.onTouchEvent(event)
            true
        }
    }

    // 更新指示器状态和动画
    private fun updateIndicatorStatus(currentStep: Int) {
        for (i in 0 until stepIndicator.childCount) {
            val stepItem = stepIndicator.getChildAt(i) as TextView
            if (i+1 == currentStep) {
                // 当前步骤：高亮+缩放动画
                stepItem.setTextColor(resources.getColor(R.color.selected_color))
                ObjectAnimator.ofFloat(stepItem, "scaleX", 1f, 1.2f, 1f).setDuration(300).start()
            } else {
                stepItem.setTextColor(resources.getColor(R.color.unselected_color))
            }
        }
    }

    // 第一步表单校验
    private fun validateStep1(): Boolean {
        val name = viewModel.fullName.value.orEmpty()
        val gender = viewModel.gender.value.orEmpty()
        return name.isNotEmpty() && gender.isNotEmpty()
    }

    // 提交注册
    private fun submitRegister() {
        // 调用Repository处理注册逻辑
    }
}

四、方案优势 #

• 满足共用Fragment/ViewModel/Repository的要求，所有表单数据统一存在ViewModel中
• 步骤切换通过状态驱动，逻辑清晰，便于扩展更多步骤
• 支持手动点击指示器或滑动切换步骤，解决显示隐藏无法手动切换的问题
• 固定底部按钮，指示器动画可自定义，符合你的UI需求

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