Android如何添加多张引导页

Posted 2020-10-11 Jason_Jan

　　

　　摘要：项目需要添加多张引导页，所以在网上搜集了一些资料并整理好。　　

　　

　　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([email protected],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跳转到引导页就可以了。