我制作引导页是使用的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)
}
}
至此,一个带有圆点指示器的引导页就完成了,但我不明白如何在最后一页时添加文本,例如滑倒最后一页后显示进入首页,若有知道的还望告知,与君共勉。