Android：底部的标签

Android: Tabs at the BOTTOM

提问by llappall

I've seen some chatter about this, but nothing definite. Is there a way to put the tabs in a TabWidget to the bottom of the screen? If so, how?

我看到了一些关于这个的喋喋不休，但没有确定。有没有办法将 TabWidget 中的选项卡放在屏幕底部？如果是这样，如何？

I've tried the following, but didn't work:

我尝试了以下方法，但没有奏效：

a) setting the tabwidget below the framelayout
b) setting the tabwidget's gravity to "bottom"

a) 将 tabwidget 设置在框架布局下方
b) 将 tabwidget 的重力设置为“底部”

Thanks! llappall

谢谢！拉帕尔

回答by stormin986

Here's the simplest, most robust, and scalable solution to get tabs on the bottom of the screen.

这是在屏幕底部获取选项卡的最简单、最强大和可扩展的解决方案。

1. In your vertical LinearLayout, put the FrameLayout above the TabWidget
2. Set layout_heightto wrap_contenton both FrameLayout and TabWidget
3. Set FrameLayout's android:layout_weight="1"
4. Set TabWidget's android:layout_weight="0"(0 is default, but for emphasis, readability, etc)
5. Set TabWidget's android:layout_marginBottom="-4dp"(to remove the bottom divider)

1. 在您的垂直 LinearLayout 中，将 FrameLayout 放在 TabWidget 上方
2. 在 FrameLayout 和 TabWidget 上都 设置layout_height为wrap_content
3. 设置 FrameLayout 的 android:layout_weight="1"
4. 设置 TabWidget 的android:layout_weight="0"（0 是默认值，但为了强调、可读性等）
5. 设置 TabWidget 的android:layout_marginBottom="-4dp"（删除底部分隔线）

Full code:

完整代码：

<?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:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">

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

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:layout_marginBottom="-4dp"/>

    </LinearLayout>

</TabHost>

回答by Leaudro

Try it ;) Just watch the content of the FrameLayout(@id/tabcontent), because I don't know how it will handle in case of scrolling... In my case it works because I used ListView as the content of my tabs. :) Hope it helps.

试试看 ;) 只看 FrameLayout(@id/tabcontent) 的内容，因为我不知道在滚动的情况下它会如何处理......在我的情况下它有效，因为我使用 ListView 作为我的标签的内容. ：） 希望能帮助到你。

<?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">
    <RelativeLayout 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">
        <FrameLayout android:id="@android:id/tabcontent"
             android:layout_width="fill_parent" 
             android:layout_height="fill_parent"
             android:layout_alignParentTop="true" 
             android:layout_above="@android:id/tabs" />
    <TabWidget android:id="@android:id/tabs"
             android:layout_width="fill_parent" 
             android:layout_height="wrap_content"
             android:layout_alignParentBottom="true" />
    </RelativeLayout>
</TabHost>

回答by Brill Pappin

There is a way to remove the line.

有一种方法可以删除该行。

1) Follow this tutorial: android-tabs-with-fragments

1）按照本教程： android-tabs-with-fragments

2) Then apply the RelativeLayout change that Leaudro suggested above (apply the layout props to all FrameLayouts).

2) 然后应用 Leaudro 上面建议的 RelativeLayout 更改（将布局道具应用到所有 FrameLayouts）。

You can also add an ImageView to the tab.xml in item #1 and get a very iPhone like look to the tabs.

您还可以将 ImageView 添加到项目 #1 中的 tab.xml 中，并获得非常像 iPhone 的选项卡外观。

Here is a screenshot of what I'm working on right now. I still have some work to do, mainly make a selector for the icons and ensure equal horizontal distribution, but you get the idea. In my case, I'm using fragments, but the same principals should apply to a standard tab view.

这是我现在正在做的事情的屏幕截图。我还有一些工作要做，主要是为图标做一个选择器并确保水平分布相等，但你明白了。就我而言，我使用的是片段，但相同的原则应该适用于标准选项卡视图。

回答by Djumaka

