Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> ViewPager之引導頁,viewpager引導

ViewPager之引導頁,viewpager引導

編輯:關於android開發

ViewPager之引導頁,viewpager引導


一、概述

ViewPager是android-support-v4中提供的類,它是一個容器類,常用於頁面之間的切換。

本文介紹ViewPager最基礎的應用:在多個View之間進行切換,亦即ViewPager的每個頁面是個View。

這種模式適合每個頁面的邏輯較為簡單的情況,比如去實現“小紅書”引導頁這樣的效果:

 

二、實現思路

2.1 頁面如何布局

這個引導頁一共有三個頁面,毫無疑問上面的標題和配圖是隸屬於viewpager不同頁面內部的,而下面的倆按鈕則是直接放在Activity的布局中。

那indicator呢?雖然在不同的頁面紅點的位置不一樣,但它不能放在頁面的布局中,否則,三個點就會跟配圖一樣整體滑動了……

2.2 代碼如何實現

ViewPager是什麼鬼呢?其實它就是個ViewGroup,用法跟ListView類似,重點在於實現這樣一個Adapter:

 1     private class ViewPagerAdapter extends PagerAdapter {
 2         @Override
 3         public int getCount() {
 4             return 0; //ViewPager總共有幾個頁面
 5         }
 6 
 7         @Override
 8         public boolean isViewFromObject(View view, Object object) {
 9             return false; //判斷一個頁面(View)是否與instantiateItem方法返回的Object一致
10         }
11         
12         @Override
13         public Object instantiateItem(ViewGroup container, int position) {
14             return super.instantiateItem(container, position); //創建一個頁面
15         }
16         
17         @Override
18         public void destroyItem(ViewGroup container, int position, Object object) {
19             super.destroyItem(container, position, object); //銷毀一個頁面
20         }
21     }

  [轉載請保留本文地址:http://www.cnblogs.com/snser/p/5700751.html] 

三、開始干活

3.1 擺出activity和每個頁面的布局

viewpager_view.xml (activity的布局)

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="@drawable/viewpager_view_bg"
 6     tools:context="${relativePackage}.${activityClass}" >
 7     
 8     <android.support.v4.view.ViewPager
 9         android:id="@+id/viewpager_view_pager"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent"
12         android:background="@drawable/viewpager_view_bg" />
13     
14     <ImageView 
15         android:id="@+id/viewpager_view_point"
16         android:layout_width="66.7dp"
17         android:layout_height="10dp"
18         android:layout_centerHorizontal="true"
19         android:layout_above="@+id/viewpager_view_register"
20         android:layout_marginBottom="20dp"
21         android:src="@drawable/viewpager_view_point_1" />
22     
23     <Button
24         android:id="@+id/viewpager_view_register"
25         android:layout_width="190dp"
26         android:layout_height="45dp"
27         android:layout_centerHorizontal="true"
28         android:layout_above="@+id/viewpager_view_login"
29         android:layout_marginBottom="10dp"
30         android:background="@drawable/viewpager_view_register_bg"
31         android:textSize="19sp"
32         android:textColor="#FFFFFF"
33         android:text="@string/viewpager_view_register" />
34     
35     <Button
36         android:id="@+id/viewpager_view_login"
37         android:layout_width="190dp"
38         android:layout_height="45dp"
39         android:layout_alignParentBottom="true"
40         android:layout_centerHorizontal="true"
41         android:layout_marginBottom="50dp"
42         android:background="@drawable/viewpager_view_login_bg"
43         android:textSize="19sp"
44         android:textColor="#999999"
45         android:text="@string/viewpager_view_login" />
46     
47 </RelativeLayout>

viewpager_view_page.xml (頁面的布局):

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     tools:context="${relativePackage}.${activityClass}" >
 6     
 7     <TextView
 8         android:id="@+id/viewpager_view_page_title"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:layout_marginTop="30dp"
12         android:layout_centerHorizontal="true"
13         android:textSize="20sp"
14         android:textColor="#333333"
15         android:text="@string/viewpager_view_page_title_1" />
16     
17     <ImageView 
18         android:id="@+id/viewpager_view_page_content"
19         android:visibility="visible"
20         android:layout_width="match_parent"
21         android:layout_height="385dp"
22         android:layout_marginTop="75dp"
23         android:layout_gravity="center_horizontal"
24         android:scaleType="centerInside"
25         android:src="@drawable/viewpager_view_page_content_1" />
26     
27 </RelativeLayout>

3.2 簡要介紹一下即將出爐的核心代碼

  1 public class ViewPagerViewActivity extends Activity implements View.OnClickListener {
  2     
  3     private ViewPager mPager;
  4     private ImageView mImgPoint;
  5     
  6     private SparseArray<View> mPageCache = new SparseArray<View>();
  7 
  8     @Override
  9     protected void onCreate(Bundle savedInstanceState) {
 10         super.onCreate(savedInstanceState);
 11         setContentView(R.layout.viewpager_view);
 12         initView();
 13     }
 14     
 15     private void initView() {
 16         mPager = (ViewPager)findViewById(R.id.viewpager_view_pager);
 17         mImgPoint = (ImageView)findViewById(R.id.viewpager_view_point);
 18         mPager.setAdapter(new ViewPagerAdapter(ViewPagerViewActivity.this));
 19         mPager.addOnPageChangeListener(new OnViewPageChangeListener());
 20         findViewById(R.id.viewpager_view_register).setOnClickListener(this);
 21         findViewById(R.id.viewpager_view_login).setOnClickListener(this);
 22     }
 23     
 24     private class ViewPagerAdapter extends PagerAdapter {
 25         private final int mCount = 3;
 26         private LayoutInflater mInflater;
 27         
 28         private ViewPagerAdapter(Context context) {
 29             mInflater = LayoutInflater.from(context);
 30         }
 31 
 32         @Override
 33         public int getCount() {
 34             return mCount;
 35         }
 36 
 37         @Override
 38         public boolean isViewFromObject(View view, Object obj) {
 39             return view == obj;
 40         }
 41         
 42         @Override
 43         public Object instantiateItem(ViewGroup container, int position) {
 44             View page = mPageCache.get(position);
 45             if (page == null) {
 46                 page = mInflater.inflate(R.layout.viewpager_view_page, container, false);
 47                 TextView txtTitle = (TextView)page.findViewById(R.id.viewpager_view_page_title);
 48                 ImageView imgContent = (ImageView)page.findViewById(R.id.viewpager_view_page_content);
 49                 switch (position) {
 50                     case 0:
 51                         txtTitle.setText(R.string.viewpager_view_page_title_1);
 52                         imgContent.setImageResource(R.drawable.viewpager_view_page_content_1);
 53                         break;
 54                     case 1:
 55                         txtTitle.setText(R.string.viewpager_view_page_title_2);
 56                         imgContent.setImageResource(R.drawable.viewpager_view_page_content_2);
 57                         break;
 58                     case 2:
 59                         txtTitle.setText(R.string.viewpager_view_page_title_3);
 60                         imgContent.setImageResource(R.drawable.viewpager_view_page_content_3);
 61                         break;
 62                     default:
 63                         break;
 64                 }
 65                 mPageCache.append(position, page);
 66             }
 67             container.addView(page);
 68             return page;
 69         }
 70         
 71         @Override
 72         public void destroyItem(ViewGroup container, int position, Object object) {
 73             container.removeView((View)object);
 74         }
 75     }
 76     
 77     private class OnViewPageChangeListener implements OnPageChangeListener {
 78         @Override
 79         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 80         }
 81 
 82         @Override
 83         public void onPageSelected(int position) {
 84             switch (position) {
 85                 case 0:
 86                     mImgPoint.setImageResource(R.drawable.viewpager_view_point_1);
 87                     break;
 88                 case 1:
 89                     mImgPoint.setImageResource(R.drawable.viewpager_view_point_2);
 90                     break;
 91                 case 2:
 92                     mImgPoint.setImageResource(R.drawable.viewpager_view_point_3);
 93                     break;
 94                 default:
 95                     break;
 96             }
 97         }
 98 
 99         @Override
100         public void onPageScrollStateChanged(int state) {
101         }
102     }
103 
104     @Override
105     public void onClick(View v) {
106         finish();
107     }
108 }

