TabLayout切换选项背景和修改字体大小

转载 2016年08月29日 15:12:36

TabLayout切换选项背景和修改字体大小

首先呢,TabLayout是Android5.0后出的新控件,使用需要导入design包,一般情况下,TabLayout需要和ViewPager搭配使用。

在TabLayout标签属性中,只有改变切换文字颜色属性的,就连文字大小的设置也没有直接属性可设置。

其实设置很简单,只需要设置 app:tabBackground 和 app:tabTextAppearance 的属性,即可实现。

TabLayout xml设置代码如下:

<code class="hljs perl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><android.support.design.widget.TabLayout
            android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@+</span>id/tablayout_video"</span>
            android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>
            android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@dimen</span>/tablayout_height"</span>
            app:tabBackground=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@drawable</span>/tablayout_background"</span>
            app:tabIndicatorHeight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0dp"</span>
            app:tabSelectedTextColor=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@color</span>/white"</span>
            app:tabTextAppearance=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@style</span>/TabLayoutTextStyle"</span>
            app:tabTextColor=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@color</span>/white"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

app:tabBackground 属性:此处要写一个selector

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">selector</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">item</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:drawable</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/tab_horizontal_item_p"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:state_selected</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true"</span> /></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">item</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:drawable</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/tab_horizontal_item_d"</span> /></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">selector</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

app:tabTextAppearance 属性:此处要写一个style

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"TabLayoutTextStyle"</span>></span><span class="css" style="box-sizing: border-box;">
        <<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">item</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">name</span>="<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">android</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:textSize"</span>><span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">dimen/text_16_sp</item></span>
</span></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

最后说一下,因为TabLayout在布局底部是自带一条滚动条的,为了实现块状切换的效果,可以把 app:tabIndicatorHeight 属性设置为0dp,去掉滚动条

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-label" style="box-sizing: border-box;">app:</span>tabIndicatorHeight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0dp"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

最后上一张效果图:

这里写图片描述

Android中TabLayout切换选项背景和修改字体大小

原创:转载请标明出处: http://blog.csdn.net/ming2316780/article/details/51763864 本文出自:【Android_Jerry的博客】Tab...
  • ming2316780
  • ming2316780
  • 2016年06月26日 18:46
  • 35122

TabLayout的Tab切换时文字大小问题

在Tab切换时可以设置Tab的文字颜色,但是现在需要同时改变Tab的字体大小。如上图,设置颜色的变化用tabSelectedTextColor就可以了,但是设置TextSize的选中与非选中状态的方法...
  • sun1594732
  • sun1594732
  • 2016年10月13日 14:53
  • 2124

设置tablayout选中文字颜色和背景图片

很想爆粗口!!!!!妈的,我的tablayout为什么在布局文件下面写的时候就是不好用的,改变什么都是不好用的!!!没办法只能用代码的方式来粗暴的解决问题了。。。。一下是解决的关键问题的代码,,,,直...
  • lovePaul77
  • lovePaul77
  • 2017年04月11日 20:36
  • 2800

Android中TabLayout切换选项背景和修改字体大小

原创:转载请标明出处:  http://blog.csdn.net/ming2316780/article/details/51763864  本文出自:【Android_Jerry的博客】 ...
  • Rodulf
  • Rodulf
  • 2016年11月03日 17:46
  • 738

tablayout修改成自定义字体,自由大小写

项目中需要用到Tablayout 自定义view ,花费了一些时间 ,现在我把方法公布一下,希望帮到大家. View childView = null; for...
  • qq_36331942
  • qq_36331942
  • 2017年05月18日 17:29
  • 726

TabLayout 字体个数不同 大小不同

  • cy123cy456cy
  • cy123cy456cy
  • 2017年09月02日 16:41
  • 438

TabLayout设置字体

TabLayout切换选项背景和修改字体大小 首先呢,TabLayout是Android5.0后出的新控件,使用需要导入design包,一般情况下,TabLayout需要和ViewPager搭配...
  • qq_30983519
  • qq_30983519
  • 2017年01月24日 17:39
  • 491

【Android】修改Tablayout中标签文字的样式

我们在用TabLayout和ViewPager做可以滑动的标签和碎片时,标签的样式一般只能设置文字颜色、滑块的颜色和厚度值如果我想设置文字的大小和加粗,在这必须用到app:tabTextAppeara...
  • yingpaixiaochuan
  • yingpaixiaochuan
  • 2016年11月14日 17:05
  • 1643

android中修改tablayout中的字体大小和颜色

http://blog.csdn.net/wode_dream/article/details/50424446   按步骤来吧。          一、activity_main.xml: ...
  • Rodulf
  • Rodulf
  • 2016年04月26日 19:42
  • 9217

android中修改tablayout中的字体大小和颜色

按步骤来吧。          一、activity_main.xml:
  • wode_dream
  • wode_dream
  • 2015年12月29日 10:35
  • 30137
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TabLayout切换选项背景和修改字体大小
举报原因:
原因补充:

(最多只允许输入30个字)