前言：一般情况下，在我们刚下载一个应用第一次启动时，会有一个向导界面，这个向导界面会一步步地引导用户如何使用和操作这个应用，而这个引导界面一般会用到触屏滑动翻页的操作，或者有两个按钮点击实现翻页操作。那么，这个向导界面的翻页操作是可以借助第三方开源jar包ViewPager来开发实现的。
一. 导入ViewPager第三方jar包android-support-v13.jar
在开发之前先在已经创建好的应用程序工程中导入jar包，方法如下：
选中应用程序工程，在eclipse的菜单栏选择Project->properties->Java Build Path->Libraries->Add External Jars中加入已经下载好的jar包。加入这个jar包之后就可以使用ViewPager类来开发相关的应用了。
举一反三，其它第三方jar包的添加应该也是走这个步骤。
二. ViewPager的使用
下面以一个简单的demo来实现ViewPager的使用，该Demo的效果图如下：
该Demo总共四个页面，每个页面用一个Fragment来实现，所以分别创建FirstFragmentPage、SecondFragmentPage、ThirdFragmentPage、ForthFragmentPage四个类来实现四个页面，这个四个类都继承Fragment。这四个Fragment将在MainActivity中添加处理。以下主要代码实现：
1. 主布局文件main.xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- ViewPager界面布局 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dip" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- 指示图标和按钮的布局 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<!-- ViewPager界面下方的指示翻页图标 -->
<LinearLayout
android:id="@+id/indicator_group"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
<!-- 底部的后退和前进按钮布局 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="30dip"
android:paddingRight="30dip" >
<Button
android:id="@+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/back" />
<Button
android:id="@+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/next" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>2. MainActivity：
package com.stevenhu.vpt;
import java.util.ArrayList;
import android.app.Activity;
import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.support.v13.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements OnClickListener
{
private final static String TAG = "MainActivity";
private ViewPager mViewPager;
private ViewPagerAdapter mViewPagerAdapter;
private LinearLayout mIndicatorGroup;
//定义指示翻页图标数组
private ImageView[] mIndicatorImage;
private Button mBackButton, mNextButton;
//定义当前在第几页
private int mCurrentPage = 0;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mViewPager = (ViewPager)findViewById(R.id.viewpager);
//创建自定义的ViewPagerAdapter对象
mViewPagerAdapter = new ViewPagerAdapter(this, mViewPager);
//添加Fragment
mViewPagerAdapter.addFragment(FirstFragmentPage.class, null);
mViewPagerAdapter.addFragment(SecondFragmentPage.class, null);
mViewPagerAdapter.addFragment(ThirdFragmentPage.class, null);
mViewPagerAdapter.addFragment(ForthFragmentPage.class, null);
//获取指示器图标所在界面布局对象
mIndicatorGroup = (LinearLayout)findViewById(R.id.indicator_group);
mIndicatorImage = new ImageView[mViewPagerAdapter.getCount()];
mBackButton = (Button)findViewById(R.id.back_button);
mNextButton = (Button)findViewById(R.id.next_button);
mBackButton.setOnClickListener(this);
mNextButton.setOnClickListener(this);
initIndicator();
}
//初始化指示器，实现随着创建页数的增加从而添加相应个数的指示图标。
private void initIndicator()
{
for (int i = 0; i < mViewPagerAdapter.getCount(); i ++)
{
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(new ViewGroup.LayoutParams(20,20));
imageView.setPadding(20, 0, 20, 0);
if (i == 0)
{
imageView.setBackgroundResource(R.drawable.page_indicator_focused);
}
else
{
imageView.setBackgroundResource(R.drawable.page_indicator);
}
mIndicatorImage[i] = imageView;
mIndicatorGroup.addView(mIndicatorImage[i]);
}
}
/*通过监听按钮实现向上或向下翻页。
* 当然，由于是使用ViewPager，所以用户也可以通过滑动屏幕来实现翻页
*/
@Override
public void onClick(View v)
{
if(v.getId() == R.id.back_button){
//当前为第一页则直接返回不做处理
if(mCurrentPage <= 0)
{
return;
}
//返回上一页
mViewPager.setCurrentItem(mCurrentPage - 1, true);
}
else
{
//当前页为最后一页
if(mCurrentPage >= mViewPagerAdapter.getCount() - 1)
{
this.finish();
}
//返回下一页
mViewPager.setCurrentItem(mCurrentPage + 1, true);
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
if (keyCode == KeyEvent.KEYCODE_BACK)
{
return true;
}
return super.onKeyDown(keyCode, event);
}
/*通过调用FragmentPagerAdapter的addFragment方法实现添加Fragment类型的class对象
* 通过调用FragmentPagerAdapter的getItem方法实现取出Fragment类型对象
*/
private class ViewPagerAdapter extends FragmentPagerAdapter implements OnPageChangeListener
{
private Context mContext;
private ViewPager mViewPager = null;
private ArrayList<TabInfo> mTabList = new ArrayList<TabInfo>();
public ViewPagerAdapter(Activity activity, ViewPager viewPager) {
super(activity.getFragmentManager());
mContext = activity;
mViewPager = viewPager;
//为ViewPager添加适配器，适配器为当前的ViewPagerAdapter
mViewPager.setAdapter(this);
//为ViewPager设置翻页改变监听器
mViewPager.setOnPageChangeListener(this);
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
Log.d(TAG, "onPageScrollStateChanged-->arg0-->" + arg0);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
Log.d(TAG, "onPageScrolled-->arg0-->" + arg0 +
"-->arg1-->" + arg1 +
"-->arg2-->" + arg2);
}
//当前选中的页面，position表示在第几页，0为第一页
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
Log.d(TAG, "onPageSelected-->position-->" + position);
mCurrentPage = position;
for (int i = 0; i < mIndicatorImage.length; i ++)
{
if (i == position)
{
//若为当前页面，指示器显示为聚焦图片
mIndicatorImage[i].setBackgroundResource(R.drawable.page_indicator_focused);
}
else
{
mIndicatorImage[i].setBackgroundResource(R.drawable.page_indicator);
}
}
//若当前页面为最后一页，则下一页按钮显示为完成按钮
if(position == getCount() - 1){
mNextButton.setText(R.string.finish);
}else{
mNextButton.setText(R.string.next);
}
}
@Override
public Fragment getItem(int position) {
// TODO Auto-generated method stub
TabInfo tab = mTabList.get(position);
if (tab.fragment == null) {
//创建Fragment对象
tab.fragment = Fragment.instantiate(mContext,
tab.clazz.getName(), tab.bundle);
}
return tab.fragment;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mTabList.size();
}
public void addFragment(Class<?> clazz, Bundle bundle) {
TabInfo tabInfo = new TabInfo(clazz, bundle);
mTabList.add(tabInfo);
//通知数据改变
notifyDataSetChanged();
}
private final class TabInfo {
private final Class<?> clazz;
private final Bundle bundle;
Fragment fragment;
TabInfo(Class<?> clazz, Bundle bundle) {
this.clazz = clazz;
this.bundle = bundle;
}
}
}
}3.FirstFragmentPage加载的布局文件first_fragment_page.xml（ 由于其他三个Fragment对应的布局文件和代码相似，这里将不再列出）：
<?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:orientation="vertical" >
<ListView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
package com.stevenhu.vpt;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class FirstFragmentPage extends Fragment
{
private ListView mListView;
@Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
}
//在该方法中加载fragmen对应的布局，并返回
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view = inflater.inflate(R.layout.first_fragment_page, container, false);
return view;
}
//在该方法中读取该Fragment对应布局中的组件，该方法中的参数view就是onCreateView方法返回的view
@Override
public void onViewCreated(View view, Bundle savedInstanceState)
{
// TODO Auto-generated method stub
mListView = (ListView)view.findViewById(R.id.list);
String[] data = new String[30];
for (int i = 0; i < data.length; i++)
{
data[i] = "这是第一页" + i;
}
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this.getActivity() ,android.R.layout.simple_list_item_1, data);
mListView.setAdapter(arrayAdapter);
super.onViewCreated(view, savedInstanceState);
}
}到此，关于ViewPager使用的Demo介绍就结束了，详细的实现逻辑在代码中都有注释，这里不再累赘。
本文相关的Demo下载地址链接：http://download.csdn.net/detail/stevenhu_223/7026227
扫一扫
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
