ViewPager实现App引导页面

ViewPager使用App引导页面

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

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

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

文字滑动

在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文件

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".module.guide.GuideActivity"> <!--用来显示图标图片--> <ImageView android:id="@+id/mImageViews" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--用来显示文字图片，其实我们滑动的仅仅是文字图片而已，后面的图标变化是我们去监听文字图片的滑动位置再去设置改变的--> <android.support.v4.view.ViewPager android:id="@+id/mViewPager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> </android.support.constraint.ConstraintLayout> 

回到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<ImageView>() 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集合

图标变化

中间图标的变化的实现方式是我们去监听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) { } } 

完整代码

import kotlinx.android.synthetic.main.activity_guide.* import java.util.ArrayList /** * 引导页面 */ class GuideActivity : WinActivity() { //用来填充布局的ImagView集合 private val imageViews = ArrayList<ImageView>() //图片数据 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 version="1.0" encoding="utf-8" ?> <!--相当于做了一张圆角的图片,然后给button作为背景图片--> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!--设置背景色--> <solid android:color="#24C68A" /> <!--设置圆角--> <corners android:radius="305dp" /> <!--<padding--> <!--android:bottom="10dp"--> <!--android:left="10dp"--> <!--android:right="10dp"--> <!--android:top="10dp"--> <!--/>--> <!--设置边框线的宽度和颜色--> <stroke android:width="1dp" android:color="#24C68A" /> </shape> 

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

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/black" tools:context=".module.guide.GuideActivity"> <!--用来显示图标图片--> <ImageView android:id="@+id/mImageViews" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--用来显示文字图片，其实我们滑动的仅仅是文字图片而已，后面的图标变化是我们去监听文字图片的滑动位置再去设置改变的--> <android.support.v4.view.ViewPager android:id="@+id/mViewPager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> <!-- app:layout_constraintBottom_toBottomOf="parent" 控件自身的底部与父控件的底部对齐--> <Button android:id="@+id/mRegister" android:layout_width="match_parent" android:layout_height="49dp" android:layout_marginBottom="58dp" android:layout_marginLeft="34dp" android:layout_marginRight="34dp" android:background="@drawable/guide_button" android:padding="8dp" android:text="现在就加入" android:textColor="#ffffff" android:textSize="16sp" app:layout_constraintBottom_toBottomOf="parent" /> <!-- app:layout_constraintRight_toRightOf="parent" 控件自身的右边与父控件的右边对齐--> <!-- app:layout_constraintTop_toTopOf="parent" 控件自身的顶部与控件的顶部对齐--> <TextView android:id="@+id/mTxtLogin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="10dp" android:layout_marginTop="12dp" android:text="登陆" android:textColor="@android:color/white" android:textSize="16sp" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout> 

结束

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