Android中使用TabLayout实现Tab

一、需求

activity + fragment实现tab，并可以滑动切换tab。

需要导入compile 'com.android.support:design:25.3.1'

二、layout实现

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1"/>

    <TextView
        android:id="@+id/intervalText1"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/colorTextDivider"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen_tab_height"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/primary"
        app:tabIndicatorHeight="@dimen/dimen_line"/>

</LinearLayout>

三、activity + fragment

1、activity实现

public class MainActivity extends AppCompatActivity {

    private static final String TAB_TITLE_SALE = "SALE";
    private static final String TAB_TITLE_CART = "CART";
    private static final String TAB_TITLE_REPORT = "REPORT";
    private static final String TAB_TITLE_SETUP = "SETUP";

    private static final String TAB_TITLE = "TAB_TITLE";
    private static final String TAB_IMAGE = "TAB_IMAGE";

    private List<Map<String, Object>> tabResourcesList = new ArrayList<>();
    private List<Fragment> fragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();
        initFragment();
        initView();
    }

    /**
     * 初始化跟ViewPager、TabLayout中数据有关的数据
     */
    private void initData() {
        // 初始化Tablayout中展示的标题
        addTabResources(TAB_TITLE_SALE, R.drawable.tab_sale);
        addTabResources(TAB_TITLE_CART, R.drawable.tab_cart);
        addTabResources(TAB_TITLE_REPORT, R.drawable.tab_report);
        addTabResources(TAB_TITLE_SETUP, R.drawable.tab_setup);
    }

    private void addTabResources(String title, Integer image) {
        Map<String, Object> map = new HashMap<>();
        map.put(TAB_TITLE, title);
        map.put(TAB_IMAGE, image);
        tabResourcesList.add(map);
    }

    private void initFragment() {
        // 初始化Fragment集合
        fragments = new ArrayList<>();
        SaleFragment saleFragment = new SaleFragment();
        fragments.add(saleFragment);
        CartFragment cartFragment = new CartFragment();
        fragments.add(cartFragment);
        ReportFragment reportFragment = new ReportFragment();
        fragments.add(reportFragment);
        SetupFragment setupFragment = new SetupFragment();
        fragments.add(setupFragment);
    }

    private void initView() {
        TabLayout tabs = (TabLayout) findViewById(R.id.tablayout);
        ViewPager viewPager = (ViewPager) findViewById(R.id.vp);

        CustomPagerAdapter customPagerAdapter = new CustomPagerAdapter(getSupportFragmentManager(), fragments);
        viewPager.setAdapter(customPagerAdapter);
        tabs.setupWithViewPager(viewPager);
        // TabLayout中Tab的排列方式，FIXED表示平分布局；SCROLLABLE表示线性排列，可滑动
        tabs.setTabMode(TabLayout.MODE_FIXED);

        for (int i = 0; i < tabResourcesList.size(); i++) {
            tabs.getTabAt(i).setCustomView(getTabView(tabResourcesList.get(i).get(TAB_TITLE).toString(),
                    tabResourcesList.get(i).get(TAB_IMAGE).hashCode()));
        }
    }

    private View getTabView(String title, int resId) {
        View newTabView = LayoutInflater.from(this).inflate(R.layout.tab_item_view, null);
        ImageView tabIcon = (ImageView) newTabView.findViewById(R.id.tabIcon);
        tabIcon.setImageResource(resId);
        TextView tabTitle = (TextView) newTabView.findViewById(R.id.tabText);
        tabTitle.setText(title);
        return newTabView;
    }
}

2、适配器的实现

实现activity和fragment的绑定。

public class CustomPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

    public CustomPagerAdapter(FragmentManager fragmentManager, List<Fragment> fragments) {
        super(fragmentManager);
        this.fragments = fragments;
    }

    @Override
    public int getCount() {
        return fragments.size();//页卡数
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }
}

3、fragment实现

每次切换tab刷新界面，定义了BaseFragment，避免重复代码。

定义了四个fragment继承BaseFragment，四个fragment对应四个不同的layout文件。

 

public abstract class BaseFragment extends Fragment {

    protected View rootView;
    protected boolean isVisible;
    private boolean isReady = false;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        if (rootView == null) {
            rootView = inflater.inflate(getLayoutId(), container, false);
            isReady = true;
            delayLoad();
        }

        // remove rootView from its parent
        ViewGroup parent = (ViewGroup) rootView.getParent();
        if (parent != null) {
            parent.removeView(rootView);
        }
        return rootView;
    }

    private void delayLoad() {
        if (!isReady || !isVisible) {
            return;
        }

        initData();
        initView(rootView);
        setListener();
    }

    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        if (getUserVisibleHint()) {
            isVisible = true;
            delayLoad();
        } else {
            isVisible = false;
        }
    }

    protected abstract int getLayoutId();

    protected abstract void initData();

    protected abstract void initView(View view);

    protected abstract void setListener();
}