Sliding Screen on left and right in android By ViewPager

Recently, the IPHONE slide between the left and right is used for projects. You can only use viewpager to achieve this. First, you can see the effect, that is, the effect of Sliding between the left and right screens.

 


 

Detailed Implementation

After android compatibility package and revision 3 were released in March, a ViewPager caught my attention.

Official description:

See http://developer.android.com/sdk/compatibility-library.html#Notes

Download and install ViewPager

First, update the latest android compatibility package and revision 3 through SDK Manager.

After the update, right-click the eclipse project and choose android tools> add compatibility library to complete the installation.

It is actually a jar package, which can also be manually imported to the project.

Jar package is \ android-sdk \ extras \ android \ compatibility \ v4 \ android-support-v4.jar

Now the preparation environment is OK.
Let's talk through the code below.

Prepare layout files

Viewpager_layout.xml

1 <? Xml version = "1.0" encoding = "UTF-8"?>

2 <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"

3 android: layout_width = "fill_parent"

4 android: layout_height = "fill_parent" android: orientation = "vertical">

5 <! -- The full path must be provided here -->

6 <android. support. v4.view. ViewPager

7 android: id = "@ + id/viewpagerLayout" android: layout_height = "fill_parent" android: layout_width = "fill_parent"/>

8 </LinearLayout>
Layout1.xml

1 <? Xml version = "1.0" encoding = "UTF-8"?>

2 <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"

3 android: layout_width = "fill_parent"

4 android: layout_height = "fill_parent" android: orientation = "vertical">

5 <TextView android: textAppearance = "? Android: attr/textAppearanceLarge "android: layout_height =" wrap_content "android: id =" @ + id/textView1 "android: layout_width =" fill_parent "android: text = "Page 1"> </TextView>

6 <EditText android: layout_width = "match_parent" android: layout_height = "wrap_content" android: id = "@ + id/editText1">

7 <requestFocus> </requestFocus>

8 </EditText>

9 </LinearLayout>
Layout2.xml

 

1 <? Xml version = "1.0" encoding = "UTF-8"?>

2 <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"

3 android: layout_width = "fill_parent"

4 android: layout_height = "fill_parent" android: orientation = "vertical">

5 <TextView android: textAppearance = "? Android: attr/textAppearanceLarge "android: layout_height =" wrap_content "android: id =" @ + id/textView1 "android: layout_width =" fill_parent "android: text = "Page 2"> </TextView>

6 <EditText android: layout_width = "match_parent" android: layout_height = "wrap_content" android: id = "@ + id/editText1">

7 <requestFocus> </requestFocus>

8 </EditText>

9 </LinearLayout>
Layout3.xml
1 <? Xml version = "1.0" encoding = "UTF-8"?>

2 <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"

3 android: layout_width = "fill_parent"

4 android: layout_height = "fill_parent" android: orientation = "vertical">

5 <TextView android: textAppearance = "? Android: attr/textAppearanceLarge "android: layout_height =" wrap_content "android: id =" @ + id/textView1 "android: layout_width =" fill_parent "android: text = "Page 3"> </TextView>

6 <EditText android: layout_width = "match_parent" android: layout_height = "wrap_content" android: id = "@ + id/editText1">

7 <requestFocus> </requestFocus>

8 </EditText>

9 </LinearLayout>
Main Program
001 package a. B;

002

003 import java. util. ArrayList;

004 import java. util. List;

005

006 import android. app. Activity;

007 import android. OS. Bundle;

008 import android. OS. Parcelable;

009 import android. support. v4.view. PagerAdapter;

010 import android. support. v4.view. ViewPager;

011 import android. support. v4.view. ViewPager. OnPageChangeListener;

012 import android. util. Log;

013 import android. view. LayoutInflater;

014 import android. view. View;

015 import android. widget. EditText;

016

