FlycoTabLayout+TabLyout+ViewPager解决滑动冲突

注: 此库来着大神  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

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

android:id="@+id/framelayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

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)