Android,Tabs的内容重叠

Clu*_*ess 1 tabs android

我正在尝试为我的应用设置标签.但是,在我完成UI后,点击选项卡会导致按钮和标签同时出现.例如,Tab1显示一个按钮.当我点击Tab2时,按钮出现在Tab2上.

   <LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TabHost
        android:id="@+id/tabhost"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="254dp"
                android:layout_height="25dp" >
            </TabWidget>

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

                <LinearLayout
                    android:id="@+id/tabPower"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/hear" />

                    <SeekBar
                        android:id="@+id/sb"
                        android:layout_width="253dp"
                        android:layout_height="wrap_content" />

                    <ToggleButton
                        android:id="@+id/tb"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="25dp"
                        android:text="ToggleButton" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tabEq"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="right"
                        android:orientation="horizontal" >

                        <CheckBox
                            android:id="@+id/enabled"
                            android:layout_width="105dp"
                            android:layout_height="wrap_content"
                            android:layout_gravity="fill"
                            android:layout_weight="1"
                            android:text="@string/enabled" />

                        <Button
                            android:id="@+id/flat"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="left"
                            android:layout_marginRight="18dp"
                            android:layout_marginTop="15dp"
                            android:layout_weight="0.42"
                            android:text="@string/flat" />
                    </LinearLayout>

                    <TextView
                        android:id="@+id/bass_booost"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/bass_boost" />

                    <SeekBar
                        android:id="@+id/bass_boost"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="14dp"
                        android:max="1000"
                        android:progress="0" />

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="0.13"
                        android:text="TextView" />

                    <SeekBar
                        android:id="@+id/slider1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="14dp"
                        android:layout_weight="0.13"
                        android:max="100"
                        android:progress="50"
                        android:secondaryProgress="50" />

                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="0.13"
                        android:text="TextView" />

                    <SeekBar
                        android:id="@+id/slider_2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="25dp"
                        android:layout_weight="0.13"
                        android:max="100"
                        android:progress="50"
                        android:secondaryProgress="50" />

                    <TextView
                        android:id="@+id/textView4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="0.13"
                        android:text="TextView" />

                    <SeekBar
                        android:id="@+id/slider_3"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="15dp"
                        android:layout_weight="0.13"
                        android:max="100"
                        android:progress="50"
                        android:secondaryProgress="50" />

                    <TextView
                        android:id="@+id/textView5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="0.13"
                        android:text="TextView" />

                    <SeekBar
                        android:id="@+id/slider_4"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp"
                        android:layout_weight="0.13"
                        android:max="100"
                        android:progress="50"
                        android:secondaryProgress="50" />

                    <TextView
                        android:id="@+id/textView6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="0.13"
                        android:text="TextView" />

                    <SeekBar
                        android:id="@+id/slider_5"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp"
                        android:layout_weight="0.13"
                        android:max="100"
                        android:progress="50"
                        android:secondaryProgress="50" />
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>
Run Code Online (Sandbox Code Playgroud)

这是我的布局文件,如果有什么我应该实现,请告诉我.

Jus*_*ard 5

您可以在这里更改一些内容,使您的布局达到顶峰.首先,修改你的布局xml,注意一些事情:

  1. Android已经内置的ID为tabhost的元素:@android:id/tabhost,@android:id/tabs,@android:id/tabcontent.为了简单起见,我建议使用它们;
  2. FrameLayout @android:id/tabcontent需要的android:paddingTop值或内容将显示在标签上.我选择了62dp(参见http://androidituts.com/android-tab-layout-example/);
  3. 我已经改变了android:layout_widthandroid:layout_height你给match_parentmatch_parentTabHostmatch_parentwrap_contentTabWidget由于Android会给你默认一个很好的布局;
  4. 我已经删除了LinearLayout你作为孩子的那个TabHost; 没有必要;
  5. fill_parent对价值android:layout_widthandroid:layout_height已过时,所以我用它代替match_parent.请参阅http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html,其中介绍了fill_parent:

视图应该与其父视图一样大(减去填充).从API级别8开始不推荐使用此常量,并将其替换为match_parent.

以下是新xml布局的来源:

<LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin"
          android:paddingLeft="@dimen/activity_horizontal_margin"
          android:paddingRight="@dimen/activity_horizontal_margin"
          android:paddingTop="@dimen/activity_vertical_margin" >

<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="62dp">

        <LinearLayout
            android:id="@+id/tabPower"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hear" />

            <SeekBar
                android:id="@+id/sb"
                android:layout_width="253dp"
                android:layout_height="wrap_content" />

            <ToggleButton
                android:id="@+id/tb"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="25dp"
                android:text="ToggleButton" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/tabEq"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:orientation="horizontal" >

                <CheckBox
                    android:id="@+id/enabled"
                    android:layout_width="105dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="fill"
                    android:layout_weight="1"
                    android:text="Enabled" />

                <Button
                    android:id="@+id/flat"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left"
                    android:layout_marginRight="18dp"
                    android:layout_marginTop="15dp"
                    android:layout_weight="0.42"
                    android:text="Flat" />
            </LinearLayout>

            <TextView
                android:id="@+id/bass_booost"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bass Boost" />

            <SeekBar
                android:id="@+id/bass_boost"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="14dp"
                android:max="1000"
                android:progress="0" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.13"
                android:text="TextView" />

            <SeekBar
                android:id="@+id/slider1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="14dp"
                android:layout_weight="0.13"
                android:max="100"
                android:progress="50"
                android:secondaryProgress="50" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.13"
                android:text="TextView" />

            <SeekBar
                android:id="@+id/slider_2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="25dp"
                android:layout_weight="0.13"
                android:max="100"
                android:progress="50"
                android:secondaryProgress="50" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.13"
                android:text="TextView" />

            <SeekBar
                android:id="@+id/slider_3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:layout_weight="0.13"
                android:max="100"
                android:progress="50"
                android:secondaryProgress="50" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.13"
                android:text="TextView" />

            <SeekBar
                android:id="@+id/slider_4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_weight="0.13"
                android:max="100"
                android:progress="50"
                android:secondaryProgress="50" />

            <TextView
                android:id="@+id/textView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.13"
                android:text="TextView" />

            <SeekBar
                android:id="@+id/slider_5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_weight="0.13"
                android:max="100"
                android:progress="50"
                android:secondaryProgress="50" />
        </LinearLayout>
    </FrameLayout>

</TabHost>
Run Code Online (Sandbox Code Playgroud)

接下来,您必须在Fragment中设置选项卡.步骤很简单:

  1. 使用View.findViewById(int id)获取对TabHost的引用;
  2. 调用TabHost.setup();
  3. 将每个选项卡添加到TabHost.

这是设置Fragment视图的Fragment代码:

public class FragmentWithTabs extends Fragment {

private TabHost mTabHost;

public FragmentWithTabs(){}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.fragment_test, container, false);

    mTabHost = (TabHost) v.findViewById(android.R.id.tabhost);
    mTabHost.setup();
    mTabHost.addTab(mTabHost.newTabSpec("tab_power").setContent(R.id.tabPower).setIndicator("Tab Power"));
    mTabHost.addTab(mTabHost.newTabSpec("tab_eq").setContent(R.id.tabEq).setIndicator("Tab Eq"));


    return v;
}


}
Run Code Online (Sandbox Code Playgroud)

而已!这是截图或2:

这是电源选项卡

这是eq选项卡