android:orientation=vertical не работает для TabWidget

В моем приложении есть вкладка с четырьмя вкладками, и теперь я пытаюсь сделать красивые макеты для ландшафтного режима. Чтобы использовать дополнительное горизонтальное пространство, я хочу разместить TabWidget в правой части экрана, и, конечно, все вкладки должны быть одна под другой (как в столбце). А вот при переключении в ландшафтный режим все вкладки выстраиваются подряд, выглядит это довольно некрасиво. Как это исправить?

Снимок экрана

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <LinearLayout

        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1">

            <include layout="@layout/filter_wizard"/>
            <include layout="@layout/filter_wizard"/>
            <include layout="@layout/filter_wizard"/>
            <include layout="@layout/filter_wizard"/>

            </FrameLayout>

             <TabWidget
            android:background="#75ffffff"
            android:id="@android:id/tabs"
            android:layout_width="wrap_content" android:orientation="vertical" 
            android:layout_height="fill_parent" android:layout_weight="0" />



    </LinearLayout>
</TabHost>

person aiboman    schedule 10.11.2010    source источник
comment
На самом деле я пытался заставить работать вертикальные вкладки с помощью tabhost/tabwidget. У меня никогда не получалось работать. вам, вероятно, придется перевернуть собственное представление вкладок, чтобы сделать это.   -  person Falmarri    schedule 11.11.2010
comment
Я согласен с Фалмарри. Это должно быть сделано в вашем собственном пользовательском макете. TabHost не очень хорош, когда вы пытаетесь настроить его так, чтобы он хорошо выглядел как для портретной, так и для альбомной ориентации.   -  person Austyn Mahoney    schedule 11.11.2010
comment
Фалмарри, Остин Махони, спасибо за объяснение. Есть ли реальный способ реализовать собственный виджет вкладок?   -  person aiboman    schedule 13.11.2010
comment
У вас есть возможность опубликовать свой проект?   -  person    schedule 23.06.2011
comment
Можете ли вы опубликовать свое решение? Срок действия ссылки на мегазагрузку истек.   -  person Dharmendra    schedule 01.09.2011


Ответы (4)


Вот как я настроил TabHost для отображения вкладок в левой части экрана с вертикальным расположением вкладок.

Для действия необходимо настроить 2 разных макета: один в портретном («нормальном») режиме, другой в ландшафтном режиме. Это подразумевает не использование TabActivity.

Я скопировал макет, используемый TabActivity, в свой проект и назвал его main_view.xml (хранится в res/layout). Вот:

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
         android:id="@+id/tabHost"
         android:layout_width="match_parent" 
         android:layout_height="match_parent">
    <LinearLayout android:orientation="vertical"
                  android:layout_width="match_parent" 
                  android:layout_height="match_parent">
        <TabWidget android:id="@android:id/tabs"
                   android:layout_height="wrap_content" 
                   android:layout_width="match_parent"
                   android:layout_weight="0" />
        <FrameLayout android:id="@android:id/tabcontent"
                     android:layout_width="match_parent" 
                     android:layout_height="0dip"
                     android:layout_weight="1"/>
    </LinearLayout>
</TabHost>

Необходимо повторно использовать идентификаторы Android tabs и tabcontent.

В альбомной ориентации я изменил это, инвертировав атрибуты высоты/ширины макета для всех элементов управления и установив ориентацию LinearLayout на горизонтальную (TabWidget и FrameLayout должны быть рядом друг с другом, горизонтально). Вот результат в res/layout-land, также называемый main_view.xml:

<TabHost   xmlns:android="http://schemas.android.com/apk/res/android" 
           android:id="@+id/tabHost"
           android:layout_width="match_parent" 
           android:layout_height="match_parent">
    <LinearLayout android:orientation="horizontal"
                  android:layout_width="match_parent" 
                  android:layout_height="match_parent">
        <TabWidget android:id="@android:id/tabs" 
                   android:layout_height="match_parent" 
                   android:layout_width="wrap_content"
                   android:layout_weight="0" />
        <FrameLayout android:id="@android:id/tabcontent"
                     android:layout_height="match_parent" 
                     android:layout_width="0dip"
                     android:layout_weight="1"/>
    </LinearLayout>
</TabHost>

Обратите внимание: если вам нужны вкладки справа, поместите TabWidget после FrameLayout в приведенном выше XML.

TabWidget сам по себе является LinearLayout. Обратите внимание, что я не задал ориентацию в XML. Это потому, что TabWidget делает это в своем собственном коде (да, это жестко запрограммировано). Чтобы противостоять этому, нужно переустановить ориентацию в коде. Вот как я это сделал в своей деятельности oncreate

setContentView(R.layout.main_view);

final TabHost tabHost = (TabHost) findViewById(R.id.tabHost);
tabHost.setup();

Resources res = getResources();
Configuration cfg = res.getConfiguration();
boolean hor = cfg.orientation == Configuration.ORIENTATION_LANDSCAPE;

if (hor) {
    TabWidget tw = tabHost.getTabWidget();
    tw.setOrientation(LinearLayout.VERTICAL);
}

Поскольку TabHost создается с помощью setContentView, необходимо явно вызывать его метод установки.

Обычный способ создать вкладку — вызвать:

tabHost.addTab(tabHost.newTabSpec("tab name").setIndicator("title", icon).setContent(...));

