ViewPager实现App引导页面

简介: ViewPager使用App引导页面相关代码已经上传到仓库的ViewPager文件夹内viewPager实现引导页面.gif项目的基础配置就不多做赘述了,不清楚的可以查看我的这篇文章。

ViewPager使用App引导页面

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

img_d07aa405fdda7c3c6571cf73a7ed35a3.gif
viewPager实现引导页面.gif

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

img_f55ce35c6596fa8153093cf7580714e2.png
结构目录.png

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

img_ef2e3f0511f51d91b1553f15850db2df.png
图片素材.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集合

img_5cbb677fa42d88d1053db83148630f90.gif
文字图片滑动.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) {

    }
}
img_ef7c8ebdeca310bcf79254b8be6501ca.gif
图标滑动.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>

结束

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

目录
相关文章
|
3月前
|
安全 Java 应用服务中间件
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
【Azure 应用服务】App Service 默认页面暴露Tomcat版本信息,存在安全风险
|
24天前
|
前端开发 UED 开发者
uni-app:去除导航栏&跨域的问题&blobe查看图片&v-deep&页面操作 (五)
本文介绍了几个前端开发技巧:1) 如何通过设置 `navigationStyle` 为 `custom` 去除顶部导航;2) 解决跨域问题的方法,包括使用 `dotenv` 加载全局变量和配置 `devServer` 的代理;3) 使用 Blob 和 FileReader 查看图片;4) 利用 `v-deep` 深度作用选择器修改样式;5) 修改页面左上角返回按钮的行为。
|
3月前
|
应用服务中间件 Linux 网络安全
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
【Azure 应用服务】App Service for Linux 环境中为Tomcat页面修改默认的Azure 404页面
|
3月前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
3月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
3月前
|
JavaScript Linux 应用服务中间件
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
|
3月前
|
Java 应用服务中间件 Windows
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面
【Azure 应用服务】App Service for Windows 环境中为Tomcat自定义4xx/5xx页面
|
3月前
|
API 网络架构 开发者
【Azure 应用服务】App Service - 在修改应用服务计划的页面中,为什么无法查看到同一个资源组下面的其他应用服务计划(App Service Plan)呢?
【Azure 应用服务】App Service - 在修改应用服务计划的页面中,为什么无法查看到同一个资源组下面的其他应用服务计划(App Service Plan)呢?
|
3月前
|
Web App开发 开发者
【Azure 应用服务】App Service 进入后台管理(Kudu)页面,因为文件过多而显示不全的问题
【Azure 应用服务】App Service 进入后台管理(Kudu)页面,因为文件过多而显示不全的问题
|
3月前
|
Shell
【Azure 应用服务】App Service服务无法启动,打开Kudu站点,App Service Editor 页面均抛出:The service is unavailable
【Azure 应用服务】App Service服务无法启动,打开Kudu站点,App Service Editor 页面均抛出:The service is unavailable