Android:底部的标签


148

我已经看到一些关于此的chat不休,但并不确定。有没有一种方法可以将TabWidget中的选项卡放在屏幕底部?如果是这样,怎么办?

我尝试了以下方法,但是没有用:

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

谢谢!llappall


10
请定义“无效”。
CommonsWare 2010年


3
如果您想让iPhone像标签主机一样,请看这里
Adil Soomro 2012年

Answers:


272

这是在屏幕底部获取标签的最简单,最可靠,可扩展的解决方案。

  1. 在垂直的LinearLayout中,将FrameLayout放在TabWidget上方
  2. 在FrameLayout和TabWidget上都 设置layout_heightwrap_content
  3. 设置FrameLayout的 android:layout_weight="1"
  4. 设置TabWidget的android:layout_weight="0"(默认为0,但出于强调,可读性等原因)
  5. 设置TabWidget的android:layout_marginBottom="-4dp"(删除底部的分隔线)

完整代码:

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

3
分隔线实际上是硬编码的。我试图更改用于选项卡的可绘制对象并找到了它。总可怜。
杰里米·洛根

6
您应该选择此(或其他)作为可接受的答案。
JediPotPie 2010年

4
与Google的标准TabWidget示例唯一需要的偏差是layout_weight=1在FrameLayout上进行设置。这允许制表符控件首先从LinearLayout中“声明”其高度。
尼克·法里纳

19
为了摆脱TabWidget底部的分隔线,只需将其添加android:layout_marginBottom="-5px"到TabWidget。这会将TabWidget从屏幕底部移出5个像素,刚好足以使您看不到分隔线。FrameLayout将补偿尺寸,因此效果完美。我不确定分频器的大小是否会在较大的设备上更改。您可能必须使用dp而不是px
杰克·威尔逊

1
我已经将remove-divider注释合并到了答案中。
Arne Evertsson '02

38

试试看;)只看一下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>

4
+1但是您是否注意到屏幕顶部的黑色/灰色栏?您如何删除它?
ahmet emrah

我正在使用它来将选项卡小部件发布到表单的左侧。
mr.j05hua 2012年

12

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

1)遵循本教程: android-tabs-with-fragments

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

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

这是我现在正在处理的屏幕截图。我还有一些工作要做,主要是为图标创建一个选择器,并确保水平分布相等,但是您明白了。就我而言,我使用的是片段,但相同的主体应应用于标准选项卡视图。

在此处输入图片说明


自您发布此消息已有一段时间了,但是您的链接现在显示“ 欢迎使用nginx!页面上没有其他任何内容。
DroidDev 2014年

1
这不是我的网站,很遗憾,我无法控制它。经过这段时间之后,系统已经发生了足够的变化,以至于您可能不应该为Android用户实现这种界面,他们希望现在情况会有所不同。
Brill Pappin 2014年

3

不知道它是否适用于所有版本的Android(尤其是那些具有自定义UI内容的版本),但是我能够通过添加以下内容来删除底部的灰色条

 android:layout_marginBottom="-3dp"

到TabWidget XML ...


3

对于尝试删除tabWidget分隔线的所有人员,这里有一个示例项目(及其相应的教程),它们非常适合自定义选项卡,从而消除了选项卡在底部时的问题。Eclipse项目:android-custom-tabs;原始说明:博客;希望这会有所帮助。



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

1

这可能不完全是您想要的(将“选项卡”发送到屏幕底部不是一个“简单”的解决方案),但是我还是想向您提供一个有趣的替代解决方案:

ScrollableTabHost的行为类似于TabHost,但具有附加的scrollview以适合更多项目...

也许深入研究这个开源项目,您会找到问题的答案。如果我发现更简单的方法,我会尽快与您联系。


1

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

在Android中添加标签并放置它们


1

是的,请参阅: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);      


}

}


0

我建议将此代码用于稳定的工作,它针对选项卡中的嵌套片段(例如嵌套的MapFragment)进行了优化,并在“请勿保留活动”上进行了测试:https ://stackoverflow.com/a/23150258/2765497

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.