我的应用程序有一个带有四个选项卡的tabhost，现在我正在尝试为横向模式制作漂亮的布局。为了利用额外的水平空间，我想将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>
最佳答案
这是我设置TabHost的方式，以在屏幕左侧显示标签，并垂直堆叠标签。
一个需要为 Activity 设置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 ids标签和tabcontent。
在landscape中，我通过反转所有控件的布局高度/宽度属性并将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放在上面XML中的FrameLayout之后。
TabWidget本身就是LinearLayout。注意，我没有在XML中设置方向。这是因为TabWidget用自己的代码完成了(是的，它是硬编码的)。为了解决这个问题，必须在代码中重新设置方向。这是我在 Activity 的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创建的，因此必须显式调用其setup方法。
创建标签的常用方法是调用:
tabHost.addTab(tabHost.newTabSpec("tab name").setIndicator("title", icon).setContent(...));
setIndicator方法将标题字符串和drawable作为参数，创建仅在纵向模式下有效的布局。必须创建自己的 View 并将其提供给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代码的区别在于， View 布局本身，TextView和ImageView ID是来自我们自己的应用程序，而不是Android内部ID。
对于纵向模式，我们可以重复使用我们存储在res/layout中的Android中的tab_indicator.xml:
<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>
同样，除了id之外，这与原始的Android XML相同。对于景观友好版本，我们需要再次反转布局的width和height属性。这使我们可以使用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 on SkyDrive
关于android:orientation ="vertical"不适用于TabWidget，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4149953/