android - Android，标签的内容重叠

Question

我正在尝试为我的应用设置标签。但是，在我完成 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>

这是我的布局文件，如果有什么我应该实施的，请告诉我。

score 5 · Accepted Answer

您可能可以在此处更改一些内容以使您的布局一流。首先，修改您的布局 xml，注意以下几点：

Android 为 tabhost 的元素内置了 ID：@android:id/tabhost, @android:id/tabs, @android:id/tabcontent. 为了简单起见，我建议使用它们；
FrameLayout @android:id/tabcontent需要一个值或内容将android:paddingTop显示在选项卡的顶部。我选择了 62dp（参见http://androidituts.com/android-tab-layout-example/）；
我已经更改了android:layout_widthandandroid:layout_height你给match_parent和match_parentforTabHost和match_parent&wrap_content因为TabWidget默认情况下 android 会给你一个很好的布局；
我已经删除了LinearLayout你作为孩子包含的TabHost; 没必要；
和的fill_parent值已弃用，因此我将其替换为. 请参阅http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html，其中描述了 fill_parent：android:layout_widthandroid:layout_heightmatch_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>

接下来，您必须注意在 Fragment 中设置选项卡。步骤很简单：

使用 View.findViewById(int id) 获取对 TabHost 的引用；
调用 TabHost.setup();
将每个选项卡添加到 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;
}


}

而已！这是屏幕截图或2：

这是电源选项卡

这是 eq 选项卡

score 0 · Accepted Answer

将 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"
    tools:context=".MainActivity" >

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

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

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

隐藏/显示您应该在MainActivity.

android - Android，标签的内容重叠

2 回答 2

Related

Reference