【问题标题】:Change tab background color and remove divider line between tabs更改选项卡背景颜色并删除选项卡之间的分隔线
【发布时间】:2011-06-01 07:46:51
【问题描述】:

我想在我的应用程序中显示选项卡,但默认情况下,在 android 中,选项卡之间有这样的分隔线

                            Tab1 | Tab2 | Tab3 |

但我想显示这样的标签

                            Tab1 Tab2 Tab3

所以我想删除两个选项卡之间的分隔线,并且默认情况下选项卡的背景颜色是灰色。所以我想把它改成黑色。

请告诉如何删除两个选项卡之间的分隔线并更改选项卡的背景颜色。

提前致谢。

最好的问候。

【问题讨论】:

    标签: android tabs


    【解决方案1】:

    用途:

    tabHost.getTabWidget().setDividerDrawable(null);
    

    删除分隔线。

    【讨论】:

    • 行被删除但是标签之间的间距呢??
    【解决方案2】:

    我在 ICS 中遇到了问题,其中分隔线可见。除了以下之外,其他解决方案均无效。

    <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:gravity="bottom"
                android:layout_alignParentBottom="true"
                android:fadingEdge="none"
                android:showDividers="none" >
            </TabWidget>
    

    关键行是android:showDividers="none"

    【讨论】:

      【解决方案3】:

      使用此方法和 Layout 为选项卡使用您自己的布局。要移除分隔线,只需将背景 9patch 图形替换为您自己的。

      public static View prepareTabView(Context context, String text, Drawable background) {
          View view = LayoutInflater.from(context).inflate(R.layout.fake_native_tab, null);
          TextView tv = (TextView) view.findViewById(R.id.fakeNativeTabTextView);
          tv.setText(text);
          view.setBackgroundDrawable(background);
          return view;
      }
      

      fake_native_tab.xml:

      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/fakeNativeTabLayout" android:layout_width="wrap_content"
      android:layout_height="wrap_content" android:gravity="center"
      android:orientation="vertical" android:background="@drawable/default_tab_background">
      <!--
             You can even define an Icon here (dont forget to set a custom icon in your code for each Tab):
          <ImageView android:id="@+id/fakeNativeTabImageView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" android:src="@drawable/icon" />
      -->
          <TextView android:id="@+id/fakeNativeTabTextView"
          android:layout_width="wrap_content" android:layout_height="wrap_content"
          android:textColor="@color/tab_text_color" android:textSize="@dimen/text_size_tiny"
          android:text="Tab" android:ellipsize="marquee" />
      
      </LinearLayout>
      

      用法(在您的TabActivity 内):

      /* Create Tabs */
      // reusable Tab Spec
      TabHost.TabSpec spec;
      Intent tabIntent;
      tabHost = getTabHost();
      Resources res = getResources();
      
      // Tab 1:
      tabIntent = new Intent().setClass(this, Favorite.class);
          spec = tabHost.newTabSpec(TAB_SOMETAB).setIndicator(
                  prepareTabView(this, (String) getText(R.string.tab_favorite), res
                          .getDrawable(R.drawable.tab_favorite_background), 0)).setContent(tabIntent);
      tabHost.addTab(spec);
      
      
      
      // Tab 2:
      tabIntent = new Intent().setClass(this, History.class);
      spec = tabHost.newTabSpec(TAB_SOMEOTHERTAB).setIndicator(
                  prepareTabView(this, (String) getText(R.string.tab_history), res
                          .getDrawable(R.drawable.tab_favorite_background), 0)).setContent(tabIntent);
      tabHost.addTab(spec);
      

      【讨论】:

      • 感谢您的回复,我也想删除两个标签之间的分隔线。请告诉我如何删除两个标签之间的分隔线
      • 它可以通过编程方式设置标签的宽度和高度,所以尝试扩大宽度然后你可能会得到它......
      • 只需使用没有分隔线的背景图形。