注: 此库来着大神 https://github.com/H07000223/FlycoTabLayout
FlyconTabLayout一个Android TabLayout库,目前有3个TabLayout
SlidingTabLayout:
参照PagerSlidingTabStrip进行大量修改.
> 新增部分属性
> 新增支持多种Indicator显示器
> 新增支持未读消息显示
> 新增方法for懒癌患者
/** 关联ViewPager,用于不想在ViewPager适配器中设置titles数据的情况 */publicvoidsetViewPager(ViewPagervp,String[] titles)/** 关联ViewPager,用于连适配器都不想自己实例化的情况 */publicvoidsetViewPager(ViewPagervp,String[] titles,FragmentActivityfa,ArrayListfragments)
CommonTabLayout:
不同于SlidingTabLayout对ViewPager依赖,它是一个不依赖ViewPager可以与其他控件自由搭配使用的TabLayout.
> 支持多种Indicator显示器,以及Indicator动画
> 支持未读消息显示
> 支持Icon以及Icon位置
> 新增方法for懒癌患者
/** 关联数据支持同时切换fragments */publicvoidsetTabData(ArrayListtabEntitys,FragmentManagerfm,intcontainerViewId,ArrayListfragments)
SegmentTabLayout
实现：
FlycoTabLayout+TabLyout+ViewPager
第一步：在module.gradle中添加
dependenices{
compile 'com.android.support:support-v4:23.1.1'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.flyco.roundview:FlycoRoundView_Lib:1.1.2@aar'
compile 'com.flyco.tablayout:FlycoTabLayout_Lib:1.5.0@aar'
}
After v2.0.0(support 2.2+)
dependencies{
compile 'com.android.support:support-v4:23.1.1'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.0@aar'
}
After v2.0.2(support 3.0+)
dependencies{
compile 'com.android.support:support-v4:23.1.1'
compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.8@aar'
}
第二步：建立TabEntity这里是tab的标题、选中的图标、未选中的图标
public class TabLayoutEntity implements CustomTabEntity {
public String title;
public int selectedIcon;
public int unSelectedIcon;
public TabLayoutEntity(String title, int selectedIcon, int unSelectedIcon) {
this.title = title;
this.selectedIcon = selectedIcon;
this.unSelectedIcon = unSelectedIcon;
}
@Override
public String getTabTitle() {
return title;
}
@Override
public int getTabSelectedIcon() {
return selectedIcon;
}
@Override
public int getTabUnselectedIcon() {
return unSelectedIcon;
}
}
第三部：创建MainActivity
public class MainActivity extends BaseActivity {
@BindView(R.id.framelayout)
FrameLayout framelayout;
@BindView(R.id.commontablayout)
CommonTabLayoutm Tablayout;
//显示的title
@BindArray(R.array.bottom_tabs)
String mTitles[];
//未点击的icon
private int[] mIconUnselectIds= {
R.drawable.placeholder, R.drawable.placeholder,
R.drawable.placeholder, R.drawable.placeholder};
//点击后的icon
private int[] mIconSelectIds= {
R.drawable.leak_canary_icon, R.drawable.leak_canary_icon,
R.drawable.leak_canary_icon, R.drawable.leak_canary_icon};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
if(savedInstanceState ==null){
init();
}
}
@Override
protected voidinit() {
super.init();
//tab的标题、选中图标、未选中图标
ArrayList mTabEntities =newArrayList<>();
for(inti =0;i<mTitles.leng;i++){
mTabEntities.add(new TabLayoutEntity( mTitles[i], mIconSelectIds[i], mIconUnselectIds[i]));
}
//传入显示fragment
ArrayList fragments =newArrayList<>();
fragments.add(new MemeFragment());
fragments.add(new JokeFragment());
fragments.add(new JokeFragment());
fragments.add(new JokeFragment());
//给tab设置数据和关联的fragment
mTablayout.setTabData(mTabEntities,this,R.id.framelayout,fragments);
}
}
第四部：设置activity的layout
<FrameLayout
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.flyco.tablayout.CommonTabLayout
android:id="@+id/commontablayout"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="50dp"
tl:tl_iconGravity="LEFT"
tl:tl_iconHeight="18dp"
tl:tl_iconMargin="5dp"
tl:tl_iconWidth="18dp"
tl:tl_indicator_bounce_enable="true"
tl:tl_indicator_color="#2C97DE"
tl:tl_indicator_gravity="BOTTOM"
tl:tl_indicator_height="0dp"
tl:tl_textSelectColor="#2C97DE"
tl:tl_textUnselectColor="#66000000"
tl:tl_textsize="15sp"
tl:tl_underline_color="#DDDDDD"
tl:tl_underline_gravity="TOP"
tl:tl_underline_height="1dp"/>
第五步：创建需要填充的Fragment
进过这五部，就能够掌握CommonTabLayout实现tab的效果，并且能够避免在fragment中添加viewpager出现滑动冲突。
FlycoTabLyout的属性：
name format description
tl_indicator_color color 设置显示器颜色
tl_indicator_height dimension 设置显示器高度
tl_indicator_width dimension 设置显示器固定宽度
tl_indicator_margin_left dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_top dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_right dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_bottom dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_corner_radius dimension 设置显示器圆角弧度
tl_indicator_gravity enum 设置显示器上方(TOP)还是下方(BOTTOM),只对常规显示器有用
tl_indicator_style enum 设置显示器为常规(NORMAL)或三角形(TRIANGLE)或背景色块(BLOCK)
tl_underline_color color 设置下划线颜色
tl_underline_height dimension 设置下划线高度
tl_underline_gravity enum 设置下划线上方(TOP)还是下方(BOTTOM)
tl_divider_color color 设置分割线颜色
tl_divider_width dimension 设置分割线宽度
tl_divider_padding dimension 设置分割线的paddingTop和paddingBottom
tl_tab_padding dimension 设置tab的paddingLeft和paddingRight
tl_tab_space_equal boolean 设置tab大小等分
tl_tab_width dimension 设置tab固定大小
tl_textsize dimension 设置字体大小
tl_textSelectColor color 设置字体选中颜色
tl_textUnselectColor color 设置字体未选中颜色
tl_textBold boolean 设置字体加粗
tl_iconWidth dimension 设置icon宽度(仅支持CommonTabLayout)
tl_iconHeight dimension 设置icon高度(仅支持CommonTabLayout)
tl_iconVisible boolean 设置icon是否可见(仅支持CommonTabLayout)
tl_iconGravity enum 设置icon显示位置,对应Gravity中常量值,左上右下(仅支持CommonTabLayout)
tl_iconMargin dimension 设置icon与文字间距(仅支持CommonTabLayout)
tl_indicator_anim_enable boolean 设置显示器支持动画(only for CommonTabLayout)
tl_indicator_anim_duration integer 设置显示器动画时间(only for CommonTabLayout)
tl_indicator_bounce_enable boolean 设置显示器支持动画回弹效果(only for CommonTabLayout)
tl_indicator_width_equal_title boolean 设置显示器与标题一样长(only for SlidingTabLayout)
网友评论