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