android开发步步为营之92:ViewPager+TabLayout+Fragment构造带标签的可左右滑动页面

        ViewPager是android开发中常见的可用于页面分页，可左右滑动的控件，ViewPager可以使用的adapter可以是FragmentPagerAdapter或者是PagerAdapter,FragmentPagerAdapter extends PagerAdapter，做标签的常用控件有TabHost，PagerTabStrip，TabLayout等等，当然也可以自定义一个。用过这么多个之后，个人感觉还说TabLayout比较好用，2015年google技术大会上新推出的android.support.design类库中包含了这个组件，google推荐使用。使用fragment相当于web开发的iframe，页面的一个局部片段，当viewpager翻页的时候，每个页面的数据来源不一样的时候，那么为了维护方便，我们就会使用fragment，本文的demo是，我们要显示表情，表情分为两个大类：系统表情和收藏的表情，系统表情又分为5个分类。那么我们实现的思路可以为：最外面用一个viewpager+tablayout+两个fragment（一个是系统表情，一个是收藏的表情，业务逻辑不一样，使用fragment来完成各自页面绘制）来实现，系统表情的fragment因为又有5个子类，那么可以直接使用viewpager+tablayout来实现分页即可（因数据源一样）。

      来看看效果图：

       好，下面来看代码：

       第一步：build.gradle添加相关依赖

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile files('src/main/libs/universal-image-loader-1.9.3.jar')
    compile 'com.android.support:support-v4:22.+'
    compile 'com.nineoldandroids:library:2.4.0'
    compile 'com.android.support:recyclerview-v7:22.+'
    compile 'com.android.support:appcompat-v7:22.+'
    compile('com.android.support:design:22.2.0')

}

       第二步：设计页面activity_test_sticker.xml

<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="300dp"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="260dp" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#123456"
        app:tabIndicatorColor="#80FF0000"
        app:tabSelectedTextColor="#FFFFFF"
        app:tabTextColor="@color/white" />
</LinearLayout>

       第三步：设计activity TestStickerActivity.java

package com.figo.study.activity;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

import com.figo.study.R;
import com.figo.study.fragment.CollectionStickerFragment;
import com.figo.study.fragment.MyCollectionFragment;
import com.figo.study.fragment.SystemStickerFragment;


import java.util.ArrayList;
import java.util.List;

public class TestStickerActivity extends AppCompatActivity {
    TabLayout mTabLayout;
    ViewPager mViewPager;
    ArrayList<Fragment> mFragments;

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

    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(final int position) {

            }
        });
        final List<String> titles = new ArrayList<>();
        titles.add("系统表情");
        titles.add("收藏的表情");

        mFragments = new ArrayList<Fragment>();
        mFragments.add(SystemStickerFragment.newInstance(new Bundle()));
        mFragments.add(CollectionStickerFragment.newInstance(new Bundle()));


        final FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int index) {
                return mFragments.get(index);
            }
            @Override
            public int getCount() {
                return mFragments.size();
            }
            @Override
            public CharSequence getPageTitle(int position) {
                return titles.get(position);
            }
        };
        mViewPager.setAdapter(adapter);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(adapter);
        mViewPager.setCurrentItem(0);
    }

}

      第四步：设计fragment页面（给出系统表情fragment的页面）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#ffffff"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:background="#123456"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:tabIndicatorColor="@color/white"
            app:tabSelectedTextColor="#FFFFFF"
            app:tabTextColor="@color/white"
            />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </android.support.v4.view.ViewPager>
</LinearLayout>

          第五步：编写fragment（给出系统表情fragment）

package com.figo.study.fragment;

import android.content.Context;
import android.content.res.Configuration;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by figo on 16/1/14.
 */
public class SystemStickerFragment extends android.support.v4.app.Fragment {

    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private ExpCategory mExpCategory;

    public static SystemStickerFragment newInstance(Bundle bundle) {
        SystemStickerFragment frag = new SystemStickerFragment();
        frag.setArguments(bundle);
        return frag;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_system_sticker, container,
                false);
        initView(view);
        return view;
    }

    private void initView(View rootView) {
        mViewPager = (ViewPager) rootView.findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) rootView.findViewById(R.id.tabs);
        final Configuration config = getResources().getConfiguration();
        ExpBuilder mBuild = ExpBuilderFactory.getBuilder(getActivity(), 0);
        List<ExpressionPkgInfo> mInfos = mBuild.builder.getEmoticonSetBeanList();
        if (mInfos != null && mInfos.size() > 0) {
            mExpCategory = new ExpCategory(mBuild.builder, PreferenceManager.getDefaultSharedPreferences(getActivity()));

        }
        SysStickerViewPagerAdapter sysStickerViewPagerAdapter = new SysStickerViewPagerAdapter(mExpCategory, getActivity());
        mViewPager.setAdapter(sysStickerViewPagerAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            switch (i)
            {
                case 0:
                    mTabLayout.getTabAt(i).setIcon(R.drawable.ic_sticker_people_press);
                    break;
                case 1:
                    mTabLayout.getTabAt(i).setIcon(R.drawable.selector_sticker_nature);

                    break;
                case 2:
                    mTabLayout.getTabAt(i).setIcon(R.drawable.selector_sticker_object);

                    break;
                case 3:
                    mTabLayout.getTabAt(i).setIcon(R.drawable.selector_sticker_place);

                    break;
                case 4:
                    mTabLayout.getTabAt(i).setIcon(R.drawable.selector_sticker_symbol);
                    break;
                default:
                    mTabLayout.getTabAt(i).setIcon(R.drawable.selector_sticker_people);
                    break;
            }
            //也可以使用自定义的View
//            mTabLayout.getTabAt(i).setCustomView();
        }
        mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(final int position) {
                mTabLayout.getTabAt(0).setIcon(R.drawable.selector_sticker_people);

            }
        });
    }
}

       第六步：编写PagerAdapter

       直接使用PagerAdapter充当viewpager的adapter的时候，那么在override 这个方法的时候，

public Object instantiateItem(final ViewGroup container, final int position) 

可以将gridview或者listiview填充好数据之后的view，通过container.addView(view)来实现该页面的数据显示。

package com.figo.study.adapter;

import android.content.Context;
import android.content.res.Configuration;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.util.SparseArray;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.GridView;
import android.widget.RelativeLayout;


import java.util.List;

/**
 * system sticker adapter
 */
public final class SysStickerViewPagerAdapter extends PagerAdapter implements IExpClickEventCallback {
    private static final String TAG = SysStickerViewPagerAdapter.class.getSimpleName();
    private Context mContext;
    private int mSize = 0;
    private RelativeLayout.LayoutParams mParams;
    private PauseOnScrollListener mPauseOnScrollListener;
    private int mItemHeight = 0;
    private int mColumnNum = 7;
    private int mHorizontalSpacing = 5;
    private int mVerticalSpacing = 5;
    private int mPadding = 5;


    List<EmotionCategoryInfo> mCategoryInfos;

    public SysStickerViewPagerAdapter(List<EmotionCategoryInfo> categoryInfos, final Context context) {
        mCategoryInfos = categoryInfos;
        mContext = context;
        this.mSize = categoryInfos.size();
        mParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
        mParams.addRule(RelativeLayout.CENTER_VERTICAL);
        mItemHeight = 0;
        mPauseOnScrollListener = new PauseOnScrollListener(ImageLoader.getInstance(), true, true);

    }

 

    @Override
    public int getCount() {
        return this.mSize;
    }

    @Override
    public Object instantiateItem(final ViewGroup container, final int position) {

        RelativeLayout rl = new RelativeLayout(mContext);
        try {
            EmotionCategoryInfo categoryInfo = mCategoryInfos.get(position);
            List<Emotion> sysEmotions = categoryInfo.getEmotions();
            int itemHeight = initHeight();
            GridView gridView = new GridView(mContext);
            gridView.setNumColumns(mColumnNum);
            gridView.setBackgroundColor(Color.TRANSPARENT);
            gridView.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
            gridView.setCacheColorHint(0);
            gridView.setHorizontalSpacing(UIUtil.dip2px(mContext, mHorizontalSpacing));
            gridView.setVerticalSpacing(UIUtil.dip2px(mContext, mVerticalSpacing));
            gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));
            gridView.setGravity(Gravity.CENTER);
            gridView.setVerticalScrollBarEnabled(true);
            gridView.setHorizontalScrollBarEnabled(false);
            SysStickerPageItemAdapter adapter = new SysStickerPageItemAdapter(mContext, sysEmotions);
            gridView.setOnScrollListener(mPauseOnScrollListener);
            adapter.setHeight(itemHeight, UIUtil.dip2px(mContext, mPadding));
            gridView.setAdapter(adapter);
            rl.addView(gridView, mParams);
            adapter.setOnItemListener(this);
            mActiveKeyboardViews.put(position, gridView);
            container.addView(rl);

        } catch (Exception e) {
            CommonUtil.printStackTrace(e);
        }
        return rl;
    }

    private int initHeight() {
        int w = ResourceUtils.getDefaultKeyboardWidth(mContext.getResources());
        int screenWidth = w;
        int itemHeight = (screenWidth - (mColumnNum - 1) * UIUtil.dip2px(mContext, mPadding)) / mColumnNum;
        this.mItemHeight = itemHeight;
        return this.mItemHeight;
    }


    @Override
    public boolean isViewFromObject(final View view, final Object object) {
        return view == object;
    }

    @Override
    public void destroyItem(final ViewGroup container, final int position, final Object object) {
        final View keyboardView = mActiveKeyboardViews.get(position);
        if (keyboardView != null) {
            mActiveKeyboardViews.remove(position);
        }
        if (object instanceof View) {
            container.removeView((View) object);
        } else {
            Log.w(TAG, "Warning!!! Emoji palette may be leaking. " + object);
        }
    }

    @Override
    public void onItemClick(ExpressionItem bean) {
        if (mIViewListeners != null && !mIViewListeners.isEmpty()) {
            for (IExpClickEventCallback listener : mIViewListeners) {
                listener.onItemClick(bean);
            }
        }
    }

    @Override
    public void onLongItemClick(ExpressionItem bean, View v) {
        if (mIViewListeners != null && !mIViewListeners.isEmpty()) {
            for (IExpClickEventCallback listener : mIViewListeners) {
                listener.onLongItemClick(bean, v);
            }
        }
    }

    @Override
    public void onUpClick(ExpressionItem bean) {
        if (mIViewListeners != null && !mIViewListeners.isEmpty()) {
            for (IExpClickEventCallback listener : mIViewListeners) {
                listener.onUpClick(bean);
            }
        }
    }


    private Configuration mConfig;

    public void init(Configuration config) {
        mConfig = config;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return null;//因为使用了图片做tab就不用文字，如果这里再返回，那么将显示在图片右边
    }

}