嵌套的片段标签在Android上重叠[英] Nested fragment tabs overlap on Android

问题描述

I'm trying to make Nested Fragment Tabs in my android application.

I want to get a second row with the sub tabs like this:

But the nested tabs are overlapping like this:

This is my code:

MainActivity.java

public class MainActivity extends ActionBarActivity {
    // Declare Variables    
    FragmentTabHost mTabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set the view from main_fragment.xml
        setContentView(R.layout.main_fragment);

        // Locate android.R.id.tabhost in main_fragment.xml
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

        // Create the tabs in main_fragment.xml
        mTabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent);

        // Create Parent Tab1 
        mTabHost.addTab(mTabHost.newTabSpec("parent1").setIndicator("Parent1"),
                FragmentParentTab1.class, null);

        // Create Parent Tab2
        mTabHost.addTab(mTabHost.newTabSpec("parent2").setIndicator("Parent2"),
                FragmentParentTab2.class, null);
    }
}

FragmentParentTab2.java

public class FragmentParentTab2 extends Fragment {
    FragmentTabHost mTabHost;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        mTabHost = new FragmentTabHost(getActivity());

        mTabHost.setup(getActivity(), getChildFragmentManager(),
                R.layout.fragmentparenttab2);

        // Create Child Tab1
        mTabHost.addTab(mTabHost.newTabSpec("child1").setIndicator("Child1"),
                FragmentChildTab1.class, null);

        // Create Child Tab2
        mTabHost.addTab(mTabHost.newTabSpec("child2").setIndicator("Child2"),
                FragmentChildTab2.class, null);
        return mTabHost;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        mTabHost = null;
    }
}

FragmentChildTab1.java

public class FragmentChildTab1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragmentchildtab1, container, false);
        return rootView;
    }
}

main_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <FrameLayout
            android:id="@+id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

fragmentparenttab2.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</RelativeLayout>

fragmentchildtab1.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/FragmentChildTab1" />

</RelativeLayout>

I got this code from a tutorial which used ActionBarSherlock and it worked fine, but I tried to migrate it to appcompat and got the overlap issue. (can't paste source link, only 2 links allowed)

推荐答案

I finally solved it. Just needed to create a new tabcontent

This is the code that I have added:

fragmentparenttab2.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.v4.app.FragmentTabHost
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:id="@+id/tabcontent2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v4.app.FragmentTabHost>

and this line in MainActivity.java

mTabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent2);

其他推荐答案

I once got stuck in the same problem but solved it by clearing the stack :

 FragmentManager fm = getActivity().getSupportFragmentManager();
       for(int i = 0; i < fm.getBackStackEntryCount(); ++i) {
        fm.popBackStack();
 }

and

 ft.addToBackStack(null);

when ever you want the fragment to appear in back press add the fragment to stack other wise when ever you are switching next fragment clear the stack.