前言

基本上現(xiàn)在所有的應(yīng)用都會有一個(gè)歡迎界面，在歡迎界面對應(yīng)用做一個(gè)整體的介紹，然后在跳入到主界面，這次要說的這個(gè)引導(dǎo)頁就是帶翻頁的引導(dǎo)頁。效果如下所示

概要實(shí)現(xiàn)

主要分為兩部分功能，一個(gè)是翻頁效果，一個(gè)是頁面位置指示器。為了實(shí)現(xiàn)翻頁效果我采用系統(tǒng)自帶的ViewPager對象來實(shí)現(xiàn);頁面指示器則通過一個(gè)LinearLayout在其中放置相應(yīng)個(gè)數(shù)的圖片，然后根據(jù)頁面的滑動動態(tài)修改各個(gè)圖片的資源。布局文件如下所示

復(fù)制代碼

1

2 xmlns:tools="http://schemas.android.com/tools"

3 android:layout_width="match_parent"

4 android:layout_height="match_parent"

5 tools:context=".MainActivity" >

6

7

8 xmlns:android="http://schemas.android.com/apk/res/android"

9 android:id="@+id/welcome_pager"

10 android:layout_width="match_parent"

11 android:layout_height="match_parent" />

12

13

14

15 android:id="@+id/director"

16 android:layout_width="match_parent"

17 android:layout_height="wrap_content"

18 android:gravity="center_horizontal"

19 android:orientation="horizontal"

20 android:layout_marginBottom="15dip"

21 android:layout_alignParentBottom="true"

22 >

23

24

25 android:layout_width="wrap_content"

26 android:layout_height="wrap_content"

27 android:background="@drawable/pageindicator_on" />

28

29

30 android:layout_width="wrap_content"

31 android:layout_height="wrap_content"

32 android:background="@drawable/pageindicator_off" />

33

34

35 android:layout_width="wrap_content"

36 android:layout_height="wrap_content"

37 android:background="@drawable/pageindicator_off" />

38

39

40 android:layout_width="wrap_content"

41 android:layout_height="wrap_content"

42 android:background="@drawable/pageindicator_off" />

43

44

45

復(fù)制代碼

ViewPager

先來看下官方解釋:Layout manager that allows the user to flip left and right through pages of data.意思是說，Viewpage是一個(gè)允許用戶在多個(gè)頁面數(shù)據(jù)之間通過左滑或者右滑的方式切換頁面數(shù)據(jù)的布局管理器。

主要功能點(diǎn)有兩部分，數(shù)據(jù)適配器Adapter，和事件監(jiān)聽器OnPageChangeListener。數(shù)據(jù)適配器用來管理這個(gè)ViewPager對象的顯示內(nèi)容，而OnPageChangeListener用來處理當(dāng)頁面切換的時(shí)候的行為動作，我修改頁面指示器就是通過這個(gè)事件來完成的。

適配器

復(fù)制代碼

1 class pagerAdapter extends FragmentPagerAdapter{

2

3 public pagerAdapter(FragmentManager fm) {

4 super(fm);

5 }

6

7 @Override

8 public Fragment getItem(int arg0) {

9 //得到要顯示的對象并初始化圖片

10 WelcomeFragment fm = new WelcomeFragment();

11 fm.setImg(imgs.get(arg0));

12

13 return fm;

14 }

15

16 @Override

17 public int getCount() {

18 return imgs.size();

19 }

20

21 }

復(fù)制代碼

上面這段就是ViewPager要用的適配器了，其中imgs是一個(gè)id數(shù)組，存放了要在歡迎界面展示的圖片的id，WelcomeFragment是一個(gè)Fragment類，用來展示頁面內(nèi)容，這兩個(gè)代碼會在完整代碼中體現(xiàn)。兩個(gè)方法需要實(shí)現(xiàn)，getCout，用來表示有多少個(gè)頁面;getItem，用來獲取指定位置的Pager對象。

imgs數(shù)組定義及實(shí)現(xiàn)：

復(fù)制代碼

1 List imgs = null;

2 //初始化歡迎界面圖片數(shù)組

3 imgs = new ArrayList();

4 imgs.add(R.drawable.help1);

5 imgs.add(R.drawable.help2);

6 imgs.add(R.drawable.help3);

7 imgs.add(R.drawable.help4);

復(fù)制代碼

WelcomeFragment類定義

復(fù)制代碼

1 public class WelcomeFragment extends Fragment {

2

3 View view = null;

4 int imgId ;

5 @Override

6 public View onCreateView(LayoutInflater inflater, ViewGroup container,

7 Bundle savedInstanceState) {

8 view = inflater.inflate(R.layout.welcome_fragment, null);

9

10 ImageView fragmentVw = (ImageView) view.findViewById(R.id.welcome_Img);

11 fragmentVw.setBackgroundResource(imgId);

12 return view;

13 }

14

15 /**

16 * 為該Fragment設(shè)置顯示圖片

17 * */

18 public void setImg(int imgID){

19

20 imgId = imgID;

21 }

22 }

復(fù)制代碼

WelcomeFragment布局文件

復(fù)制代碼

1 [!--empirenews.page--]

2 android:layout_width="match_parent"

3 android:layout_height="match_parent" >

4

5

6 android:id="@+id/welcome_Img"

7 android:contentDescription="welcome"

8 android:layout_width="match_parent"

9 android:layout_height="match_parent" />

10

11

復(fù)制代碼

事件監(jiān)聽器OnPageChangeListener

這個(gè)監(jiān)聽器用來監(jiān)聽頁面切換事件，實(shí)現(xiàn)這個(gè)接口用來處理頁面切換時(shí)，頁面指示器跟著改變狀態(tài)。實(shí)現(xiàn)代碼如下

復(fù)制代碼

1 /**

2 * 頁面切換的事件監(jiān)聽器

3 * */

4 class pageChangeListener implements OnPageChangeListener{

5

6 /**

7 * 當(dāng)某一個(gè)頁面被選中的時(shí)候觸發(fā)

8 * */

9 @Override

10 public void onPageSelected(int arg0) {

11 int count = directorLayout.getChildCount();

12 /**

13 * 指示器自對象順序和頁面顯示順序一樣的設(shè)置為on，其余的設(shè)置為off

14 * */

15 for(int i=0;i

16 ImageView iv = (ImageView) directorLayout.getChildAt(i);

17 if(i == arg0){

18 iv.setBackgroundResource(R.drawable.pageindicator_on);

19 }else{

20 iv.setBackgroundResource(R.drawable.pageindicator_off);

21 }

22 }

23 }

24

25 @Override

26 public void onPageScrolled(int arg0, float arg1, int arg2) {

27 // TODO Auto-generated method stub

28 }

29

30 @Override

31 public void onPageScrollStateChanged(int arg0) {

32 // TODO Auto-generated method stub

33 }

34 }