For all those of you that try to remove the separating line of the tabWidget, here is an example project (and its respective tutorial), that work great for customizing the tabs and thus removing problems when tabs are at bottom. Eclipse Project: android-custom-tabs; Original explanation: blog; Hope this helped.

对于所有尝试删除 tabWidget 的分隔线的人，这里有一个示例项目（及其各自的教程），它非常适合自定义选项卡，从而消除选项卡位于底部时的问题。Eclipse 项目：android-custom-tabs；原解释：博客；希望这有帮助。

回答by Justin

Not sure if it will work for all versions of Android (especially those with custom UI stuff), but I was able to remove the gray bar at the bottom by adding

不确定它是否适用于所有版本的 Android（尤其是那些具有自定义 UI 内容的版本），但我能够通过添加删除底部的灰色条

 android:layout_marginBottom="-3dp"

to the TabWidget XML...

到 TabWidget XML...

回答by MduSenthil

There are two ways to display tabs at the bottom of a tab activity.

有两种方法可以在选项卡活动的底部显示选项卡。

1. Using relative layout
2. Using Layout_weight attribute

1. 使用相对布局
2. 使用 Layout_weight 属性

Please check the link for more details.

请查看链接了解更多详情。

回答by Sanjay Mangaroliya

<?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"
        android:orientation="vertical" >

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

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:background="#252a31"
            android:tabStripEnabled="false" >
        </TabWidget>
    </LinearLayout>

</TabHost>

回答by Zeeshan

I was having the same problem with android tabs when trying to place them on the bottom of the screen. My scenario was to not use a layout file and create the tabs in code, I was also looking to fire activities from each tab which seemed a bit too complex using other approaches so, here is the sample code to overcome the problem:

尝试将它们放在屏幕底部时，我遇到了与 android 标签相同的问题。我的方案是不使用布局文件并在代码中创建选项卡，我还希望从每个选项卡中触发活动，使用其他方法似乎有点过于复杂，因此，这里是解决问题的示例代码：

adding-tabs-in-android-and-placing-them

在android-and-placeing-them中添加标签

回答by Hubert

This may not be exactly what you're looking for (it's not an "easy" solution to send your Tabs to the bottom of the screen) but is nevertheless an interesting alternative solution I would like to flag to you :

这可能不是您正在寻找的内容（将选项卡发送到屏幕底部不是一个“简单”的解决方案），但仍然是我想向您标记的一个有趣的替代解决方案：

ScrollableTabHostis designed to behave like TabHost, but with an additional scrollview to fit more items ...

ScrollableTabHost的设计行为类似于 TabHost，但具有额外的滚动视图以适应更多项目......

maybe digging into this open-source project you'll find an answer to your question. If I see anything easier I'll come back to you.

也许深入研究这个开源项目，您会找到问题的答案。如果我看到任何更容易的东西，我会回来找你的。

回答by Pavel

Yes, see: link, but he used xml layouts, not activities to create new tab, so put his xml code (set paddingTop for FrameLayout - 0px) and then write the code:

是的，参见：link，但他使用 xml 布局，而不是活动来创建新选项卡，所以把他的 xml 代码（为 FrameLayout 设置 paddingTop - 0px）然后编写代码：

public class SomeActivity extends ActivityGroup {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

    TabHost tab_host = (TabHost) findViewById(R.id.edit_item_tab_host); 

    tab_host.setup(this.getLocalActivityManager());

    TabSpec ts1 = tab_host.newTabSpec("TAB_DATE"); 
    ts1.setIndicator("tab1"); 
    ts1.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts1); 

    TabSpec ts2 = tab_host.newTabSpec("TAB_GEO"); 
    ts2.setIndicator("tab2"); 
    ts2.setContent(new Intent(this, Login.class)); 
    tab_host.addTab(ts2); 

    TabSpec ts3 = tab_host.newTabSpec("TAB_TEXT"); 
    ts3.setIndicator("tab3"); 
    ts3.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts3); 

    tab_host.setCurrentTab(0);      


}

}

}