ViewPager实现App引导页面

ViewPager使用App引导页面

相关代码已经上传到仓库的ViewPager文件夹内

viewPager实现引导页面.gif

项目的基础配置就不多做赘述了，不清楚的可以查看我的这篇文章。

结构目录.png

页面是由8张图片组成的，分别是4张透明背景的文字图片和4张黑底的图片图片

图片素材.png

文字滑动

在module包下创建guide包，创建GuideActivity

import kotlinx.android.synthetic.main.activity_guide.*
/**
 * 引导页面
 */
class GuideActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_guide)
    }
}

1) 创建res-drawable-hdpi文件夹，这一步很关键，因为我们的素材文件有点大，如果不放在hdpi文件夹，而是放在普通的drawable文件夹内的话很可能会出现OOM内存溢出异常.

2) 把我们的4张文字图片和4张图标素材拷到文件夹内

3) 书写activity_guide.xml文件

回到GuideActivity

import kotlinx.android.synthetic.main.activity_guide.*

/**
 * 引导页面
 */
class GuideActivity : WinActivity() {

    //滑动文字图片的int数组
    var ids = intArrayOf(R.drawable.guide_txt_a, R.drawable.guide_txt_b, R.drawable.guide_txt_c, R.drawable.guide_txt_d)

    //用来填充viewPager的ImageView集合
    private val imageViews = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_guide)
        //初始化数据
        initData()
    }

    /**
     * 初始化数据
     */
    private fun initData() {
        //遍历ids数组，把ids数据的图片路径传到imageViews集合中
        for (i in ids.indices) {
            //通过代码生成ImageView
            val imageView = ImageView(this)
            //设置生成的ImageView的背景
            imageView.setBackgroundResource(ids[i])
            //将设置好的ImageView添加到集合中
            imageViews.add(imageView)
        }
        //设置ViewPager适配器
        mViewPager.adapter = MyAdapter()
    }

    /**
     * 设置viewPager适配器
     * 这里记得把MyAdapter加上inner关键字，声明为内部类
     */
    inner class MyAdapter : PagerAdapter() {

        override fun isViewFromObject(view: View, `object`: Any): Boolean {
            return view == `object`
        }

        /**
         * 返回数据中的中个数
         */
        override fun getCount(): Int {
            return imageViews.size
        }

        override fun instantiateItem(container: ViewGroup, position: Int): Any {
            var imageView: ImageView = imageViews.get(position)
            //添加到容器中
            container.addView(imageView)
            return imageView
        }

        override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
//            super.destroyItem(container, position, `object`)
            container.removeView(`object` as View?)
        }
    }
}

1）我们声明了Int类型数组，该数组是用来存储要显示的文字图片的。还声明了泛形为ImageView类型的imageViews集合，该集合是用来存储我们要填充到viewPager上的ImageView的，

2）之后我们通过for循环把int数组的图片都设置到通过代码生成的ImageView里，并把这些生成的图片都填充到imageViews集合里。

3）最后设置viewPager的适配器，数据源就是我们处理后的imageViews集合

文字图片滑动.gif

图标变化

中间图标的变化的实现方式是我们去监听viewPager的滑动情况，当监听到进入下一个页面时，去设置相应的图片

 /**
   * 初始化数据
   */
   private fun initData() {
        //viewPager滑动监听
        mViewPager.addOnPageChangeListener(MyOnPageChangeListener())
       //...其它不变
    }

/**
 * 监听ViewPager的滑动距离
 */
inner class MyOnPageChangeListener : ViewPager.OnPageChangeListener {

    override fun onPageScrollStateChanged(state: Int) {
    }

    /**
     * 当页面滚动时
     * @param position 当前滑动页面的位置
     */
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        L.d("当前页面的位置:$position")
        when (position) {
            0 -> mImageViews.setImageResource(R.drawable.guide_img_a)
            1 -> mImageViews.setImageResource(R.drawable.guide_img_b)
            2 -> mImageViews.setImageResource(R.drawable.guide_img_c)
            3 -> mImageViews.setImageResource(R.drawable.guide_img_d)
        }
    }

    override fun onPageSelected(position: Int) {

    }
}

图标滑动.gif

完整代码

import kotlinx.android.synthetic.main.activity_guide.*
import java.util.ArrayList

/**
 * 引导页面
 */
class GuideActivity : WinActivity() {

    //用来填充布局的ImagView集合
    private val imageViews = ArrayList()

    //图片数据
    internal var ids = intArrayOf(R.drawable.guide_txt_a, R.drawable.guide_txt_b, R.drawable.guide_txt_c, R.drawable.guide_txt_d)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_guide)
        //初始化数据
        initData()
    }

    /**
     * 初始化数据
     */
    private fun initData() {
        //viewPager滑动监听
        mViewPager.addOnPageChangeListener(MyOnPageChangeListener())
        //将图片添加到集合中
        for (i in ids.indices) {
            //          通过代码生成ImageView
            val imageView = ImageView(this)
            //          设置imageView背景
            imageView.setBackgroundResource(ids[i])
            //          将生成的imagView添加到集合中去
            imageViews.add(imageView)
        }
        //设置viewPager适配器
        mViewPager.adapter = MyAdapter()
    }

    /**
     * 监听ViewPager的滑动距离
     */
    inner class MyOnPageChangeListener : ViewPager.OnPageChangeListener {

        override fun onPageScrollStateChanged(state: Int) {
        }

        /**
         * 当页面滚动时
         * @param position 当前滑动页面的位置
         */
        override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
            L.d("当前页面的位置:$position")
            when (position) {
                0 -> mImageViews.setImageResource(R.drawable.guide_img_a)
                1 -> mImageViews.setImageResource(R.drawable.guide_img_b)
                2 -> mImageViews.setImageResource(R.drawable.guide_img_c)
                3 -> mImageViews.setImageResource(R.drawable.guide_img_d)
            }
        }

        override fun onPageSelected(position: Int) {

        }
    }

    /**
     * ViewPager适配器
     */
    inner class MyAdapter : PagerAdapter() {
        /**
         * 返回数据中的总个数
         */
        override fun getCount(): Int {
            return imageViews.size
        }

        override fun isViewFromObject(view: View, `object`: Any): Boolean {
            return view == `object`
        }

        /**
         * 将数据添加到集合中
         */
        override fun instantiateItem(container: ViewGroup, position: Int): Any {
            var imageView: ImageView = imageViews.get(position);
            //添加到容器中
            container.addView(imageView)
            return imageView
        }

        /**
         * 销毁识图
         */
        override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
//            super.destroyItem(container, position, `object`)
            container.removeView(`object` as View?)
        }
    }
}

按钮和文字

在drawable文件夹内创建guide_button.xml，用来设置按钮的背景

最后在xml布局把按钮和文字写上

结束

关于本文所述，也不知道对不对。如果有做得不够好的地方，请直接指出，见笑了。