Android, содержимое вкладок перекрывается

Question

Я пытаюсь настроить вкладки для своего приложения. Но после того, как я закончил работу с пользовательским интерфейсом, нажатие на вкладки вызывает одновременное отображение кнопок и меток. Например, 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> 

Это мой файл макета, пожалуйста, сообщите мне, есть ли что-то, что я должен реализовать.

Answer 1

Редактировать начало вашего 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.

Answer 2

Возможно, есть несколько вещей, которые вы можете изменить здесь, чтобы сделать свой макет верхней меткой. Во-первых, изменить ваш макет XML, заметив несколько вещей:

1. Android имеет встроенные идентификаторы для элементов 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_width и android:layout_height вы дали match_parent и match_parent для TabHost и match_parentwrap_content & для TabWidget, потому что андроид даст вам хороший макет, по умолчанию;
4. Я удалил LinearLayout, который вы включили в качестве ребенка от TabHost; в этом нет необходимости;
5. Значение fill_parent для android:layout_width и android: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> 

Далее вы должны заботиться о настройке вкладки в вашем фрагменте. Этапы просты:

1. Получить ссылку на TabHost с помощью View.findViewById (int id);
2. Звоните TabHost.setup();
3. Добавить каждую вкладку в TabHost.

Вот фрагмент кода, который устанавливает вид фрагмента:

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: