注: 此庫來著大神 ?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
實現：
第一步：在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)
