Android之分頁效果-ViewPager、Indicator、Fragment

分頁效果在開發過程中，會經常被用到，先說說一些開源的分頁效果框架

ViewFlow、ViewPagerIndicator，有興趣的同學可以去GitHub上下載看看

Android本身也給我們提供了好多可以實現分頁效果的控件ViewFlipper、ViewPager

今天的代碼是使用ViewPager實現分頁的效果

慣例，先看效果圖片：

項目目錄：

應為Fragment現在已經成為了Android的主流，所以一下的代碼都是針對Fragment方面的

先看activity_viewPager_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/view_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:gravity="center"
        android:orientation="horizontal" />

</RelativeLayout>

該XML文件的內容比較簡單，一個ViewPager控件，外加一個LinearLayout佈局，該LinearLayout佈局是用來放置Indicator圖片的

下面，我們來看ViewPagerIndicatorFragment文件的代碼

public class ViewPagerIndicatorFragment extends FragmentActivity {

	private ViewPager viewPager;
	private ViewGroup viewGroup;
	private List<Fragment> fragments;
	private int[] res;
	private ImageView[] images;

	@Override
	protected void onCreate(Bundle arg0) {
		super.onCreate(arg0);
		setContentView(R.layout.activity_viewpager_indicator);
		init();
		setAdapter();
		setListener();
	}

	private void init() {
		viewPager = (ViewPager) findViewById(R.id.view_pager);
		viewGroup = (ViewGroup) findViewById(R.id.view_group);
		fragments = new ArrayList<Fragment>();
		res = new int[] {
				R.drawable.guide1, R.drawable.guide2, R.drawable.guide3, R.drawable.guide4
		};
		images = new ImageView[res.length];
		for (int i = 0; i < res.length; i++) {
			fragments.add(ImageFragment.newInstance(res[i]));

			ImageView imageView = new ImageView(this);
			imageView.setLayoutParams(new 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);
			}
			images[i] = imageView;
			viewGroup.addView(imageView);
		}
	}

	private void setAdapter() {
		ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
		viewPager.setAdapter(adapter);
		adapter.notifyDataSetChanged();
	}

	private void setListener() {
		viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				for (int i = 0; i < images.length; i++) {
					if (position == i) {
						images[i].setBackgroundResource(R.drawable.page_indicator_focused);
					} else {
						images[i].setBackgroundResource(R.drawable.page_indicator);
					}
				}
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});
	}

	private class ViewPagerAdapter extends FragmentPagerAdapter {

		public ViewPagerAdapter(FragmentManager manager) {
			super(manager);
		}

		@Override
		public Fragment getItem(int position) {
			return fragments.get(position);
		}

		@Override
		public int getCount() {
			return fragments.size();
		}

	}
}

用動態的方法生成一個分頁內容，在開發過程中是經常遇到的，我們無法確定圖片的數量，動態佈局將有利於我們的程序擴展

下面看看ImageFragment的代碼，該段代碼是我從網絡上找到的，如果在Fragment的生命週期中存在歧義、錯誤的過程，還請各位能幫忙指出

public class ImageFragment extends Fragment {

	private int id;
	private int defaultValue = R.drawable.guide1;

	private View view;

	public static ImageFragment newInstance(int id) {
		ImageFragment fragment = new ImageFragment();
		Bundle bundle = new Bundle();
		bundle.putInt("id", id);
		fragment.setArguments(bundle);
		return fragment;
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		Bundle bundle = getArguments();
		id = bundle != null ? bundle.getInt("id") : defaultValue;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		view = inflater.inflate(R.layout.activity_layout, null);
		view.setBackgroundResource(id);
		return view;
	}
}

好了，如此一個分頁的效果就達到了。

最後備註一下：

如果在Fragment中存在ListView控件或者其他帶有滑動效果的控件，是否回合ViewPager控件的滑動效果出現衝突，因為未做測試，所以關於這個方面的錯誤，需要等我週一之後再做說明

最後附上源碼地址：

http://download.csdn.net/detail/u011290399/6496267