片段在活动上重叠：Android Studio

Question

当我单击 Activity 上的按钮调用片段以便它用新片段替换 Activity 时，它不会用片段替换 Activity，但片段的内容会在 Activity 上重叠。

p>

这里是 kotlin 活动文件：

package com.sahil.randoms
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_game_start.*

class ActivityGameStart : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_game_start)


        title="Start"

        btnStart.setOnClickListener(){

            frameStart.removeAllViews()

            val fragmentManager= supportFragmentManager
            val transaction=fragmentManager.beginTransaction()
            transaction.replace(R.id.frameStart,FragmentPlayArea()).commit()

        }

    }
}

活动的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".ActivityGameStart"
    android:id="@+id/rlStart">

    <TextView
        android:id="@+id/txtHighScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HIGH SCORE"
        android:textColor="#000000"
        android:textSize="18sp"
        android:padding="10dp"
        android:background="@drawable/background"
        android:layout_margin="15dp"
        />
    <FrameLayout
        android:id="@+id/frameStart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:id="@+id/txtStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Press the Start and Start the Timer"
        android:layout_below="@id/txtHighScore"
        android:layout_marginTop="50dp"
        android:layout_marginHorizontal="50dp"
        android:layout_centerHorizontal="true"
        android:textSize="25sp"
        android:textStyle="bold"
        android:textColor="#8f0077"
        />

    <Button
        android:id="@+id/btnStart"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtStart"
        android:layout_centerHorizontal="true"
        android:text="Start"
        android:textStyle="bold"
        android:layout_marginTop="80dp"
        android:textSize="20sp"
        android:background="@drawable/button"/>


</RelativeLayout>

片段的 kotlin 文件：

package com.sahil.randoms

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class FragmentPlayArea : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ):View? {

        val view = inflater.inflate(R.layout.fragment_play_area, container, false)

        return view
    }
}

片段的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FragmentPlayArea">
    <TextView
        android:id="@+id/txtHighScore1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HIGH SCORE"
        android:textColor="#000000"
        android:textSize="18sp"
        android:padding="10dp"
        android:background="@drawable/background"
        android:layout_margin="15dp"
        />
    <ImageView
        android:id="@+id/imgTimer"
        android:layout_width="40dp"
        android:layout_height="40dp"
        app:srcCompat="@drawable/ic_time"
        android:layout_toRightOf="@id/txtHighScore1"
        android:layout_marginLeft="140dp"
        android:layout_marginTop="20dp"/>
    <TextView
        android:id="@+id/txtTimer"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_toRightOf="@id/imgTimer"
        android:layout_marginTop="18dp"
        android:textColor="#8f0077"
        android:textSize="30sp"
        />
    <TextView
        android:id="@+id/txtGuess"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Guess the following Random Word!"
        android:layout_below="@id/txtHighScore1"
        android:layout_marginTop="50dp"
        android:layout_marginHorizontal="20dp"
        android:layout_centerHorizontal="true"
        android:textSize="25sp"
        android:textStyle="bold"
        android:textColor="#8f0077"
        />

    <TextView
        android:id="@+id/txtRandomWord"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="ABCDE"
        android:layout_below="@id/txtGuess"
        android:layout_marginTop="50dp"
        android:textAlignment="center"
        android:layout_centerHorizontal="true"
        android:background="@drawable/background"
        android:paddingVertical="10dp"
        android:textSize="24sp"
        android:textStyle="bold"
        android:textColor="#000000"
        />

    <EditText
        android:id="@+id/etResponse"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/txtRandomWord"
        android:maxLines="1"
        android:inputType="text"
        android:background="@drawable/background"
        android:layout_marginHorizontal="40dp"
        android:hint="Enter Here"
        android:textAlignment="center"
        android:layout_marginTop="40dp"
        />

    <TextView
        android:id="@+id/txtAnswer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtRandomWord"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:textSize="25sp"
        android:textColor="#8f0077"
        android:textStyle="bold"
        android:text="The Correct Word is ABCDE"
        />
    <Button
        android:id="@+id/btnCheck"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/etResponse"
        android:layout_centerHorizontal="true"
        android:text="CHECK"
        android:textStyle="bold"
        android:layout_marginTop="20dp"
        android:textSize="20sp"
        android:background="@drawable/button"/>
    <Button
        android:id="@+id/btnNext"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/etResponse"
        android:layout_centerHorizontal="true"
        android:text="NEXT"
        android:textStyle="bold"
        android:layout_marginTop="20dp"
        android:textSize="20sp"
        android:background="@drawable/button"/>
</RelativeLayout>

screenshot of the activity before calling fragmnet

after calling fragment i.e. overlapped fragment

请帮我解决这个问题，我有一段时间无法解决这个问题:(

Answer 1

您有一个 Activity 布局，其中所有文本和按钮排列在不同的位置，然后是一个填充整个视图的 FrameLayout（高度和宽度为 match_parent）。如果您在该 FrameLayout 中放置一些内容，那么您将拥有所有文本和按钮加上您刚刚添加的新内容。

如果你想这样做，而 FrameLayout 中的新内容是为了隐藏其他内容，你需要做几件事：

• FrameLayout 低于其他视图（看看 START 按钮如何仍然在顶部） - 您需要将其设置为添加到 XML 文件的最后一个东西，所以它在顶部其他一切。或者也许给它一个elevation 值（不确定这是否适用于RelativeLayouts，但它可能会这样做
• 您的片段布局需要一个不透明的background 值，否则您会通过它看到旧内容

就像@Tenfour04 所说，通常的方法是创建一个包含内容容器的 Activity 布局（例如 FrameLayout），然后将 UI 交换进出 - 所以你会从一个片段开始包含分数和开始按钮等，当您单击该按钮时，它会删除该片段并添加FragmentPlayArea 一个。这样后面就没什么可看的了！而且它也可以更好地与无障碍服务一起使用（它们有时会卡在“隐藏”的 UI 上），如果你只是掩盖它，它仍然存在