FragmentTabHost内容填充剩余空间

时间:2014-07-09 15:39:17

标签: android android-layout tabs android-tabs fragment-tab-host

我一直在尝试使用Android上的标签导航,但我无法正确设置内容区域。 应用程序的布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabhost"
android:tag="tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:tag="linear">

        <TabWidget
            android:id="@+id/tabs"
            android:tag="tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </TabWidget>
           <FrameLayout
            android:id="@+id/tabFrameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        />
    </RelativeLayout>
</android.support.v4.app.FragmentTabHost>

片段:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/info_drawer_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e0e0e0">

    <FrameLayout
        android:id="@+id/info_content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment info"
        android:id="@+id/info_textView"
        android:layout_gravity="center_horizontal" />
    </FrameLayout>

    <ListView android:id="@+id/info_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

我在活动中使用的代码:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    tabHost = (FragmentTabHost)findViewById(R.id.tabhost);
    tabHost.setup(this, getSupportFragmentManager(), R.id.tabFrameLayout);

    tabHost.addTab(tabHost.newTabSpec("Tab 0").setIndicator("", getResources().getDrawable(R.drawable.ic_launcher)), InfoFragment.class, null);
    tabHost.addTab(tabHost.newTabSpec("Tab 1").setIndicator("Tab 1"), HomeFragment.class, null);
    tabHost.addTab(tabHost.newTabSpec("Tab 2").setIndicator("", getResources().getDrawable(R.drawable.ic_launcher)), AppsFragment.class, null);
}

这会产生以下结果: Screen Capture

如您所见,内容区域与选项卡重叠。我只是希望它低于它们并填满剩下的空间,如下所示: Screent Capture

我尝试将它们包装在RelativeLayout标记中并应用以下属性,但它不起作用。我没有任何运气也使用了weight属性。

感谢。

2 个答案:

答案 0 :(得分:2)

您不需要在Tabhost中包含FrameLayout,当您这样做时,您使用相同的空间来存储片段的内容和标签本身。

只需将TabHost放在垂直的LinearLayout中,然后将FrameLayout放在TabHost下面。

就像这样:

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">

        <TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"/>
    </android.support.v4.app.FragmentTabHost>

    <FrameLayout 
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</LinearLayout>

答案 1 :(得分:0)

对不起,我不能详细介绍您的具体代码,但如果您反正尝试实施它,我会采用这种方法,它真的很容易理解和管理。代码非常简单,可以满足您的所有需求。

你必须为3(或其他)片段制作自己的布局文件,如下所示:

片段的布局文件:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_margin="15sp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Notebook"
        android:id="@+id/tv_hdl_tab3"
        android:textColor="@android:color/holo_blue_light"
        android:textSize="@dimen/dim_hdl_h1" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="@string/tab3_introText"
    android:id="@+id/tv_tab3_IntroText"
    android:layout_marginTop="5sp"
    android:layout_marginBottom="5sp"
    android:textSize="@dimen/dim_txt_p" />

MainActivity:

public class MainActivity extends Activity {
ActionBar.Tab tab1, tab2, tab3;
Fragment fragmentTab1 = new FragmentTab1();
Fragment fragmentTab2 = new FragmentTab2();
Fragment fragmentTab3 = new FragmentTab3();

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tab_test);

    ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    tab1 = actionBar.newTab().setText("Home");
    tab2 = actionBar.newTab().setText("Calculator");
    tab3 = actionBar.newTab().setText("Notebook");

    tab1.setTabListener(new MyTabListener(fragmentTab1));
    tab2.setTabListener(new MyTabListener(fragmentTab2));
    tab3.setTabListener(new MyTabListener(fragmentTab3));

    actionBar.addTab(tab1);
    actionBar.addTab(tab2);
    actionBar.addTab(tab3);
}

然后一个片段看起来像这样(其中3个片段,每个片段一个片段,只要它应该不同):

public class FragmentTab3 extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
    View view = inflater.inflate(R.layout.tab3, container, false);
    TextView textview = (TextView) view.findViewById(R.id.tabtextview);
    textview.setText(R.string.Three);
    return view;
}

}

Tablistener:

public  class MyTabListener  implements ActionBar.TabListener {
Fragment fragment;


public MyTabListener(Fragment fragment) {
    this.fragment = fragment;
}


public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
    ft.replace(R.id.fragment_container, fragment);
}

public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
    ft.remove(fragment);
}

public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
    // nothing done here
}

}

代码来自http://www.linux.com/learn/tutorials/761642-android-app-development-for-beginners-navigation-with-tabs