在Android App中实现Gmail样式的翻页效果

在做《易-记事本》的过程中，我参考了Gmail的翻页方式：

使用手势在每个页面之间进行翻页的时候，数字会自动的跟着变化。

如何实现这个效果呢？

1、 首先，使用Android的ViewPager来展示每一个detail page：

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

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pager_title_strip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="#33b5e5"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:textColor="#fff" />
    </android.support.v4.view.ViewPager>

2、 然后，为这个ViewPager实现一个PagerAdapter：

	private class MyPagerAdapter extends PagerAdapter
	{
		public int getCount()
		{
			return _allNotes.size();
		}

		public Object instantiateItem(View collection, int position)
		{
			LayoutInflater inflater = (LayoutInflater) collection.getContext()
					.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
			View view = inflater.inflate(R.layout.note_detail_item, null);
			((ViewPager) collection).addView(view, 0);

			NoteInfo noteInfo = _allNotes.get(position);

			TextView textViewModifiedDate = (TextView) view
					.findViewById(R.id.textViewModifiedDate);
			textViewModifiedDate
					.setText(MyFormatter
							.formatDateDisplayedOnNoteDetail(noteInfo
									.getModifiedDate()));

			TextView textViewNoteBody = (TextView) view
					.findViewById(R.id.textViewNoteBody);
			textViewNoteBody.setText(noteInfo.getBody());

			return view;
		}

		@Override
		public void destroyItem(View arg0, int arg1, Object arg2)
		{
			((ViewPager) arg0).removeView((View) arg2);
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1)
		{
			return arg0 == ((View) arg1);
		}

		@Override
		public Parcelable saveState()
		{
			return null;
		}

		/* (non-Javadoc)
		 * @see android.support.v4.view.PagerAdapter#getPageTitle(int)
		 */
		@Override
		public CharSequence getPageTitle(int position)
		{
			Resources resources = getResources();
			if (position == _currentPosition)
			{
				return String.format(
						resources.getString(R.string.text_format_current_page),
						position + 1, _allNotes.size());
			}
			else if (position < _currentPosition)
			{
				return resources.getString(R.string.text_format_earlier_page);
			}
			else
			{
				return resources.getString(R.string.text_format_later_page);
			}
		}
	}

注意代码里面的 getPageTitle()部分，这是实现下面数字变化的关键所在。

3、实现OnPageChangeListener接口：

@Override
	public void onPageSelected(int arg0)
	{
		_currentPosition = arg0;
	}

4、在类的开头定义一个变量：

private int _currentPosition = 0;

在onCreate()里面初始化一下 _currentPosition的值：

		_currentPosition = 0;
		for (int index = 0; index < _allNotes.size(); index++)
		{
			if (_allNotes.get(index).getId() == passedInNoteId)
			{
				_currentPosition = index;
				break;
			}
		}

5、在strings.xml里面定义相关的字符串：

    <string name="text_format_current_page">第 %1$d页 共%2$d页</string>
    <string name="text_format_earlier_page">更晚</string>
    <string name="text_format_later_page">更早</string>

okay，这样就实现了Gmail的翻页效果了。