Android如何添加多張引導頁

標籤：tar   全屏   bool   cte   init   ppc   listener   監聽   windows   

　　

　　摘要：項目需要添加多張引導頁，所以在網上搜集了一些資料並整理好。　　

　　

　　Step1

　　　　添加一個GuideActivity.

　　　　其實這個引導頁無非就是一個Activity,裡面有一個ViewPager而已。多張圖片放進去，裝進ViewPager裡面。　　

　　　　注意：這裡Activity中千萬不要設定圖片資源，不然會報OOM異常。多張圖片會導致記憶體溢出。

　　　　==>源碼如下：

　　　　①GuideActivity的Kotlin源碼　　

class GuideActivity : AppCompatActivity(), ViewPager.OnPageChangeListener {    private var vp: ViewPager? = null    private var imageIdArray: IntArray? = null//圖片資源的數組    private var viewList: MutableList<View>? = null//圖片資源的集合    private var vg: ViewGroup? = null//放置圓點    //執行個體化原點View    private var iv_point: ImageView? = null    private var ivPointArray: Array<ImageView?>? = null    //最後一頁的按鈕    private var ib_start: Button? = null    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        supportRequestWindowFeature(Window.FEATURE_NO_TITLE)        setContentView(R.layout.activity_guide)        MainApplication.getInstance().addActivity(this)        StatusBarUtils.setWindowStatusBarColor(this, R.color.headline)        ib_start = findViewById(R.id.guide_ib_start) as Button        ib_start!!.setOnClickListener {            val intent:Intent=Intent([email protected],NavigationMainActivity::class.java)            intent.putExtra("openAPP",true)            overridePendingTransition(R.anim.slide_right_in,R.anim.slide_left_out)            startActivity(intent)            finish()        }        //載入ViewPager        initViewPager()        //載入底部圓點        initPoint()    }    /**     * 載入底部圓點     */    private fun initPoint() {        //這裡執行個體化LinearLayout        vg = findViewById(R.id.guide_ll_point) as ViewGroup        //根據ViewPager的item數量執行個體化數組        ivPointArray = arrayOfNulls(viewList!!.size)        //迴圈建立底部圓點ImageView，將產生的ImageView儲存到數組中        val size = viewList!!.size        for (i in 0..size - 1) {            iv_point = ImageView(this)            iv_point!!.layoutParams = ViewGroup.LayoutParams(50, 50)            iv_point!!.setPadding(20, 0, 20, 150)//left,top,right,bottom            ivPointArray!![i] = iv_point!!            //第一個頁面需要設定為選中狀態，這裡採用兩張不同的圖片            if (i == 0) {                iv_point!!.setBackgroundResource(R.mipmap.icon_point_pre)            } else {                iv_point!!.setBackgroundResource(R.mipmap.icon_point)            }            //將數組中的ImageView加入到ViewGroup            vg!!.addView(ivPointArray!![i])        }    }    /**     * 載入圖片ViewPager     */    private fun initViewPager() {        vp = findViewById(R.id.guide_vp) as ViewPager        //執行個體化圖片資源        imageIdArray = intArrayOf(R.mipmap.intro_school, R.mipmap.intro_discovery_1, R.mipmap.intro_discovery_2        ,R.mipmap.intro_discovery_3,R.mipmap.intro_ask_1,R.mipmap.intro_ask_2,R.mipmap.intro_ask_3,R.mipmap.intro_mew_coin)        viewList = ArrayList()        //迴圈建立View並加入到集合中        val len = imageIdArray!!.size        for (i in 0..len - 1) {            //new ImageView並設定全屏和圖片資源            val imageView = ImageView(this)            viewList!!.add(imageView)        }        //View集合初始化好後，設定Adapter        vp!!.adapter = GuidePageAdapter(viewList)        vp!!.offscreenPageLimit=9        //設定滑動監聽        vp!!.setOnPageChangeListener(this)    }    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {    }    /**     * 滑動後的監聽     * @param position     */    override fun onPageSelected(position: Int) {        //迴圈設定當前頁的標記圖        val length = imageIdArray!!.size        for (i in 0..length - 1) {            ivPointArray!![position]!!.setBackgroundResource(R.mipmap.icon_point_pre)            if (position != i) {                ivPointArray!![i]!!.setBackgroundResource(R.mipmap.icon_point)            }        }        //判斷是否是最後一頁，若是則顯示按鈕        if (position == imageIdArray!!.size - 1) {            ib_start!!.visibility = View.VISIBLE        } else {            ib_start!!.visibility = View.GONE        }    }    override fun onPageScrollStateChanged(state: Int) {    }}

　　　②activity_guide布局代碼：　

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.guangdamiao.www.mew_android_debug.navigation.GuideActivity">    <android.support.v4.view.ViewPager        android:id="@+id/guide_vp"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager>    <LinearLayout        android:id="@+id/guide_ll_point"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:layout_alignParentBottom="true"        android:layout_marginBottom="150pt"        android:gravity="center_horizontal">    </LinearLayout>    <Button        android:layout_width="500pt"        android:layout_height="55pt"        android:id="@+id/guide_ib_start"        android:text="進入大學喵"        android:textSize="30pt"        android:layout_centerHorizontal="true"        android:layout_above="@+id/guide_ll_point"        android:background="@drawable/button_shape_apply"        android:visibility="gone"/></RelativeLayout>

　　

 

　　Step2

　　第二步就是寫這個GuidePageAdapter了。

　　  注意在instanticateItem(ViewGroup container,int position)中設定背景圖片，提高載入速度，解決OOM問題。

　　  源碼如下：

　　  

public class GuidePageAdapter extends PagerAdapter {    private List<View> viewList;    private int[] mResIds=new int[]{            R.mipmap.intro_school,            R.mipmap.intro_discovery_1,            R.mipmap.intro_discovery_2,            R.mipmap.intro_discovery_3,            R.mipmap.intro_ask_1,            R.mipmap.intro_ask_2,            R.mipmap.intro_ask_3,            R.mipmap.intro_mew_coin,    };    public GuidePageAdapter(List<View> viewList) {        this.viewList = viewList;    }    /**     * @return 返回頁面的個數     */    @Override    public int getCount() {        if (viewList != null){            return viewList.size();        }        return 0;    }    /**     * 判斷對象是否產生介面     * @param view     * @param object     * @return     */    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    /**     * 初始化position位置的介面     * @param container     * @param position     * @return     */    @Override    public Object instantiateItem(ViewGroup container, int position) {        //在此設定背景圖片，提高載入速度，解決OOM問題        View view=viewList.get(position);        int count=getCount();        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(                ViewGroup.LayoutParams.MATCH_PARENT,                ViewGroup.LayoutParams.MATCH_PARENT);        view.setBackgroundResource(mResIds[position%count]);        view.setLayoutParams(params);        container.addView(viewList.get(position));        return viewList.get(position);    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(viewList.get(position));    }}

 

　　

　　Step3

　　第三步就是在啟動頁中設定跳轉引導頁了。

　　引導頁一般是第一次安裝APP後才會出現，這裡可以寫一個sharePreferences檔案記錄是不是第一次安裝。

　　最後利用intent跳轉到引導頁就可以了。

 

Android如何添加多張引導頁