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文件
<?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集合
文字图片滑动.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<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>
结束
关于本文所述，也不知道对不对。如果有做得不够好的地方，请直接指出，见笑了。
