Android 简单的引导页实现

有时候只要简单的实现引导页，网上个别选项又太多，这边用非常简单的viewpager来实现，并且通过SharedPreferences 保存第一次的状态，后续打开App不再显示

class WelcomeActivity : BaseActivity() {

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

    private fun initView() {
        var handler = Handler()
        if (!CacheUtils.getBoolean(FIRST_LOGIN)) {
            handler.postDelayed(Runnable {
                val intent = Intent()
                intent.setClass(this@WelcomeActivity, MainActivity::class.java)
                startActivity(intent)
                finish()
            }, 1000)
        } else {
            handler.postDelayed(Runnable {
                val intent = Intent()
                intent.setClass(this@WelcomeActivity, GuidePageActivity::class.java)
                startActivity(intent)
                finish()
            }, 1000)
        }
    }
    

创建WelcomeActivity作为欢迎页。CacheUtils是SharedPreferences工具类，判断是否第一次登陆，true进入引导页面，否则进入首页，这边用handler 做一秒定时任务，这样欢迎页面不会切换的特别快

class GuidePageActivity : BaseActivity() {
    private lateinit var adapter: GuidePageViewPagerAdapter
    /**
     * 存放图片数组
     */
    private val mPageList = listOf<Int>(
        R.mipmap.ic_page1,
        R.mipmap.ic_page2,
        R.mipmap.ic_page3
    )

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

    private fun initView() {
        adapter = GuidePageViewPagerAdapter(mPageList, this)
        viewPager.adapter = adapter
    }
}

GuidePageActivity引导界面，给adapter传要展示的图片数组，viewpager加载适配器

activity_guidepage.xml viewpager布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </androidx.viewpager.widget.ViewPager>
</LinearLayout>

viewpagerApadper继承pagerAdapter 实现必要的几个方法

class GuidePageViewPagerAdapter(var Images: List<Int>, var activity: AppCompatActivity) :
    PagerAdapter() {

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        val url = Images!![position]
        var view = LayoutInflater.from(activity).inflate(R.layout.item_guidepage, null) as RelativeLayout
        Glide.with(activity).load(Images[position]).into(view.image)
        container.addView(view)
        view.setOnClickListener {
        //判断最后一页的点击事件
            if (position == 2) {
                CacheUtils.putBoolean(AppConstants.FIRST_LOGIN, false)
                val intent = Intent()
                intent.setClass(activity, MainActivity::class.java)
                activity.startActivity(intent)
                activity.finish()
            }
        }
        return view
    }

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

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

    override fun getCount(): Int {
        return Images.size
    }
}

item_guidepage.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ImageView>

</RelativeLayout>

在instantiateItem方法中，给ViewGroup添加资源布局，可以自定义布局 比如添加按钮和文本，如果只是展示图片，也可以直接替换成ImageView。 我这边就非常简单，给最后一个引导图布局添加了点击事件，用户点击就可以直接到首页了。更多丰富的操作比如添加小圆点，最省事的方法。那就让UI给引导图加上小圆点哈哈。或者自己可以动态添加小圆点，跟踪viewpager翻页进行变化