Android标签页TabLayout控件实战及ViewPager取消预加载

一、概述

在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。
依稀记得前几年要实现这样的功能用的还是viewpagerindicator开源库，如今既然谷歌推出了TabLayout，所以特地学习了一下。
使用之前需要添加依赖：

compile 'com.android.support:design:24.2.1'

二、实现效果图

TabLayout一般都是配合着ViewPager使用，众所周知，ViewPager有个预加载功能，在加载本页数据时，它会提前加载下页数据，可以极大的浪费资源，而且不利于用户体验，你如果调试我的源码就会发现，本文特地取消了ViewPager预加载。
主要是初始化Frament时给每个Fragment设置一个mTabPos常量，第一次进入时加以判断setCurrentItem的页是否和mTabPos相同，如果相同就加载，这样第一次就不会预加载，后面进行页面切换时，通过onPageSelected方法加载。

三、核心代码

1.页面TabLayoutTestActivity.java

package com.czhappy.effectdemo.activity;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.design.widget.TabLayout;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 com.czhappy.effectdemo.R;import com.czhappy.effectdemo.fragment.PageFragment;import java.util.ArrayList;import java.util.List;/** * Description: * User: chenzheng * Date: 2017/1/20 0020 * Time: 14:24 */public class TabLayoutTestActivity extends AppCompatActivity {    private TabLayout mTabLayout;    private ViewPager mViewPager;    private SimpleFragmentPagerAdapter mAdapter;    private List<Fragment> mFragments = new ArrayList<Fragment>();    private String tabTitles[] = new String[]{"tab1","tab2","tab3", "tab4","tab5","tab6"};    private int curTab=0;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        this.setContentView(R.layout.activity_tablayout_test);        initView();    }    private void initView() {        mTabLayout = (TabLayout) this.findViewById(R.id.layout_tab);        mViewPager = (ViewPager) this.findViewById(R.id.view_pager);        for(int i=0; i<tabTitles.length; i++){            PageFragment fragment = new PageFragment(curTab);            fragment.setTabPos(i);            mFragments.add(fragment);        }        mAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), mFragments);        mViewPager.setAdapter(mAdapter);        mTabLayout.setupWithViewPager(mViewPager);        mTabLayout.setSmoothScrollingEnabled(true);        //mTabLayout.setTabMode(TabLayout.MODE_FIXED);//全部放下，不滑动        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//超过长度可滑动        //设置当前显示哪个标签页        mViewPager.setCurrentItem(curTab);        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                //滑动监听加载数据，一次只加载一个标签页                ((PageFragment)mAdapter.getItem(position)).sendMessage();            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {        private List<Fragment> fragments;        public SimpleFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragments) {            super(fm);            this.fragments = fragments;        }        @Override        public Fragment getItem(int position) {            return fragments.get(position);        }        @Override        public int getCount() {            return tabTitles.length;        }        @Override        public CharSequence getPageTitle(int position) {            return tabTitles[position];        }        //防止fragment自动销毁        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            //super.destroyItem(container, position, object);        }    }}

2.布局activity_tablayout_test.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.design.widget.TabLayout        android:id="@+id/layout_tab"        android:layout_width="match_parent"        android:layout_height="32dp"        app:tabIndicatorColor="@color/actionbar_background"        app:tabMode="scrollable"        app:tabSelectedTextColor="?attr/colorPrimary"        app:tabTextColor="@color/project_listitem_someinfo" />    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

3.PageFragment.java

package com.czhappy.effectdemo.fragment;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import com.czhappy.effectdemo.R;/** * Description: * User: chenzheng * Date: 2017/1/20 0020 * Time: 15:18 */public class PageFragment extends Fragment {    public static final String ARG_PAGE = "ARG_PAGE";    private boolean IS_LOADED = false;    private static int mSerial=0;    private int mTabPos=0;    private boolean isFirst = true;    private Handler handler = new Handler(){        public void handleMessage(android.os.Message msg) {            Log.e("tag", "IS_LOADED="+IS_LOADED);            if(!IS_LOADED){                IS_LOADED = true;                //这里执行加载数据的操作                Log.e("tag", "我是page"+(mTabPos+1));            }            return;        };    };    public PageFragment(int serial){        mSerial = serial;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        Log.e("tag","onCreate()方法执行");    }    public void sendMessage(){        Message message = handler.obtainMessage();        message.sendToTarget();    }    public void setTabPos(int mTabPos) {        this.mTabPos = mTabPos;    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        Log.e("tag","onCreateView()方法执行");        View view = inflater.inflate(R.layout.fragment_page, container, false);        TextView textView = (TextView) view.findViewById(R.id.content);        textView.setText("我是page" + (mTabPos+1));        //设置页和当前页一致时加载，防止预加载        if (isFirst && mTabPos==mSerial) {            isFirst = false;            sendMessage();        }        return view;    }    @Override    public void onDestroyView() {        super.onDestroyView();        Log.e("tag","onDestroyView()方法执行");    }}

4.Fragment布局文件fragment_page.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#fff"    android:gravity="center"    android:orientation="vertical">    <TextView        android:id="@+id/content"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="16sp"        android:text="我是page1"/></LinearLayout>