Android: Ориентация = "вертикальный" не работает для TabWidget - PullRequest
12 голосов
/ 11 ноября 2010

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

Screenshot

<?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>

Ответы [ 4 ]

21 голосов
/ 23 марта 2011

Вот как я настроил 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 делает это в своем собственном коде (да, он жестко запрограммирован).Чтобы противостоять этому, необходимо заново установить ориентацию в коде.Вот как я это сделал в своей деятельности

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

4 голосов
/ 11 ноября 2010

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

3 голосов
/ 25 апреля 2011

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

getTabWidget().setOrientation(LinearLayout.VERTICAL);

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

0 голосов
/ 02 октября 2014

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

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

Спасибо, Happpieeee кодирование

...