个人笔记：Kotlin开发制作首页引导页

我制作引导页是使用的Android viewpager 完成，支持圆点指示，效果图如下

首先要做的就是创建Avtivity

activity_guide.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".Activity.GuideActivity"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    >


<!--    存放轮播图片-->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


<!--    设置圆点指示器-->
    <LinearLayout
        android:id="@+id/dot_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="-100dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="....."
            android:textColor="#ccc"
            android:textSize="30sp"
            android:textStyle="bold"/>
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        >
        <TextView
            android:id="@+id/nextbtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="@string/next"
            android:layout_marginRight="30dp"
            android:textStyle="bold" />

    </RelativeLayout>



</LinearLayout>

GuideACtivity.kt

class GuideActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        supportActionBar?.hide()
        setContentView(R.layout.activity_guide)
        val adapter = viewPagerAdapter()
        viewPager.adapter = adapter
        nextbtn.setOnClickListener {
            viewPager.currentItem += 1
        }


        addDots()

        viewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{
            override fun onPageScrolled(
                position: Int,
                positionOffset: Float,
                positionOffsetPixels: Int
            ) {

            }

            override fun onPageSelected(position: Int) {
                addDots(position)
            }

            override fun onPageScrollStateChanged(state: Int) {

            }

        })


    }
    //        圆点指示器
private fun addDots(posi:Int = 0){
        val dos = arrayOf(TextView(this),TextView(this),TextView(this),TextView(this),TextView(this))
        dot_container.removeAllViews()
        dos.forEach {
            it.text = "."
            it.textSize = 30f
            it.paint.isFakeBoldText = true
            it.setTextColor(Color.BLACK)
            dot_container.addView(it)
        }
        dos[posi].setTextColor(Color.WHITE)
    }
}

然后要为需要滑动的图片设置一个xml用于保存，代码如下：

 guide_page.xml

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

    <ImageView
        android:id="@+id/pageIcon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/bg2" />

    

</RelativeLayout>

之后，还需要个guideAvtivity设置一个适配器，用于存放图片，设置翻页

viewPagerAdapter.kt

package com.example.try04.Activity

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.viewpager.widget.PagerAdapter
import com.example.try04.R

class viewPagerAdapter:PagerAdapter() {
    override fun getCount(): Int {
        return 5
    }

    override fun isViewFromObject(p0: View, p1: Any): Boolean {
        return p0 == p1
    }
    val icons =
        intArrayOf(R.drawable.bg2,R.drawable.bg3,R.drawable.bg5,R.drawable.bg6,R.drawable.bg1)

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        val page = LayoutInflater.from(container.context).inflate(R.layout.guide_page,container,false)
        val pageIcon = page.findViewById<ImageView>(R.id.pageIcon)
        pageIcon.setImageResource(icons[position])
        container.addView(page)
        return page
    }

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

    }
}

至此，一个带有圆点指示器的引导页就完成了，但我不明白如何在最后一页时添加文本，例如滑倒最后一页后显示进入首页，若有知道的还望告知，与君共勉。