重點關注下 ViewPagerAdapter :

在 instantiateItem 方法中會inflate出新的頁面,再根據不同的position對頁面進行對應的初始化工作,同時在ViewPager中添加當前頁面。

而在 destroyItem 方法中,只需要將當前頁面從ViewPager中移除即可。

同時,需要給ViewPager設置一個 OnPageChangeListener ,以便在頁面切換的時候更新Indicator對應的小紅點位置。

3.3 關於緩存

可以看到,上面的代碼在 instantiateItem 方法中用到了頁面緩存,亦即每個position對應的頁面只需要inflate一次。

那為什麼會有緩存的需求呢?這是因為ViewPager每次加載當前頁面的同時,會自動預加載(instantiateItem)與當前頁面左右相隔的兩個頁面,同時會銷毀(destroyItem)與當前頁面不相鄰的頁面。

設想一下,滑動到第三個頁面時,第一個頁面會被銷毀掉,而滑回第二個頁面時,又會重新創建第一個頁面。如果不加以緩存,就會造成頁面的重復inflate從而浪費資源、降低性能。

 [轉載請保留本文地址:http://www.cnblogs.com/snser/p/5700751.html] 

四、demo工程

保存下面的圖片,擴展名改成 .zip 即可

 [轉載請保留本文地址:http://www.cnblogs.com/snser/p/5700751.html] 

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved