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就不用文字，如果这里再返回，那么将显示在图片右边
}

}

[/code]