Question

我的应用程序有一个带有四个选项卡的tabhost，现在我正在尝试为横向模式制作漂亮的布局。为了利用额外的水平空间，我想将TabWidget放在屏幕的右侧，而cource的所有标签必须在另一个之下（如列中）。但是当切换到横向模式时，所有标签都会排成一行，看起来很难看。如何解决？

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>

Answer 1

这就是我设置 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 ids 标签和 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>

请注意，如果您想要右侧的标签，请将 FrameWayout 放在上面的XML中的 FrameLayout 之后。

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 方法，将标题字符串和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 ID来自我们自己的应用程序，而不是Android内部ID。

对于纵向模式，我们可以重用Android中的tab_indicator.xml，我们存储在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>

同样，除了ID之外，这与原始的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 on SkyDrive

Answer 2

TabHost不支持orientation属性，标签只能水平使用。

Answer 3

所以，唯一重要的是认为你必须这样做：

getTabWidget().setOrientation(LinearLayout.VERTICAL);

因为TabWidget在setOrientation(LinearLayout.HORIZONTAL);方法中已经硬编码initTabWidget()。我不知道为什么。

Answer 4

这里我对Vertical Tab对齐视图有一个相似的解决方案

请访问此链接： - how to change the layout in frame layout on the click event?

谢谢 Happpieeee编码

android：orientation =“vertical”对TabWidget不起作用

4 个答案: