編輯:關於android開發
一、概述
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]
(試筆)一、Android四大框架之ContentProvider的學習與運用,實現SQLite的增刪改查。,安卓sqlite增刪改查本文系原創博客,文中不妥煩請指出,如
強大的網絡通信框架--第三方開源--volley,開源--volleyAndroid Volley是Android平台上很好用的第三方開源網絡通信框架。使用簡答,功能強大
Android添加圖片到ListView或者 RecyclerView顯示, 先上圖 點擊+號就去選擇圖片 實際上這個添加本身就是一個List
android的布局-----TableLayout(表格布局),tablelayout布局學習導圖 (1)TableLayout的相關簡介 java
使用Eclipse開發,Java Compiler中Annotation