Android开发：添加FrameLayout后主Activity内容被覆盖，求Fragment正确实现示例

Hey there, I see exactly what's going on here! The issue is that your FrameLayout is sitting directly inside the CoordinatorLayout (which acts like a FrameLayout under the hood) with match_parent dimensions. Since it's added after the <include> tag for your main content, it's rendering on top of everything else—hence why your original content is hidden.

Let's fix this by structuring your layout so both the main content and fragment container can coexist properly. Here are two solid approaches:

Approach 1: Stack Content Vertically (For Simultaneous Display) #

If you want both your original main content and fragment to show at the same time, wrap them in a scrollable container that works with your AppBarLayout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:fitsSystemWindows="true">

    <!-- Your existing AppBarLayout remains unchanged -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <!-- Use NestedScrollView to enable scrolling with the AppBar -->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Vertical LinearLayout to stack main content and fragment container -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <!-- Your original main content -->
            <include layout="@layout/content_main" />

            <!-- Fragment container - adjust height as needed (or use weight for filling space) -->
            <FrameLayout
                android:id="@+id/frameLayout"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@drawable/login_background" />

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

Key Changes: #

• Wrapped both the main content and fragment container in a NestedScrollView with the required app:layout_behavior to sync with the collapsing toolbar.
• Used a vertical LinearLayout to stack the two elements so they don't overlap.
• If you want the fragment container to fill the remaining screen space, modify the LinearLayout and FrameLayout like this:

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">
  
      <include 
          layout="@layout/content_main" 
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_weight="0" />
  
      <FrameLayout
          android:id="@+id/frameLayout"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1"
          android:background="@drawable/login_background" />
  </LinearLayout>
  

Approach 2: Toggle Content (For Switching Between Main Content and Fragment) #

If you only want to show either the main content or the fragment at any time, keep both in the CoordinatorLayout but control their visibility via code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:fitsSystemWindows="true">

    <!-- AppBarLayout remains the same -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <!-- ... (collapsing toolbar and toolbar code) ... -->
    </android.support.design.widget.AppBarLayout>

    <!-- Original main content - set visibility to visible by default -->
    <include 
        layout="@layout/content_main" 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/main_content_container" />

    <!-- Fragment container - set visibility to gone initially -->
    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/login_background"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:visibility="gone" />

</android.support.design.widget.CoordinatorLayout>

Then in your Activity, toggle visibility when needed:

// Show fragment and hide main content
findViewById(R.id.main_content_container).setVisibility(View.GONE);
findViewById(R.id.frameLayout).setVisibility(View.VISIBLE);
// Add your fragment transaction here

// Switch back to main content
findViewById(R.id.frameLayout).setVisibility(View.GONE);
findViewById(R.id.main_content_container).setVisibility(View.VISIBLE);

Either approach should fix your overlapping issue. The first one is for when you want both elements visible at once, the second is for switching between them.

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