Android如何添加多張引導頁

　　

　　摘要：項目需要添加多張引導頁，所以在網上搜集了一些資料並整理好。　　

　　

　　Step1

　　　　添加一個GuideActivity.

　　　　其實這個引導頁無非就是一個Activity,里面有一個ViewPager而已。多張圖片放進去，裝進ViewPager里面。　　

　　　　注意：這里Activity中千萬不要設置圖片資源，不然會報OOM異常。多張圖片會導致內存溢出。

　　　　==>源碼如下：

　　　　①GuideActivity的Kotlin源碼　　

class GuideActivity : AppCompatActivity(), ViewPager.OnPageChangeListener {

    private var vp: ViewPager? = null
    private var imageIdArray: IntArray? = null//圖片資源的數組
    private var viewList: MutableList<View>? = null//圖片資源的集合
    private var vg: ViewGroup? = null//放置圓點

    //實例化原點View
    private var iv_point: ImageView? = null
    private var ivPointArray: Array<ImageView?>? = null

    //最后一頁的按鈕
    private var ib_start: Button? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
        setContentView(R.layout.activity_guide)
        MainApplication.getInstance().addActivity(this)
        StatusBarUtils.setWindowStatusBarColor(this, R.color.headline)
        ib_start = findViewById(R.id.guide_ib_start) as Button
        ib_start!!.setOnClickListener {
            val intent:Intent=Intent(this@GuideActivity,NavigationMainActivity::class.java)
            intent.putExtra("openAPP",true)
            overridePendingTransition(R.anim.slide_right_in,R.anim.slide_left_out)
            startActivity(intent)
            finish()
        }

        //加載ViewPager
        initViewPager()

        //加載底部圓點
        initPoint()
    }


    /**
     * 加載底部圓點
     */
    private fun initPoint() {
        //這里實例化LinearLayout
        vg = findViewById(R.id.guide_ll_point) as ViewGroup
        //根據ViewPager的item數量實例化數組
        ivPointArray = arrayOfNulls(viewList!!.size)
        //循環新建底部圓點ImageView，將生成的ImageView保存到數組中
        val size = viewList!!.size
        for (i in 0..size - 1) {
            iv_point = ImageView(this)
            iv_point!!.layoutParams = ViewGroup.LayoutParams(50, 50)
            iv_point!!.setPadding(20, 0, 20, 150)//left,top,right,bottom
            ivPointArray!![i] = iv_point!!
            //第一個頁面需要設置為選中狀態，這里采用兩張不同的圖片
            if (i == 0) {
                iv_point!!.setBackgroundResource(R.mipmap.icon_point_pre)
            } else {
                iv_point!!.setBackgroundResource(R.mipmap.icon_point)
            }
            //將數組中的ImageView加入到ViewGroup
            vg!!.addView(ivPointArray!![i])
        }


    }

    /**
     * 加載圖片ViewPager
     */
    private fun initViewPager() {
        vp = findViewById(R.id.guide_vp) as ViewPager
        //實例化圖片資源
        imageIdArray = intArrayOf(R.mipmap.intro_school, R.mipmap.intro_discovery_1, R.mipmap.intro_discovery_2
        ,R.mipmap.intro_discovery_3,R.mipmap.intro_ask_1,R.mipmap.intro_ask_2,R.mipmap.intro_ask_3,R.mipmap.intro_mew_coin)
        viewList = ArrayList()

        //循環創建View並加入到集合中
        val len = imageIdArray!!.size
        for (i in 0..len - 1) {
            //new ImageView並設置全屏和圖片資源
            val imageView = ImageView(this)
            viewList!!.add(imageView)
        }

        //View集合初始化好后，設置Adapter
        vp!!.adapter = GuidePageAdapter(viewList)
        vp!!.offscreenPageLimit=9
        //設置滑動監聽
        vp!!.setOnPageChangeListener(this)
    }


    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {

    }

    /**
     * 滑動后的監聽
     * @param position
     */
    override fun onPageSelected(position: Int) {
        //循環設置當前頁的標記圖
        val length = imageIdArray!!.size
        for (i in 0..length - 1) {
            ivPointArray!![position]!!.setBackgroundResource(R.mipmap.icon_point_pre)
            if (position != i) {
                ivPointArray!![i]!!.setBackgroundResource(R.mipmap.icon_point)
            }
        }

        //判斷是否是最后一頁，若是則顯示按鈕
        if (position == imageIdArray!!.size - 1) {
            ib_start!!.visibility = View.VISIBLE
        } else {
            ib_start!!.visibility = View.GONE
        }
    }


    override fun onPageScrollStateChanged(state: Int) {

    }
}

　　　②activity_guide布局代碼：　

<?xml version="1.0" encoding="utf-8"?>
<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="com.guangdamiao.www.mew_android_debug.navigation.GuideActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/guide_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/guide_ll_point"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="150pt"
        android:gravity="center_horizontal">
    </LinearLayout>

    <Button
        android:layout_width="500pt"
        android:layout_height="55pt"
        android:id="@+id/guide_ib_start"
        android:text="進入大學喵"
        android:textSize="30pt"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/guide_ll_point"
        android:background="@drawable/button_shape_apply"
        android:visibility="gone"/>

</RelativeLayout>

　　

 

　　Step2

　　第二步就是寫這個GuidePageAdapter了。

　　  注意在instanticateItem(ViewGroup container,int position)中設置背景圖片，提高加載速度，解決OOM問題。

　　  源碼如下：

　　  

public class GuidePageAdapter extends PagerAdapter {
    private List<View> viewList;
    private int[] mResIds=new int[]{
            R.mipmap.intro_school,
            R.mipmap.intro_discovery_1,
            R.mipmap.intro_discovery_2,
            R.mipmap.intro_discovery_3,
            R.mipmap.intro_ask_1,
            R.mipmap.intro_ask_2,
            R.mipmap.intro_ask_3,
            R.mipmap.intro_mew_coin,
    };

    public GuidePageAdapter(List<View> viewList) {
        this.viewList = viewList;
    }

    /**
     * @return 返回頁面的個數
     */
    @Override
    public int getCount() {
        if (viewList != null){
            return viewList.size();
        }
        return 0;
    }

    /**
     * 判斷對象是否生成界面
     * @param view
     * @param object
     * @return
     */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    /**
     * 初始化position位置的界面
     * @param container
     * @param position
     * @return
     */

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //在此設置背景圖片，提高加載速度，解決OOM問題
        View view=viewList.get(position);
        int count=getCount();
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        view.setBackgroundResource(mResIds[position%count]);
        view.setLayoutParams(params);
        container.addView(viewList.get(position));
        return viewList.get(position);
    }


    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewList.get(position));
    }
}

 

　　

　　Step3

　　第三步就是在啟動頁中設置跳轉引導頁了。

　　引導頁一般是第一次安裝APP后才會出現，這里可以寫一個sharePreferences文件記錄是不是第一次安裝。

　　最后利用intent跳轉到引導頁就可以了。