<li id="34b3z"></li>
    <nav id="34b3z"></nav>
  1. <wbr id="34b3z"><legend id="34b3z"></legend></wbr>
    
    

        1. <form id="34b3z"></form>
          <sub id="34b3z"><table id="34b3z"><th id="34b3z"></th></table></sub>

          android UI進階之用ViewPager實現歡迎引導頁面

          [來源] 達內    [編輯] 達內   [時間]2012-08-30

          注意實現OnClickListener, OnPageChangeListener接口,監聽小點的點擊事件以及viewPager的滑動,在相應的回調方法中設置小點的enable狀態,我相信這個部分代碼比我講的清楚,就是判斷當前選中的位置對相應的小點進行設置

          ViewPager需要android-support-v4.jar這個包的支持,來自google提供的一個附加包。大家搜下即可。
          ViewPager主要用來組織一組數據,并且通過左右滑動的方式來展示。
          現在的大多數應用都會有一個歡迎引導頁面,如圖所示,通過左右滑動來告知用戶一些功能特性。

          這個引導圖效果用ViewPager可以很輕松的實現。
          正如前面所說,ViewPager是用來展示一組數據的,所以肯定需要Adapter來綁定數據和view。先寫一個Adapter:
          [java] view plaincopy
          1. package com.notice.viewpagerd;
          2.
          3. import java.util.List;
          4.
          5. import android.os.Parcelable;
          6. import android.support.v4.view.PagerAdapter;
          7. import android.support.v4.view.ViewPager;
          8. import android.view.View;
          9.
          10. public class ViewPagerAdapter extends PagerAdapter{
          11.
          12. //界面列表
          13. private List<View> views;
          14.
          15. public ViewPagerAdapter (List<View> views){
          16. this.views = views;
          17. }
          18.
          19. //銷毀arg1位置的界面
          20. @Override
          21. public void destroyItem(View arg0, int arg1, Object arg2) {
          22. ((ViewPager) arg0).removeView(views.get(arg1));
          23. }
          24.
          25. @Override
          26. public void finishUpdate(View arg0) {
          27. // TODO Auto-generated method stub
          28.
          29. }
          30.
          31. //獲得當前界面數
          32. @Override
          33. public int getCount() {
          34. if (views != null)
          35. {
          36. return views.size();
          37. }
          38.
          39. return 0;
          40. }
          41.
          42.
          43. //初始化arg1位置的界面
          44. @Override
          45. public Object instantiateItem(View arg0, int arg1) {
          46.
          47. ((ViewPager) arg0).addView(views.get(arg1), 0);
          48.
          49. return views.get(arg1);
          50. }
          51.
          52. //判斷是否由對象生成界面
          53. @Override
          54. public boolean isViewFromObject(View arg0, Object arg1) {
          55. return (arg0 == arg1);
          56. }
          57.
          58. @Override
          59. public void restoreState(Parcelable arg0, ClassLoader arg1) {
          60. // TODO Auto-generated method stub
          61.
          62. }
          63.
          64. @Override
          65. public Parcelable saveState() {
          66. // TODO Auto-generated method stub
          67. return null;
          68. }
          69.
          70. @Override
          71. public void startUpdate(View arg0) {
          72. // TODO Auto-generated method stub
          73.
          74. }
          75.
          76. }

          這里我們要綁定的每一個item就是一個引導界面,我們用一個list來保存。
          通過繼承PagerAdapter,并實現幾個我寫注釋的方法即可。
          布局界面比較簡單,加入ViewPager組件,以及底部的引導小點:
          [html] view plaincopy
          1. <?xml version="1.0" encoding="utf-8"?>
          2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          3. android:layout_width="fill_parent"
          4. android:layout_height="fill_parent"
          5. android:orientation="vertical" >
          6.
          7. <android.support.v4.view.ViewPager
          8. android:id="@+id/viewpager"
          9. android:layout_width="fill_parent"
          10. android:layout_height="fill_parent"
          11. />
          12.
          13.
          14. <LinearLayout
          15. android:id="@+id/ll"
          16. android:orientation="horizontal"
          17. android:layout_width="wrap_content"
          18. android:layout_height="wrap_content"
          19. android:layout_marginBottom="24.0dip"
          20. android:layout_alignParentBottom="true"
          21. android:layout_centerHorizontal="true">
          22.
          23. <ImageView
          24. android:layout_width="wrap_content"
          25. android:layout_height="wrap_content"
          26. android:layout_gravity="center_vertical"
          27. android:clickable="true"
          28. android:padding="15.0dip"
          29. android:src="@drawable/dot" />
          30.
          31. <ImageView
          32. android:layout_width="wrap_content"
          33. android:layout_height="wrap_content"
          34. android:layout_gravity="center_vertical"
          35. android:clickable="true"
          36. android:padding="15.0dip"
          37. android:src="@drawable/dot" />
          38.
          39. <ImageView
          40. android:layout_width="wrap_content"
          41. android:layout_height="wrap_content"
          42. android:layout_gravity="center_vertical"
          43. android:clickable="true"
          44. android:padding="15.0dip"
          45. android:src="@drawable/dot" />
          46.
          47. <ImageView
          48. android:layout_width="wrap_content"
          49. android:layout_height="wrap_content"
          50. android:layout_gravity="center_vertical"
          51. android:clickable="true"
          52. android:padding="15.0dip"
          53. android:src="@drawable/dot" />
          54.
          55. </LinearLayout>
          56.
          57. </RelativeLayout>

          其中小點的圖片用一個selector來控制顏色(設置item的enable為true或者false)
          dot.xml:
          [html] view plaincopy
          1. <?xml version="1.0" encoding="UTF-8"?>
          2. <selector
          3. xmlns:android="http://schemas.android.com/apk/res/android">
          4. <item android:state_enabled="true" android:drawable="@drawable/dark_dot" />
          5. <item android:state_enabled="false" android:drawable="@drawable/white_dot" />
          6. </selector>

          下面就是寫Activity了。
          [java] view plaincopy
          1. package com.notice.viewpagerd;
          2.
          3. import java.util.ArrayList;
          4. import java.util.List;
          5.
          6. import android.app.Activity;
          7. import android.os.Bundle;
          8. import android.support.v4.view.ViewPager;
          9. import android.support.v4.view.ViewPager.OnPageChangeListener;
          10. import android.view.View;
          11. import android.view.View.OnClickListener;
          12. import android.widget.ImageView;
          13. import android.widget.LinearLayout;
          14.
          15. public class ViewPagerDemoActivity extends Activity implements OnClickListener, OnPageChangeListener{
          16.
          17. private ViewPager vp;
          18. private ViewPagerAdapter vpAdapter;
          19. private List<View> views;
          20.
          21. //引導圖片資源
          22. private static final int[] pics = { R.drawable.whatsnew_00,
          23. R.drawable.whatsnew_01, R.drawable.whatsnew_02,
          24. R.drawable.whatsnew_03 };
          25.
          26. //底部小店圖片
          27. private ImageView[] dots ;
          28.
          29. //記錄當前選中位置
          30. private int currentIndex;
          31.
          32. /** Called when the activity is first created. */
          33. @Override
          34. public void onCreate(Bundle savedInstanceState) {
          35. super.onCreate(savedInstanceState);
          36. setContentView(R.layout.main);
          37.
          38. views = new ArrayList<View>();
          39.
          40. LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
          41. LinearLayout.LayoutParams.WRAP_CONTENT);
          42.
          43. //初始化引導圖片列表
          44. for(int i=0; i<pics.length; i++) {
          45. ImageView iv = new ImageView(this);
          46. iv.setLayoutParams(mParams);
          47. iv.setImageResource(pics[i]);
          48. views.add(iv);
          49. }
          50. vp = (ViewPager) findViewById(R.id.viewpager);
          51. //初始化Adapter
          52. vpAdapter = new ViewPagerAdapter(views);
          53. vp.setAdapter(vpAdapter);
          54. //綁定回調
          55. vp.setOnPageChangeListener(this);
          56.
          57. //初始化底部小點
          58. initDots();
          59.
          60. }
          61.
          62. private void initDots() {
          63. LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
          64.
          65. dots = new ImageView[pics.length];
          66.
          67. //循環取得小點圖片
          68. for (int i = 0; i < pics.length; i++) {
          69. dots[i] = (ImageView) ll.getChildAt(i);
          70. dots[i].setEnabled(true);//都設為灰色
          71. dots[i].setOnClickListener(this);
          72. dots[i].setTag(i);//設置位置tag,方便取出與當前位置對應
          73. }
          74.
          75. currentIndex = 0;
          76. dots[currentIndex].setEnabled(false);//設置為白色,即選中狀態
          77. }
          78.
          79. /**
          80. *設置當前的引導頁
          81. */
          82. private void setCurView(int position)
          83. {
          84. if (position < 0 || position >= pics.length) {
          85. return;
          86. }
          87.
          88. vp.setCurrentItem(position);
          89. }
          90.
          91. /**
          92. *這只當前引導小點的選中
          93. */
          94. private void setCurDot(int positon)
          95. {
          96. if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {
          97. return;
          98. }
          99.
          100. dots[positon].setEnabled(false);
          101. dots[currentIndex].setEnabled(true);
          102.
          103. currentIndex = positon;
          104. }
          105.
          106. //當滑動狀態改變時調用
          107. @Override
          108. public void onPageScrollStateChanged(int arg0) {
          109. // TODO Auto-generated method stub
          110.
          111. }
          112.
          113. //當當前頁面被滑動時調用
          114. @Override
          115. public void onPageScrolled(int arg0, float arg1, int arg2) {
          116. // TODO Auto-generated method stub
          117.
          118. }
          119.
          120. //當新的頁面被選中時調用
          121. @Override
          122. public void onPageSelected(int arg0) {
          123. //設置底部小點選中狀態
          124. setCurDot(arg0);
          125. }
          126.
          127. @Override
          128. public void onClick(View v) {
          129. int position = (Integer)v.getTag();
          130. setCurView(position);
          131. setCurDot(position);
          132. }
          133. }

          注意實現OnClickListener, OnPageChangeListener接口,監聽小點的點擊事件以及viewPager的滑動,在相應的回調方法中設置小點的enable狀態,我相信這個部分代碼比我講的清楚,就是判斷當前選中的位置對相應的小點進行設置~
          可以看到ViewPager還是一個非常簡單,也非常實用的一個控件。

          資源下載

          ?