Метод setIndicator, принимая в качестве параметров строку заголовка и объект drawable, создает макет, допустимый только в портретном режиме. Нужно создать собственное представление и передать его setIndicator. Достаточно скопировать код TabSpec.LabelAndIconIndicatorStrategy.createIndicatorView:

   private View createIndicatorView(TabHost tabHost, CharSequence label, Drawable icon) {

       LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

       View tabIndicator = inflater.inflate(R.layout.tab_indicator,
               tabHost.getTabWidget(), // tab widget is the parent
               false); // no inflate params

       final TextView tv = (TextView) tabIndicator.findViewById(R.id.title);
       tv.setText(label);

       final ImageView iconView = (ImageView) tabIndicator.findViewById(R.id.icon);
       iconView.setImageDrawable(icon);

       return tabIndicator;
   }

Отличие от исходного кода Google заключается в том, что сам макет представления, идентификаторы TextView и ImageView взяты из нашего собственного приложения, а не из внутренних идентификаторов Android.

Для портретного режима мы можем повторно использовать tab_indicator.xml из Android, который мы храним в res/layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="64dip"
    android:layout_weight="1"
    android:layout_marginLeft="-3dip"
    android:layout_marginRight="-3dip"
    android:orientation="vertical"
    android:background="@drawable/tab_indicator">

    <ImageView android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
    />

    <TextView android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        style="?android:attr/tabWidgetStyle"
    />

</RelativeLayout>

Опять же, это идентично оригинальному Android XML, за исключением идентификаторов. Для альбомной версии нам нужно снова инвертировать атрибуты ширины и высоты макета. Что дает нам в res/layout-land:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="64dip"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:layout_marginTop="-3dip"
    android:layout_marginBottom="-3dip"
    android:orientation="vertical"
    android:background="@drawable/tab_indicator">

    <ImageView android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
    />

    <TextView android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        style="?android:attr/tabWidgetStyle"
    />
</RelativeLayout>

(Я изменил marginLeft и marginRight на marginTop и marginBottom, но не уверен, что это полезно)

Эти последние файлы XML ссылаются на @drawable/tab_indicator, поэтому нам нужно скопировать его из исходного кода Android, а также drawable/tab_selected.9.png, drawable/tab_unselected.9.png, drawable/tab_focus.9.png.

Теперь создание вкладки становится:

tabHost.addTab(tabHost.newTabSpec(AllTabName)
                .setIndicator(createIndicatorView(tabHost, "tab title", icon)))
                .setContent(this));

РЕДАКТИРОВАТЬ: демонстрационный проект доступен по адресу: VerticalTabHost на SkyDrive

person Timores    schedule 22.03.2011
comment
я делаю, как вы говорите, но когда экран горизонтален, мой результат заключается в том, что экран не может отображать tabWidget, только показывать tabContent - person pengwang; 02.04.2011
comment
У вас есть возможность опубликовать свой проект? Могу глянуть и сравнить со своим. - person Timores; 03.04.2011
comment
Спасибо за загрузку. Похоже, мой образец tab_indicator.xml отображался неправильно. Я повторно применил форматирование, и теперь оно выглядит завершенным (извините за это). Тег ‹RelativeLayout› не отображался. Эта часть была неправильной в вашем образце в res/layout-land/tab_indicator.xml. Я поменял атрибуты layout_width и layout_height (в вашем проекте), и теперь TabWidget правильно отображается в моем эмуляторе. - person Timores; 05.04.2011
comment
В моем эмуляторе вкладки отображались в обратном порядке, то есть в альбомной ориентации, когда в портретной, и наоборот. Может быть, это то, что вы хотели. Если я удаляю атрибут android:screenOrientation=landscape в манифесте, он отображается нормально. - person Timores; 05.04.2011
comment
Ваша ссылка в megauploads не работает, не могли бы вы отредактировать свой ответ и поместить исходный код, чтобы все пользователи могли видеть ваш пост? Я не могу отображать вкладки по вертикали, он отображает только контент, поэтому, пожалуйста, помогите мне. - person Dharmendra; 01.09.2011
comment
Я обновил ответ, чтобы включить ссылку на источники. Вот еще ссылка: skydrive.live.com/ - person Timores; 19.09.2011
comment
@Timores Я сделал XML, как сказано, и создал пользовательские представления для индикаторов. Моя активность настроена только на альбомную, поэтому я могу просто установить tw.setOrientation(LinearLayout.VERTICAL); в onCreate. Но затем мой TabWidget исчезает. на LinearLayout.HORIZONTAL отображается мой TabWidget. - person Siebe; 10.04.2013
comment
@Siebe комментарий Давора в ответе ATom говорит о том же. Если вы разместите свой код где-нибудь, я могу посмотреть. - person Timores; 10.04.2013

TabHost не поддерживает атрибут ориентации, и вкладки можно использовать только горизонтально.

person Romain Guy    schedule 11.11.2010

Итак, главное, что вы должны сделать, это:

getTabWidget().setOrientation(LinearLayout.VERTICAL);

Потому что TabWidget жестко запрограммировал setOrientation(LinearLayout.HORIZONTAL); в методе initTabWidget(). Я не знаю почему.

person ATom    schedule 25.04.2011
comment
Когда я это делаю, мой TabWidget исчезает. - person Davor; 01.08.2012

Здесь у меня есть похожее решение для просмотра выравнивания вертикальной вкладки.

Пожалуйста, перейдите по этой ссылке: - как изменить макет в макете фрейма в событии клика?

Спасибо, счастливое кодирование

person Rahul Gupta    schedule 02.10.2014