Android:啟動(dòng)引導(dǎo)頁(yè)實(shí)現(xiàn)
前言
基本上現(xiàn)在所有的應(yīng)用都會(huì)有一個(gè)歡迎界面，在歡迎界面對(duì)應(yīng)用做一個(gè)整體的介紹，然后在跳入到主界面，這次要說(shuō)的這個(gè)引導(dǎo)頁(yè)就是帶翻頁(yè)的引導(dǎo)頁(yè)。效果如下所示
概要實(shí)現(xiàn)
主要分為兩部分功能，一個(gè)是翻頁(yè)效果，一個(gè)是頁(yè)面位置指示器。為了實(shí)現(xiàn)翻頁(yè)效果我采用系統(tǒng)自帶的ViewPager對(duì)象來(lái)實(shí)現(xiàn);頁(yè)面指示器則通過(guò)一個(gè)LinearLayout在其中放置相應(yīng)個(gè)數(shù)的圖片，然后根據(jù)頁(yè)面的滑動(dòng)動(dòng)態(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
先來(lái)看下官方解釋:Layout manager that allows the user to flip left and right through pages of data.意思是說(shuō)，Viewpage是一個(gè)允許用戶(hù)在多個(gè)頁(yè)面數(shù)據(jù)之間通過(guò)左滑或者右滑的方式切換頁(yè)面數(shù)據(jù)的布局管理器。
主要功能點(diǎn)有兩部分，數(shù)據(jù)適配器Adapter，和事件監(jiān)聽(tīng)器OnPageChangeListener。數(shù)據(jù)適配器用來(lái)管理這個(gè)ViewPager對(duì)象的顯示內(nèi)容，而OnPageChangeListener用來(lái)處理當(dāng)頁(yè)面切換的時(shí)候的行為動(dòng)作，我修改頁(yè)面指示器就是通過(guò)這個(gè)事件來(lái)完成的。
適配器
復(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 //得到要顯示的對(duì)象并初始化圖片
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類(lèi)，用來(lái)展示頁(yè)面內(nèi)容，這兩個(gè)代碼會(huì)在完整代碼中體現(xiàn)。兩個(gè)方法需要實(shí)現(xiàn)，getCout，用來(lái)表示有多少個(gè)頁(yè)面;getItem，用來(lái)獲取指定位置的Pager對(duì)象。
imgs數(shù)組定義及實(shí)現(xiàn)：
復(fù)制代碼
1 List
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類(lèi)定義
復(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
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)聽(tīng)器OnPageChangeListener
這個(gè)監(jiān)聽(tīng)器用來(lái)監(jiān)聽(tīng)頁(yè)面切換事件，實(shí)現(xiàn)這個(gè)接口用來(lái)處理頁(yè)面切換時(shí)，頁(yè)面指示器跟著改變狀態(tài)。實(shí)現(xiàn)代碼如下
復(fù)制代碼
1 /**
2 * 頁(yè)面切換的事件監(jiān)聽(tīng)器
3 * */
4 class pageChangeListener implements OnPageChangeListener{
5
6 /**
7 * 當(dāng)某一個(gè)頁(yè)面被選中的時(shí)候觸發(fā)
8 * */
9 @Override
10 public void onPageSelected(int arg0) {
11 int count = directorLayout.getChildCount();
12 /**
13 * 指示器自對(duì)象順序和頁(yè)面顯示順序一樣的設(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 }
下載文檔
