专栏首页恩蓝脚本基于TabLayout中的Tab间隔设置方法(实例讲解)

基于TabLayout中的Tab间隔设置方法(实例讲解)

TabLayout和ViewPager搭配使用,是有很多方便性,但是TabLayout这东西还是有很多被人吐槽的地方。

这里只讲怎么设置tab之间的间隔,网上找了一堆方法,什么padding和margin的啥都没用,没办法,想用TabLayout只能自己想办法了。效果如下:

一、实现方法,既然这东西不好设置,那就直接在背景上做点事情,布局代码如下:

<android.support.design.widget.TabLayout
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/tl_download_tabs"
  android:layout_width="wrap_content"
  android:layout_height="30dp"
  android:layout_marginTop="10dp"
  android:layout_gravity="center_horizontal"
  android:overScrollMode="never"
  app:tabMode="fixed"
  app:tabPaddingStart="30dp"
  app:tabPaddingEnd="30dp"
  app:tabIndicatorHeight="0dp"
  app:tabBackground="@drawable/download_tab_bg_selector"
  app:tabSelectedTextColor="#000000"
  app:tabTextColor="#ffffff"/ 

二、其中关键的地方就在背景的selector上,代码如下:

<?xml version="1.0" encoding="utf-8"? 
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
 <item android:state_selected="true" 
  <!--<shape 
   <solid android:color="#ffffff"/ 
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" / 
  </shape -- 
  <!--为了让TabLayout内部的Tab有间隔,暂时找不到其他设置方法,只能在背景图形里面设置间隔-- 
  <layer-list 
   <item 
    <shape 
     <solid android:color="@android:color/transparent"/ 
    </shape 
   </item 
   <item android:left="5dp" android:right="5dp" 
    <shape 
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" / 
     <solid android:color="#ffffff"/ 
    </shape 
   </item 
  </layer-list 
 </item 
 <item android:state_selected="false" 
  <!--<shape 
   <solid android:color="#bcbcbc"/ 
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" / 
  </shape -- 
  <layer-list 
   <item 
    <shape 
     <solid android:color="@android:color/transparent"/ 
    </shape 
   </item 
   <item android:left="5dp" android:right="5dp" 
    <shape 
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" / 
     <solid android:color="#bcbcbc"/ 
    </shape 
   </item 
  </layer-list 
 </item 
</selector 

注释掉的地方是原来没间隔的selector,这里直接给背景设置了个左右的padding,效果杠杠的。

缺点:如果间隔过大的话,那这种方式就有一点的缺陷了,就是点击到空白处,也能选中tab。

不过对于间隔不是很大的,基本是感觉不出来的。

三、Activity的使用就很简单了:

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tl_download_tabs);
  mTabLayout.addTab(mTabLayout.newTab().setText("已下载"));
  mTabLayout.addTab(mTabLayout.newTab().setText("下载中"));
  mTabLayout.setupWithViewPager(mViewPager);

四、原来是线性布局下,放着TabLayout和ViewPager,试着在TabLayout外嵌套多一个RelativeLayout,发现出来的效果Tab的文字不显示了,至于网上说的调换addTab和setupWithViewPager的顺序也是坑,可以看到显示,但是出现了更离谱的情况,前面两个空白,后面还多了两个正常的,反正是很奇葩。

最后还是得在Adapter中去处理,把以下方法重写下就可以了,其实这样可能更合理些,至少能保证Tab的数量和ViewPager的页数是一致的。

@Override
  public CharSequence getPageTitle(int position) {
   if(position == 0){
    return "已下载";
   }else if(position == 1){
    return "下载中";
   }
   return "";
  }

以上这篇基于TabLayout中的Tab间隔设置方法(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android 软键盘状态并隐藏输入法的实例

    如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

    砸漏
  • 基于popupWindow实现悬浮半透明效果

    本文实例为大家分享了popupWindow实现悬浮半透明效果的具体代码,供大家参考,具体内容如下

    砸漏
  • Android自定义View实现箭头沿圆转动实例代码

    以上所述是小编给大家介绍的Android自定义View实现箭头沿圆转动实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非...

    砸漏
  • android之动画popowindows

    废话不多说,先看效果图: ? 这是主Activity代码: public class RollActivity extends Activity {   ...

    xiangzhihong
  • Android资源res之矢量图完全指南(加SVG-path命令分析)

    张风捷特烈
  • Android引入布局

    Dream城堡
  • 体验活动的生命周期

    当窗口处于停止状态的时候,我们需要保存一部分销毁前的值,可以使用bundle,如下:

    Dream城堡
  • Android 入门程序 Kotlin版(1)

    4个组件 TextView,Button,TextEdit,ImageView依次纵向线性布局。

    用户6021899
  • 微信朋友圈被折叠?会自动化不存在的(下)

    首先,使用 Android Studio 创建一个项目(这里以 JAVA 为例,Kotlin 类似)

    AirPython
  • Android开发笔记(一百三十二)矢量图形与矢量动画

    与水波图形RippleDrawable一样,矢量图形VectorDrawable也是Android5.0之后新增的图形类。矢量图不同于一般的图形,它是由一系...

    用户4464237

扫码关注云+社区

领取腾讯云代金券