Android:啟動引導頁實現

　　

前言

　　基本上現在所有的應用都會有一個歡迎界面，在歡迎界面對應用做一個整體的介紹，然后在跳入到主界面，這次要說的這個引導頁就是帶翻頁的引導頁。效果如下所示

　　

概要實現

　　主要分為兩部分功能，一個是翻頁效果，一個是頁面位置指示器。為了實現翻頁效果我采用系統自帶的ViewPager對象來實現；頁面指示器則通過一個LinearLayout在其中放置相應個數的圖片，然后根據頁面的滑動動態修改各個圖片的資源。布局文件如下所示

　　

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/welcome_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 圖片位置指示器 -->
    <LinearLayout
        android:id="@+id/director"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal" 
        android:layout_marginBottom="15dip"
        android:layout_alignParentBottom="true"
        >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/pageindicator_on" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/pageindicator_off" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/pageindicator_off" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/pageindicator_off" />
    </LinearLayout>

</RelativeLayout>

 

ViewPager

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

　　主要功能點有兩部分，數據適配器Adapter，和事件監聽器OnPageChangeListener。數據適配器用來管理這個ViewPager對象的顯示內容，而OnPageChangeListener用來處理當頁面切換的時候的行為動作，我修改頁面指示器就是通過這個事件來完成的。

　　適配器

　　

class pagerAdapter extends FragmentPagerAdapter{

    public pagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int arg0) {
        //得到要顯示的對象並初始化圖片
        WelcomeFragment fm = new WelcomeFragment();
        fm.setImg(imgs.get(arg0));
        
        return fm;
    }

    @Override
    public int getCount() {
        return imgs.size();
    }
    
}

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

　　imgs數組定義及實現：

List<Integer> imgs = null;
//初始化歡迎界面圖片數組
imgs = new ArrayList<Integer>();
imgs.add(R.drawable.help1);
imgs.add(R.drawable.help2);
imgs.add(R.drawable.help3);
imgs.add(R.drawable.help4);

　　WelcomeFragment類定義

　　

public class WelcomeFragment extends Fragment {
    
    View view = null;
    int imgId ;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.welcome_fragment, null);
        
        ImageView  fragmentVw = (ImageView) view.findViewById(R.id.welcome_Img);
        fragmentVw.setBackgroundResource(imgId);
        return view;
    }
    
    /**
     * 為該Fragment設置顯示圖片
     * */
    public void setImg(int imgID){
        
        imgId = imgID;
    }
}

　　WelcomeFragment布局文件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/welcome_Img"
        android:contentDescription="welcome"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

　　

事件監聽器OnPageChangeListener

 　　這個監聽器用來監聽頁面切換事件，實現這個接口用來處理頁面切換時，頁面指示器跟着改變狀態。實現代碼如下

/**
 * 頁面切換的事件監聽器
 * */
class pageChangeListener implements OnPageChangeListener{
    
    /**
     * 當某一個頁面被選中的時候觸發
     * */
    @Override
    public void onPageSelected(int arg0) {
        int count = directorLayout.getChildCount();
        /**
         * 指示器自對象順序和頁面顯示順序一樣的設置為on，其余的設置為off
         * */
        for(int i=0;i<count;i++){
            ImageView iv = (ImageView) directorLayout.getChildAt(i);
            if(i == arg0){
                iv.setBackgroundResource(R.drawable.pageindicator_on);
            }else{
                iv.setBackgroundResource(R.drawable.pageindicator_off);
            }
        }
    }
    
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub        
    }
    
    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub        
    }
}

 

　　這樣的話，一個引導頁就做好了。

后記

　　完整代碼：Welcome

　　原文連接：http://www.cnblogs.com/luoaz/p/3750539.html