FlycoTabLayout是github上開源的一個想比較方便的可以實現常用的頁面框架搭建的視圖框架介杆。今天我們就來學一學這些好用的功能悯辙。
首先要導入依賴才避，這是所有的開端：
compile 'com.android.support:support-v4:23.1.1' //支持3.0+版本，如果新建項目中有V7包哺壶，此包則可以不用添加
compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'
一屋吨、ViewPager + CommonTabLayout實現可以滑動的主頁
先看效果圖：
主頁面可以左右滑動
下面直接看代碼吧蜒谤，
先看activity_main.xml布局文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tl="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/vp_2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<com.flyco.tablayout.CommonTabLayout
android:id="@+id/tl_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
tl:tl_indicator_color="#2C97DE"
tl:tl_textSelectColor="#2C97DE"
tl:tl_textUnselectColor="#66000000"/>
</LinearLayout>
com.flyco.tablayout.CommonTabLayout還有很多屬性，具體用法可以參考：FlycoTabLayout中文版至扰。
MainActivity.java：
package com.dingfang.org.testflaycotablayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.dingfang.org.testflaycotablayout.ui.SimpleCardFragment;
import com.dingfang.org.testflaycotablayout.utils.ViewFindUtils;
import com.dingfang.org.testflaycotablayout.view.TabView;
import com.flyco.tablayout.CommonTabLayout;
import com.flyco.tablayout.listener.CustomTabEntity;
import com.flyco.tablayout.listener.OnTabSelectListener;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
/**
* 以下是四大模塊的標題和圖片資源
*/
private String[] mTitles = {"首頁", "消息", "聯系人", "更多"};
private int[] mIconUnselectIds = {
R.mipmap.tab_home_unselect, R.mipmap.tab_speech_unselect,
R.mipmap.tab_contact_unselect, R.mipmap.tab_more_unselect};
private int[] mIconSelectIds = {
R.mipmap.tab_home_select, R.mipmap.tab_speech_select,
R.mipmap.tab_contact_select, R.mipmap.tab_more_select};
/**
* 承載四大標題的對象
*/
private ArrayList<CustomTabEntity> mTabEntities = new ArrayList<>();
private ArrayList<Fragment> mFragments = new ArrayList<>();
/**
* 最頂部的跟視圖
*/
private View mDecorView;
private ViewPager mViewPager;
private CommonTabLayout mTabLayout_1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
init();
}
private void init() {
mDecorView = getWindow().getDecorView();
initViewPager();
initTablayout();
combine();
}
/**
* 初始化數據
*/
private void initData() {
/**
* 初始化Fragment
*/
for (String title : mTitles) {
mFragments.add(SimpleCardFragment.getInstance("Switch ViewPager " + title));
}
/**
* 初始化TabLayout的子選項
*/
for (int i = 0; i < mTitles.length; i++) {
mTabEntities.add(new TabView(mTitles[i], mIconSelectIds[i], mIconUnselectIds[i]));
}
}
/**
* ViewPager 管理 Fragment
*/
private void initViewPager() {
mViewPager = ViewFindUtils.find(mDecorView, R.id.vp_2);
mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
}
/**
* TabLayout
*/
private void initTablayout() {
mTabLayout_1 = ViewFindUtils.find(mDecorView, R.id.tl_1);
mTabLayout_1.setTabData(mTabEntities);
}
/**
* 將兩者（TabLayout鳍徽、ViewPager）聯系起來
*/
private void combine(){
/**
* TabLayout 被點擊事件監(jiān)聽 設置與ViewPager聯動
*/
mTabLayout_1.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelect(int position) {//單個tab按鈕 被點擊
mViewPager.setCurrentItem(position);
}
@Override
public void onTabReselect(int position) {//單個tab按鈕 被重復點擊
}
});
/**
* ViewPager 監(jiān)聽，設置與TabLayout聯動
*/
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mTabLayout_1.setCurrentTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
mViewPager.setCurrentItem(1);
}
private class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
}
}
代碼注解已經很清楚了敢课，就不用多解釋了阶祭。這個主頁的CommonTabLayout底部布局，需要放置單個的Tab直秆，看代碼TabView.java:
package com.dingfang.org.testflaycotablayout.view;
import com.flyco.tablayout.listener.CustomTabEntity;
public class TabView implements CustomTabEntity {
public String title;
public int selectedIcon;
public int unSelectedIcon;
public TabView(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;
}
}
這里貼出demo里面的一個比較好用的工具類工具類濒募，ViewFindUtils.java
package com.dingfang.org.testflaycotablayout.utils;
import android.util.SparseArray;
import android.view.View;
@SuppressWarnings({"unchecked"})
public class ViewFindUtils {
/**
* 替代findviewById方法
*/
public static <T extends View> T find(View view, int id) {
return (T) view.findViewById(id);
}
}
核心代碼已經貼在上面了。
二切厘、FrameLayout + CommonTabLayout實現不可以滑動的主頁
先看效果圖：
主頁面不可以左右滑動
activity_second.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tl="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/fl_change"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<com.flyco.tablayout.CommonTabLayout
android:id="@+id/tl_3"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#ffffff"
tl:tl_iconGravity="LEFT"
tl:tl_iconHeight="18dp"
tl:tl_iconMargin="5dp"
tl:tl_iconWidth="18dp"
tl:tl_indicator_bounce_enable="false"
tl:tl_indicator_color="#2C97DE"
tl:tl_indicator_gravity="TOP"
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" />
</LinearLayout>
SecondActivity.java：
package com.dingfang.org.testflaycotablayout.activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.dingfang.org.testflaycotablayout.R;
import com.dingfang.org.testflaycotablayout.ui.SimpleCardFragment;
import com.dingfang.org.testflaycotablayout.utils.ViewFindUtils;
import com.dingfang.org.testflaycotablayout.view.TabView;
import com.flyco.tablayout.CommonTabLayout;
import com.flyco.tablayout.listener.CustomTabEntity;
import com.flyco.tablayout.listener.OnTabSelectListener;
import java.util.ArrayList;
public class SecondActivity extends AppCompatActivity {
/**
* 以下是四大模塊的標題和圖片資源
*/
private String[] mTitles = {"首頁", "消息", "聯系人", "更多"};
private int[] mIconUnselectIds = {
R.mipmap.tab_home_unselect, R.mipmap.tab_speech_unselect,
R.mipmap.tab_contact_unselect, R.mipmap.tab_more_unselect};
private int[] mIconSelectIds = {
R.mipmap.tab_home_select, R.mipmap.tab_speech_select,
R.mipmap.tab_contact_select, R.mipmap.tab_more_select};
/**
* 承載四大標題的對象
*/
private ArrayList<CustomTabEntity> mTabEntities = new ArrayList<>();
private ArrayList<Fragment> mFragments = new ArrayList<>();
/**
* 最頂部的跟視圖
*/
private View mDecorView;
private CommonTabLayout mTabLayout_3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
initData();
init();
}
private void init() {
mDecorView = getWindow().getDecorView();
initTablayout();
}
/**
* 初始化數據
*/
private void initData() {
/**
* 初始化Fragment
*/
for (String title : mTitles) {
mFragments.add(SimpleCardFragment.getInstance("Switch Fragment " + title));
}
/**
* 初始化TabLayout的子選項
*/
for (int i = 0; i < mTitles.length; i++) {
mTabEntities.add(new TabView(mTitles[i], mIconSelectIds[i], mIconUnselectIds[i]));
}
}
/**
* TabLayout
*/
private void initTablayout() {
mTabLayout_3 = ViewFindUtils.find(mDecorView, R.id.tl_3);
/**
* mTabEntities : tab子對象
* R.id.fl_change：FrameLayout 幀布局id
* mFragments: 供管理的具體的Fragment對象
*/
mTabLayout_3.setTabData(mTabEntities, this, R.id.fl_change, mFragments);
mTabLayout_3.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelect(int position) {
}
@Override
public void onTabReselect(int position) {
}
});
mTabLayout_3.setCurrentTab(1);
}
}
這個實現起來就更簡單了萨咳。
另外要講的就是還有一些CommonTabLayout可以實現的一些小功能：
//顯示未讀紅點
mTabLayout_1.showDot(2);
mTabLayout_3.showDot(1);
mTabLayout_4.showDot(1);
//兩位數
mTabLayout_2.showMsg(0, 55);
mTabLayout_2.setMsgMargin(0, -5, 5);
//三位數
mTabLayout_2.showMsg(1, 100);
mTabLayout_2.setMsgMargin(1, -5, 5);
//設置未讀消息紅點
mTabLayout_2.showDot(2);
MsgView rtv_2_2 = mTabLayout_2.getMsgView(2);
if (rtv_2_2 != null) {
UnreadMsgUtils.setSize(rtv_2_2, dp2px(7.5f));
}
//設置未讀消息背景
mTabLayout_2.showMsg(3, 5);
mTabLayout_2.setMsgMargin(3, 0, 5);
MsgView rtv_2_3 = mTabLayout_2.getMsgView(3);
if (rtv_2_3 != null) {
rtv_2_3.setBackgroundColor(Color.parseColor("#6D8FB0"));
}
具體可以參考源碼FlycoTabLayout。
