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

Posted

技术标签:

【中文标题】如何在 android 的 Tabwidget 中删除填充或边距?【英文标题】:How can remove padding or margin in Tabwidget in android? 【发布时间】:2015-08-14 15:10:28 【问题描述】:

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

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_
android:layout_>
<LinearLayout
    android:orientation="vertical"
    android:layout_
    android:layout_>

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

        android:layout_
        android:layout_>

        <TextView
            android:tag="tab0"
            android:text="Tab 1"
            android:padding="0px"
            android:layout_margin="0px"
            android:layout_
            android:layout_

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

    </TabWidget>
    </HorizontalScrollView>

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_
        android:layout_>

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

    </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);
    

【问题讨论】:

如何解决? 【参考方案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"/>

【讨论】:

【参考方案2】:

除了@Bart 说的(tabPaddingStart 和 tabPaddingEnd),你可能需要覆盖这个维度

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

【讨论】:

【参考方案3】:

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

所以,每个“标签”应该如下所示:

        <TextView
        android:tag="tab1"
        android:text="Tab 2"
        android:layout_     // !!
        android:layout_    // !!
        />

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

【讨论】:

ok 然后增加 textSize。 TextView 不会自动缩放以匹配其父项 我不想匹配_parent。 我想删除多余的空间来拥有更小的标签。

以上是关于如何在 android 的 Tabwidget 中删除填充或边距?的主要内容,如果未能解决你的问题,请参考以下文章

Android TabHost TabWidget的使用

android之TabWidget选项卡

Android 实现分页(使用TabWidget/TabHost)

让 Android SDK WebView 和 TabWidget 玩得很好

android 实现切换界面的是啥控件,怎么自定义?如图,框框里的是怎么实现的.这个不是tabwidget吧?

TabHost实现简单Tab切换