嵌套片段选项卡在Android上重叠

时间:2014-10-13 11:45:56

标签: android tabs nested fragment overlap

我正在尝试在我的Android应用程序中创建Nested Fragment Tabs

我希望第二行包含子标签,如下所示:

http://i.stack.imgur.com/DPo5x.png

但是嵌套的标签重叠如下:

http://i.stack.imgur.com/liL8G.png

这是我的代码:

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>

我从使用ActionBarSherlock的教程中获得了此代码并且工作正常,但我尝试将其迁移到appcompat并遇到重叠问题。 (无法粘贴源链接,只允许2个链接)

2 个答案:

答案 0 :(得分:0)

我曾遇到过同样的问题但是通过清理堆栈来解决它:

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

 ft.addToBackStack(null);

当你希望片段出现在后面的时候,按下时,如果要切换下一个片段清除堆栈,则将片段添加到堆叠中。

答案 1 :(得分:0)

我终于解决了它。只需要创建一个新的tabcontent

这是我添加的代码:

<强> 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>

MainActivity.java

中的这一行
mTabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent2);