017 public class TestViewPager extends Activity {

018 private ViewPager myViewPager;

019

020 private MyPagerAdapter myAdapter;

021

022 private LayoutInflater mInflater;

023 private List <View> mListViews;

024 private View layout1 = null;

025 private View layout2 = null;

026 private View layout3 = null;

027

028 @ Override

029 protected void onCreate (Bundle savedInstanceState ){

030 super. onCreate (savedInstanceState );

031 setContentView (R. layout. viewpager_layout );

032 myAdapter = new MyPagerAdapter ();

033 myViewPager = (ViewPager) findViewById (R. id. viewpagerLayout );

034 myViewPager. setAdapter (myAdapter );

035

036 mListViews = new ArrayList <View> ();

037 mInflater = getLayoutInflater ();

038 layout1 = mInflater. inflate (R. layout. layout1, null );

039 layout2 = mInflater. inflate (R. layout. layout2, null );

040 layout3 = mInflater. inflate (R. layout. layout3, null );

041

042 mListViews. add (layout1 );

043 mListViews. add (layout2 );

044 mListViews. add (layout3 );

045

046 // initialize the currently displayed view

047 myViewPager. setCurrentItem (1 );

048

049 // initialize the information of the second view

050 EditText v2EditText = (EditText) layout2.findViewById (R. id. editText1 );

051 v2EditText. setText ("dynamically setting the value of the second view ");

052

053 myViewPager. setOnPageChangeListener (new OnPageChangeListener (){

054

055 @ Override

056 public void onPageSelected (int arg0 ){

057 Log. d ("k", "onPageSelected-" + arg0 );

058 // The activity slides from 1 to 2. Use this method after loading 2.

059 View v = mListViews. get (arg0 );

060 EditText editText = (EditText) v. findViewById (R. id. editText1 );

061 editText. setText ("Dynamic Setting #" + arg0 + "edittext control value ");

062}

063

064 @ Override

065 public void onPageScrolled (int arg0, float arg1, int arg2 ){

066 Log. d ("k", "onPageScrolled-" + arg0 );

067 // slide from 1 to 2, called before 1 slide

068}

069

070 @ Override

071 public void onPageScrollStateChanged (int arg0 ){

072 Log. d ("k", "onPageScrollStateChanged-" + arg0 );

073 // There are three 0 idle states. 1 is added to the slide, and 2 is loaded.

074 /**

075 * Indicates that the pager is in an idle, settled state. The current page

076 * is fully in view and no animation is in progress.

077 */

078 // public static final int SCROLL_STATE_IDLE = 0;

079 /**

080 * Indicates that the pager is currently being dragged by the user.

081 */

082 // public static final int SCROLL_STATE_DRAGGING = 1;

083 /**

084 * Indicates that the pager is in the process of settling to a final position.

085 */

086 // public static final int SCROLL_STATE_SETTLING = 2;

087

088}

089 });

090

091}

092

093 private class MyPagerAdapter extends PagerAdapter {

094

095 @ Override

096 public void destroyItem (View arg0, int arg1, Object arg2 ){

097 Log. d ("k", "destroyItem ");

098 (ViewPager) arg0). removeView (mListViews. get (arg1 ));

099}

100

101 @ Override

102 public void finishUpdate (View arg0 ){

103 Log. d ("k", "finishUpdate ");

104}

105

106 @ Override

107 public int getCount (){

108 Log. d ("k", "getCount ");

109 return mListViews. size ();

110}

111

112 @ Override

113 public Object instantiateItem (View arg0, int arg1 ){

114 Log. d ("k", "instantiateItem ");

115 (ViewPager) arg0). addView (mListViews. get (arg1), 0 );

116 return mListViews. get (arg1 );

117}

118

119 @ Override

120 public boolean isViewFromObject (View arg0, Object arg1 ){

121 Log. d ("k", "isViewFromObject ");

122 return arg0 = (arg1 );

123}

124

125 @ Override

126 public void restoreState (Parcelable arg0, ClassLoader arg1 ){

127 Log. d ("k", "restoreState ");

128}

129

130 @ Override

131 public Parcelable saveState (){

132 Log. d ("k", "saveState ");

133 return null;

134}

135

136 @ Override

137 public void startUpdate (View arg0 ){

138 Log. d ("k", "startUpdate ");

139}

140

141}

142

143}
After testing on the real machine, it is very smooth, that is to say, the official version of the sliding screen control has been implemented
Currently, there are few viewpager articles. This article is based on the source code analysis of viewpager.
Of course, this article is only for reference and belongs to a framework program. It aims to let readers understand the basic usage of APIs.
I hope this original article will help you.
You are welcome to join us for discussion.
Learning and making progress together
In addition, there is a comment on ViewPager, which generally means that the control is currently implemented in early stages and will be modified later.
01 /**

02 * Layout manager that allows the user to flip left and right

03 * through pages of data. You supply an implementation of

04 * {@ link PagerAdapter} to generate the pages that the view shows.

05 *

06 * <p> Note this class is currently under early design and

07 * development. The API will likely change in later updates

08 * the compatibility library, requiring changes to the source code

09 * of apps when they are compiled against the newer version. </p>

10 */

 

From Turing's dream