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布局把按钮和文字写上
结束
关于本文所述，也不知道对不对。如果有做得不够好的地方，请直接指出，见笑了。