Android ViewPager page sliding switch between left and right

Android ViewPager page sliding switch between left and right

 

Many of the Weibo, QQ, and other apps we use in our daily life can be implemented by ViewPager when sliding pages left and right. ViewPager is very common and useful in android development.

Viewpager in android. support. in the v4.view package, android. support. v4.view. jar is a software package officially provided by Google that is compatible with Android devices of lower versions. It contains APIs only available for Android 3.0 and later versions. Therefore, the android-support-v4.jar must be added to earlier versions of development, and ViewPager must be added to android. support. v4.view. ViewPager when the XML file is used with ViewPager. The software package also provides PagerTitleStrip to display the title of each page card.

Using ViewPager to implement page slide switching is similar to that of ListView. You also need an adapter and PagerAdapter, and you also need to rewrite the method to implement it. Next, let's take a look at the specific steps to implement ViewPager.

 

1. Add ViewPager to the XML layout file and its relative title PagerTitleStrip.

 

2. Add three Tab layout files. You can add the content by yourself. I only use an image as the background for every page card.

3. Add an adapter for ViewPager. Here I write a subclass that inherits PagerAdapter. In subclass, We need to rewrite the following four methods:

• instantiateItem(ViewGroup, int)destroyItem(ViewGroup, int, Object)getCount()isViewFromObject(View, Object)

  Of course, if we want more specific functions, we can rewrite other methods, but the above four methods are the most necessary and must be rewritten.

  The following code is used:

   
  

  1 package com. example. android_viewpage; 2 3 import java. util. list; 4 5 import android. content. context; 6 import android. support. v4.view. pagerAdapter; 7 import android. support. v4.view. viewPager; 8 import android. view. view; 9 10 public class MyAdapter extends PagerAdapter {11 private List
     
      
  List; 12 private List
      
       
  Titlelist; 13 14 public MyAdapter (List
       
        
  Titlelist, List
        
         
  List) {15 this. titlelist = titlelist; 16 this. list = list; 17} 18 // here get the title of the current page card 19 @ Override20 public CharSequence getPageTitle (int position) {21 return titlelist. get (position); 22} 23 @ Override24 public Object instantiateItem (View container, int position) {25 (ViewPager) container ). addView (list. get (position); 26 return list. get (position); 27} 28 // destroy page card 29 @ Override30 public void destroyItem (View container, int position, Object object) {31 (ViewPager) container ). removeView (list. get (position); 32} 33 // obtain the number of all page cards 34 @ Override35 public int getCount () {36 return list. size (); 37} 38 // determine whether the current display page card matches 39 @ Override40 public boolean isViewFromObject (View arg0, Object arg1) {41 return arg0 = arg1; 42} 43 44}
        
       
      
     

   
  

  4. Finally, in MainActivity, store the page card and title you want in the List, and then use the defined adapter for ViewPager.

  The following code is used:

   
  

  1 package com. example. android_viewpage; 2 3 import java. util. arrayList; 4 import java. util. list; 5 import android. app. activity; 6 import android. OS. bundle; 7 import android. support. v4.view. pagerTabStrip; 8 import android. support. v4.view. pagerTitleStrip; 9 import android. support. v4.view. viewPager; 10 import android. view. layoutInflater; 11 import android. view. view; 12 13 public class MainActivity extends Activity {14 private ViewPager viewPager; 15 private PagerTitleStrip pagerTitleStrip; 16 private MyAdapter adapter; 17 private List
     
      
  List; 18 private List
      
       
  Titlelist; 19 20 @ Override21 protected void onCreate (Bundle savedInstanceState) {22 super. onCreate (savedInstanceState); 23 setContentView (R. layout. activity_main); 24 viewPager = (ViewPager) findViewById (R. id. viewrpager); 25 pagerTitleStrip = (PagerTitleStrip) findViewById (R. id. pagertitle); 26 list = new ArrayList
       
        
  (); 27 list. add (LayoutInflater. from (this ). inflate (R. layout. view1, null); 28 list. add (LayoutInflater. from (this ). inflate (R. layout. view2, null); 29 list. add (LayoutInflater. from (this ). inflate (R. layout. view3, null); 30 titlelist = new ArrayList
        
         
  (); 31 titlelist. add (first page); 32 titlelist. add (second page); 33 titlelist. add (page 3); 34 adapter = new MyAdapter (titlelist, list); 35 viewPager. setAdapter (adapter); 36} 37 38}
        
       
      
     

   
  

   

  However, I found that when I was sliding, the title position was also moved together. I wanted the title to be moved while the page was sliding, but it should be displayed in different States. Here, I briefly introduced a similar switching style. When the page is slide, the button title below is different but the current status is displayed. At the same time, when you click the button below, also let the page switch to the relative state.

  Compared with the above program, this mainly sets the button listening event and page sliding listening event.

  The page slide listening event is setOnPageChangeListener (). It has three methods: onPageSelected (), onPageScrolled (), and onPageScrollStateChanged (). Here I just overwrite the onPageSelected () method.

  The following is the MainActivity code:

   
  

  1 package com. example. viewpagertest; 2 3 import java. util. arrayList; 4 import java. util. list; 5 6 import android. r. integer; 7 import android. app. activity; 8 import android. OS. bundle; 9 import android. support. v4.view. viewPager; 10 import android. support. v4.view. viewPager. onPageChangeListener; 11 import android. view. layoutInflater; 12 import android. view. view; 13 import android. view. view. onClickListener; 14 import android. view. window; 15 import android. widget. imageButton; 16 import android. widget. linearLayout; 17 18 public class MainActivity extends Activity implements OnClickListener {19 20 private List
     
      
  MPage; 21 private MyPagerAdapter adapter; 22 private ViewPager viewPager; 23 24 private ImageButton blocks; 25 private ImageButton friendImg; 26 private ImageButton addressImg; 27 private ImageButton blocks; 28 private LinearLayout weixin; 29 private LinearLayout friend; 30 private LinearLayout address; 31 private LinearLayout setting; 32 33 private static final int WEIXIN_STATE = 0; 34 private static final int FRIEND_STATE = 1; 35 private static final int ADDRESS_STATE = 2; 36 private static final int SETTING_STATE = 3; 37 38 @ Override 39 protected void onCreate (Bundle savedInstanceState) {40 super. onCreate (savedInstanceState); 41 requestWindowFeature (Window. FEATURE_NO_TITLE); 42 setContentView (R. layout. activity_main); 43 intiView (); 44 getClickEvent (); 45} 46 47 48 49 private void intiView () {50 51 // display page sliding effect 52 viewPager = (ViewPager) findViewById (R. id. viewpage); 53 mPage = new ArrayList
      
       
  (); 54 mPage. add (LayoutInflater. from (this ). inflate (R. layout. pageone, null); 55 mPage. add (LayoutInflater. from (this ). inflate (R. layout. pagetwo, null); 56 mPage. add (LayoutInflater. from (this ). inflate (R. layout. pagethree, null); 57 mPage. add (LayoutInflater. from (this ). inflate (R. layout. pagefour, null); 58 adapter = new MyPagerAdapter (mPage); 59 viewPager. setAdapter (adapter); 60 61 // load control 62 weixinImg = (ImageButton) findViewById (R. id. id_weixin_img); 63 friendImg = (ImageButton) findViewById (R. id. id_frd_img); 64 addressImg = (ImageButton) findViewById (R. id. id_address_img); 65 settingImg = (ImageButton) findViewById (R. id. id_settint_img); 66 67 weixin = (LinearLayout) findViewById (R. id. id_weixin); 68 friend = (LinearLayout) findViewById (R. id. id_frd); 69 address = (LinearLayout) findViewById (R. id. id_address); 70 setting = (LinearLayout) findViewById (R. id. id_setting); 71 72} 73/** 74 * button click event: When you click the button, make all the buttons dark, 75 * then, set the clicked button to a bright color and go to 76 */77 @ Override 78 public void onClick (View v) {79 setImg (); 80 switch (v. getId () {81 case R. id. id_weixin: 82 viewPager. setCurrentItem (WEIXIN_STATE); 83 weixinImg. setImageResource (R. drawable. tab_weixin_pressed); 84 break; 85 86 case R. id. id_frd: 87 viewPager. setCurrentItem (FRIEND_STATE); 88 friendImg. setImageResource (R. drawable. tab_find_frd_pressed); 89 break; 90 91 case R. id. id_address: 92 viewPager. setCurrentItem (ADDRESS_STATE); 93 addressImg. setImageResource (R. drawable. tab_address_pressed); 94 break; 95 96 case R. id. id_setting: 97 viewPager. setCurrentItem (SETTING_STATE); 98 settingImg. setImageResource (R. drawable. tab_settings_pressed); 99 break; 100 101} 102 103 private void getClickEvent () {104 weixin. setOnClickListener (this); 106 friend. setOnClickListener (this); 107 address. setOnClickListener (this); 108 setting. setOnClickListener (this); 109/** 110 * Page sliding listening event: When sliding the page, first turn all buttons into a dark color 111 * and then turn the button to a bright color, indicates the page 112 */113 viewPager. setOnPageChangeListener (new OnPageChangeListener () {114 115 @ Override116 public void onPageSelected (int arg0) {117 setImg (); 118 switch (arg0) {119 case WEIXIN_STATE: 120 weixinImg. setImageResource (R. drawable. tab_weixin_pressed); 121 break; 122 case FRIEND_STATE: 123 friendImg. setImageResource (R. drawable. tab_find_frd_pressed); 124 break; 125 case ADDRESS_STATE: 126 addressImg. setImageResource (R. drawable. tab_address_pressed); 127 break; 128 case SETTING_STATE: 129 settingImg130. setImageResource (R. drawable. tab_settings_pressed); 131 break; 132 133} 134 135 @ overridemo-public void onPageScrolled (int arg0, float arg1, int arg2) {138 139} 140 141 @ Override142 public void onPageScrollStateChanged (int arg0) {143 144} 145}); 146 147} 148 // when you click a button or activity page, make all buttons dark 149 private void setImg () {150 weixinImg. setImageResource (R. drawable. tab_weixin_normal); 151 friendImg. setImageResource (R. drawable. tab_find_frd_normal); 152 addressImg. setImageResource (R. drawable. tab_address_normal); 153 settingImg. setImageResource (R. drawable. tab_settings_normal); 154 155 156} 157}