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>

結束

關于本文所述，也不知道對不對。如果有做得不夠好的地方，請直接指出，見笑了。

ViewPager實作App引導頁面

ViewPager使用App引導頁面

文字滑動

圖示變化

按鈕和文字

繼續閱讀

項目管理那些事兒

OS --written test1

OS-written test2

壓縮編碼M-JPEG、MPEG4、H.264

invalid byte 1 of 1-byte UTF-8 sequence

出現invalid byte 1 of 1-byte UTF-8 sequence問題

轉詳解C#資料庫存取圖檔三大方式

為什麼要選擇UniDAC

Android面試題——5.常見面試官提問Android面試題①

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

BMP檔案結構及圖像每行位元組計算方法

磁盤結構及在Linux中的命名

SIP Presence SUBSCRIBE-NOTIFY

QName是什麼

Android電視機（機頂盒）初次開發的一些經驗分享