如何在 android 的 Tabwidget 中删除填充或边距？

Question

我想创建选项卡式应用程序。 一切都很好，但是当我创建选项卡时。选项卡之间的空间太大。 我想删除此填充或边距，但我不知道该怎么做。 有什么建议吗？

XML

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

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:scrollbars="none" >
    <TabWidget
        android:id="@android:id/tabs"
        android:padding="0px"
        android:layout_margin="0px"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:tag="tab0"
            android:text="Tab 1"
            android:padding="0px"
            android:layout_margin="0px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            />
        <TextView
            android:tag="tab1"
            android:text="Tab 2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab2"
            android:text="Tab 3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab3"
            android:text="Tab 4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab4"
            android:text="Tab 5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab5"
            android:text="Tab 6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab6"
            android:text="Tab 7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab7"
            android:text="Tab 8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab8"
            android:text="Tab 9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab9"
            android:text="Tab 10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

    </TabWidget>
    </HorizontalScrollView>

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <TextView
            android:text="Hallo1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo5"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo6"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo7"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo8"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo9"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo10"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

    </FrameLayout>
   </LinearLayout>
</TabHost>

这是我的代码：

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost);
    tabHost.setup();

    final TabWidget tabWidget = tabHost.getTabWidget();
    final FrameLayout tabContent = tabHost.getTabContentView();
    tabHost.getTabWidget().setDividerDrawable(R.drawable.empty);

    // Get the original tab textviews and remove them from the viewgroup.
    TextView[] originalTextViews = new TextView[tabWidget.getTabCount()];
    for (int index = 0; index < tabWidget.getTabCount(); index++) {
        originalTextViews[index] = (TextView) tabWidget.getChildTabViewAt(index);
    }
    tabWidget.removeAllViews();

    // Ensure that all tab content childs are not visible at startup.
    for (int index = 0; index < tabContent.getChildCount(); index++) {
        tabContent.getChildAt(index).setVisibility(View.GONE);
    }

    // Create the tabspec based on the textview childs in the xml file.
    // Or create simple tabspec instances in any other way...
    for (int index = 0; index < originalTextViews.length; index++) {
        final TextView tabWidgetTextView = originalTextViews[index];
        final View tabContentView = tabContent.getChildAt(index);

        TabSpec tabSpec = tabHost.newTabSpec((String) tabWidgetTextView.getTag());
        tabSpec.setContent(new TabHost.TabContentFactory() {
            @Override
            public View createTabContent(String tag) {
                return tabContentView;
            }
        });
        if (tabWidgetTextView.getBackground() == null) {
            tabSpec.setIndicator(tabWidgetTextView.getText());
        } else {
            tabSpec.setIndicator(tabWidgetTextView.getText(), tabWidgetTextView.getBackground());
        }
        tabHost.addTab(tabSpec);
    }


    tabHost.getTabWidget().setDividerDrawable(R.drawable.empty);

    if (Integer.parseInt(Build.VERSION.SDK) >= Build.VERSION_CODES.HONEYCOMB) {
        tabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
    }

//      tabHost.setCurrentTab(0);
    }
}

Answer 1

如果您查看 Tablayout 的基本样式：

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

你看到这两行

    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>

所以只需像这样为您的 Tablayout 创建一个样式：

  <style name="tab_bar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">65dp</item>
        <item name="android:background">@color/backgroundColor</item>
        <item name="android:tabStripEnabled">false</item>
        <item name="tabPaddingStart">0dp</item>
        <item name="tabPaddingEnd">0dp</item>
    </style>

并使用样式：

<android.support.design.widget.TabLayout android:id="@+id/tabs"
            app:tabGravity="fill"
            app:tabMode="fixed"
            style="@style/tab_bar"/>

Answer 2

除了@Bart 说的（tabPaddingStart 和 tabPaddingEnd），你可能需要覆盖这个维度

<dimen name="design_tab_scrollable_min_width">60dp</dimen>

Answer 3

将 layout.xml 中每个“选项卡”TextView 中的属性“wrap_content”更改为“match_parent”。

所以，每个“标签”应该如下所示：

        <TextView
        android:tag="tab1"
        android:text="Tab 2"
        android:layout_width="match_parent"     // !!
        android:layout_height="match_parent"    // !!
        />

请参阅here 了解两者的区别和解释。