Android learning-ViewPager and Application Guide page development, androidviewpager

Android learning-ViewPager and Application Guide page development, androidviewpager
Background

When we install Android applications for the first time, some applications will have boot pages, either to introduce new features of the application, or to introduce the application, or even to promote advertisements.

How is this application boot page implemented? So we have to make the debut of ViewPager, the main character of today.

 

Introduction to ViewPager

 

ViewPager inherits from the ViewGroup class and belongs to android. support. v4.view package (this package is provided by Google to develop Android compatible with lower versions. Its main function is to provide various classes for post-processing View compatibility ).

ViewPager allows you to slide left and right to View the View. Like ListView, View objects cannot be directly displayed on ViewPager. You need to implement PagerAdapter to adapt the View to the Page to display it on the ViewPager. ViewPager is often used together with Fragment, which is a convenient way to use and manage the Page lifecycle.

 

How to Use ViewPager

1. Add ViewPager to the layout file (note that you must write android. support. v4.view. ViewPager)

1  <android.support.v4.view.ViewPager2         android:id="@+id/viewpager"3         android:layout_width="fill_parent"4         android:layout_height="fill_parent" >5     </android.support.v4.view.ViewPager>

2. Load the Page to be displayed

 1 private List<View> views; 2  3 LayoutInflater inflater = LayoutInflater.from(this); 4 view1 = inflater.inflate(R.layout.one, null); 5 view2 = inflater.inflate(R.layout.two, null); 6 view3 = inflater.inflate(R.layout.three, null); 7 views = new ArrayList<View>(); 8 views.add(view1); 9 views.add(view2);10 views.add(view3);

3. instantiate ViewPager and set its Adapter.

Method 1: rewrite PagerAdapter directly in Activity

 1     PagerAdapter pagerAdapter = new PagerAdapter() {   2        3                 @Override   4                 public boolean isViewFromObject(View arg0, Object arg1) {   5        6                     return arg0 == arg1;   7                 }   8        9                 @Override  10                 public int getCount() {  11       12                     return views.size();  13                 }  14       15                 @Override  16                 public void destroyItem(ViewGroup container, int position,  17                         Object object) {  18                     container.removeView(views.get(position));  19       20                 }  21       22                 @Override  23                 public int getItemPosition(Object object) {  24       25                     return super.getItemPosition(object);  26                 }  27       28                 @Override  29                 public CharSequence getPageTitle(int position) {  30       31                     return titleList.get(position);  32                 }  33       34                 @Override  35                 public Object instantiateItem(ViewGroup container, int position) {  36                     container.addView(views.get(position));  37                     return viewList.get(position);  38                 }  39       40             };  41             viewPager.setAdapter(pagerAdapter);  

Method 2: Create your own PagerAdapter class inherited from the PagerAdapter class.

1 public class ViewPagerAdapter extends PagerAdapter {2 3 private List <View> views; 4 private Context context; 5 6/** 7 * constructor 8 * @ param views 9 * @ param context10 */11 public ViewPagerAdapter (List <View> views, Context context) {12 13 this. views = views; 14 this. context = context; 15} 16/** 17 * destroy View18 */19 @ Override20 public void destroyItem (View container, int position, Object object) {21 22 (ViewPager) container ). removeView (views. get (position); 23} 24/** 25 * instantiate View26 */27 @ Override28 public Object instantiateItem (View container, int position) {29 30 (ViewPager) container ). addView (views. get (position); 31 32 return views. get (position); 33 34} 35 36 @ Override37 public int getCount () {38 return views. size (); 39} 40 41 @ Override42 public boolean isViewFromObject (View arg0, Object arg1) {43 return (arg0 = arg1); 44} 45 46}

To implement a PagerAdapter, you must implement the following methods:

InstantiateItem (ViewGroup, int) // instantiate destroyItem (ViewGroup, int, Object) // destroy getCount () // obtain the total number of isViewFromObject (View, Object) // check whether the instantiateItem returns the Page view related to the key object.

Effect display:

 

 

Use ViewPager to develop application boot pages

After learning to use ViewPager, there is no difficulty in developing application boot pages. The key is that the user only has a boot page after the application is installed for the first time, and then directly enters the main interface.

Therefore, we need to determine whether the user first enters the application. Store this value in your phone and use SharedPreferences for storage.

1 // use SharedPreferences to store whether the user is used for the first time after installation. 2. SharedPreferences perPreferences = getSharedPreferences ("JohnTsai", MODE_PRIVATE); 3. isFirstUse = perPreferences. getBoolean ("isFirstUse", true); 4 if (! IsFirstUse) {5 // enter the main interface 6... 7} else {8 // otherwise jump to the boot page 9... 10 Editor editor = perPreferences. edit (); 11 editor. putBoolean ("isFirstUse", false); 12 editor. commit (); 13}

Note that there is a small black spot at the bottom of each boot page to indicate the current page.

1 <? Xml version = "1.0" encoding = "UTF-8"?> 2 <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" 3 android: layout_width = "match_parent" 4 android: layout_height = "match_parent"> 5 6 <android. support. v4.view. viewPager 7 android: id = "@ + id/viewpager" 8 android: layout_width = "fill_parent" 9 android: layout_height = "fill_parent" 10 android: background = "#00000000"> 11 </android. support. v4.view. viewPager> 12 13 <LinearLayout14 andro Id: id = "@ + id/linearLayout" 15 android: layout_width = "fill_parent" 16 android: layout_height = "wrap_content" 17 android: layout_alignParentBottom = "true" 18 android: gravity = "center_horizontal" 19 android: orientation = "horizontal"> 20 21 <! -- Point at the bottom of the image --> 22 <ImageView23 android: id = "@ + id/imageView1" 24 android: layout_width = "wrap_content" 25 android: layout_height = "wrap_content" 26 android: src = "@ drawable/point_selected"/> 27 28 <ImageView29 android: id = "@ + id/imageView2" 30 android: layout_width = "wrap_content" 31 android: layout_height = "wrap_content" 32 android: src = "@ drawable/point_unselected"/> 33 34 <ImageView35 android: id = "@ + id/imageView3" 36 android: layout_width = "wrap_content" 37 android: layout_height = "wrap_content" 38 android: src = "@ drawable/point_unselected"/> 39 </LinearLayout> 40 41 </RelativeLayout>

So how can we achieve slide and the points below the image also change? This requires implementing the OnPageChangeListener interface and rewriting its method.

1 // The dot below the boot interface, used to display the number of the current View 2 private ImageView [] dots; 3 private int [] ids = {R. id. imageView1, R. id. imageView2, R. id. imageView3}; 4 dots = new ImageView [views. size ()]; 5 for (int I = 0; I <views. size (); I ++) {6 dots [I] = (ImageView) findViewById (ids [I]); 7} 8 @ Override 9 public void onPageScrollStateChanged (int arg0) {10 11} 12 13 @ Override14 public void onPageScrolled (int arg0, float arg1, int arg2) {15 16} 17 18 @ Override19 public void onPageSelected (int arg0) {20 for (int I = 0; I <ids. length; I ++) {21 // if the current interface is selected by the user, set the vertex to the selected status. Otherwise, 22 if (arg0 = I) {23 dots [I]. setImageResource (R. drawable. point_selected); 24} else {25 dots [I]. setImageResource (R. drawable. point_unselected); 26} 27} 28}