首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >删除TabLayout的左、右填充

删除TabLayout的左、右填充
EN

Stack Overflow用户
提问于 2017-02-22 14:11:50
回答 3查看 7.9K关注 0票数 1

我正在使用选项卡布局,下面是我的代码

代码语言:javascript
复制
  <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="fixed"

        android:minHeight="?attr/actionBarSize"
        app:tabTextColor="#000"
        app:tabSelectedTextColor="#fff"
        app:tabIndicatorColor="@android:color/white"

        android:clipToPadding="false"
        />

如下所示添加标签

//创建页签

LayoutInflater.from(this).inflate(R.layout.custom_tab,标签= ( TextView );tabLayout.addTab(tabLayout.newTab().setCustomView(tab));;TextView(“TextView”);tab.setText R.mipmap.ic_home_black_24dp,0,0);null

代码语言:javascript
复制
TextView tab2 = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab2.setText("Report");
tab2.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_trending_up_black_24dp, 0, 0);
tabLayout.addTab(tabLayout.newTab().setCustomView(tab2));

TextView tab3 = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab3.setText("Medicine");
tab3.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_home_black_24dp, 0, 0);
tabLayout.addTab(tabLayout.newTab().setCustomView(tab3));

TextView tab4 = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tab4.setText("More");
tab4.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.ic_trending_up_black_24dp, 0, 0);
tabLayout.addTab(tabLayout.newTab().setCustomView(tab4));

这是我的手机截图

代码语言:javascript
复制
https://i.stack.imgur.com/kYNs1.png

两件事1.如何删除选项卡布局左侧和右侧的空间?

2.如何更改活动和非活动选项卡的文本和图标的颜色

EN

回答 3

Stack Overflow用户

发布于 2017-02-22 14:17:03

  1. 在选项卡布局中删除选项卡中的填充

在TabLayout中,您必须将tabPaddingEnd和tabPaddingStart设置为0dp。

app:tabPaddingEnd="0dp"/>

  • change
票数 15
EN

Stack Overflow用户

发布于 2017-02-22 14:21:50

对于调整间距,您可以使用app:tabMinWidth like或tabPaddingStart/tabPaddingEnd/tabPaddingTop/tabPaddingBottom

代码语言:javascript
复制
<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="fixed"
        app:tabMinWidth="50dp"
        app:tabPaddingBottom="1dp"
        app:tabPaddingEnd="1dp"
        app:tabPaddingStart="1dp"
        app:tabPaddingTop="1dp"
        android:minHeight="?attr/actionBarSize"
        app:tabTextColor="#000"
        app:tabSelectedTextColor="#fff"
        app:tabIndicatorColor="@android:color/white"

        android:clipToPadding="false"
        />

为了简单起见,你可以使用下面的颜色代码

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

并将其保存在可绘制的tab_color_selector.xml

并使用

代码语言:javascript
复制
app:tabBackground="@drawable/tab_color_selector"

所以总的代码将是

代码语言:javascript
复制
<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="fixed"
        app:tabMinWidth="50dp"
        android:minHeight="?attr/actionBarSize"
        app:tabTextColor="#000"
        app:tabSelectedTextColor="#fff"
        app:tabIndicatorColor="@android:color/white"
        app:tabBackground="@drawable/tab_color_selector"
        android:clipToPadding="false"
        />

tab_background_selectedtab_background_unselected中提供颜色,就像#000000一样。或者直接使用#000000而不是@color/tab_background_unselected

票数 0
EN

Stack Overflow用户

发布于 2017-02-22 14:22:28

尝尝这个,

代码语言:javascript
复制
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/bg_forum_tab"
        app:tabIndicatorColor="@color/colorBtnBg"
        app:tabIndicatorHeight="0dp"
        app:tabPaddingBottom="-1dp"
        app:tabPaddingEnd="-1dp"
        app:tabPaddingStart="-1dp"
        app:tabPaddingTop="-1dp"
        style="@style/CustomTabLayoutStyle"
        app:tabTextColor="@color/colorWhite" />

如下所示设置tabPaddingStart/tabPaddingEnd/tabPaddingTop/tabPaddingBottom。

代码语言:javascript
复制
    Styles:

    <style name="CustomTabLayoutStyle" parent="Base.Widget.Design.TabLayout">
        <item name="tabSelectedTextColor">@color/tab_text_selected</item>
        <item name="tabIndicatorColor">@color/tab_indicator</item>
        <item name="tabTextAppearance">@style/CustomTabTexStyle</item>
    </style>

    <style name="CustomTabTexStyle" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/tab_text</item>

        ...
    </style>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42383966

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档