在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;}@Overridepublic void destroyItem(View arg0, int arg1, Object arg2){((ViewPager) arg0).removeView((View) arg2);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1){return arg0 == ((View) arg1);}@Overridepublic Parcelable saveState(){return null;}/* (non-Javadoc) * @see android.support.v4.view.PagerAdapter#getPageTitle(int) */@Overridepublic 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接口：

@Overridepublic 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的翻页效果了。