Вот как я настроил 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