Android開發之引導頁的簡單實現

一、實現的思路

當歡迎頁面加載完成的時候（一般爲動畫），即歡迎頁面動畫加載完成的時候，從本地存儲中取出記錄是否是第一次進入，然後進入引導頁或者主頁，如果是第一次就進入引導頁，否則進入主頁。

引導頁佈局使用：viewPager實現，可根據需要添加“開始體驗”，“跳過”按鈕等，佈局中下位置可使用imgae設置其drawable的shape爲oval,作爲引導頁面的指示器點，根據頁面的多少實現動態添加，當然也可根據需求實現引導頁面的自由滾動。

二、以下是頁面佈局：

<?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:id="@+id/activity_guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.atguigu.beijingnews.activity.GuideActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:id="@+id/btn_start_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="80dp"
        android:background="@drawable/btn_start_main_bg_selector"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:text="開始體驗"
        android:textColor="@drawable/btn_start_main_textcolor_selector"
        android:textSize="20sp"
        android:visibility="gone" />


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp">

        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" />

        <ImageView
            android:id="@+id/iv_red_point"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:src="@drawable/red_point" />

    </RelativeLayout>
</RelativeLayout>

三、引導頁面指示點的shape:

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="oval">  
    <corners android:radius="5dp" />  
    <solid android:color="@android:color/holo_red_light" />  
  </shape>

四、歡迎頁面代碼：

        //當動畫播放結束的時候回調
        @Override
        public void onAnimationEnd(Animation animation) {

            //當動畫播放完成進入--主頁面或者引導頁面
            boolean startMain = CacheUtils.getBoolean(WelcomeActivity.this, GuideActivity.START_MAIN);
            if (startMain) {

                startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
            } else {
                startActivity(new Intent(WelcomeActivity.this, GuideActivity.class));
            }

            finish();
        }

五、引導頁代碼：

package com.atguigu.beijingnews.activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.atguigu.beijingnews.MainActivity;
import com.atguigu.beijingnews.R;
import com.atguigu.beijingnews.utils.CacheUtils;
import com.atguigu.beijingnews.utils.DensityUtil;
import com.atguigu.beijingnews.utils.LogUtil;

import java.util.ArrayList;

public class GuideActivity extends Activity {

    public static final String START_MAIN = "start_main";
    private ViewPager viewpager;
    private LinearLayout ll_point_group;
    private ImageView iv_red_point;
    private Button btn_start_main;

    private ArrayList<ImageView> imageViews;

    /**
     * 兩點間的間距
     */
    private int leftMarg;
    private int widthDpi;

    /**
     * 設置適配器--> 準備數據
     */
    private int ids[] = new int[]{
            R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);

        viewpager = (ViewPager) findViewById(R.id.viewpager);
        ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
        iv_red_point = (ImageView) findViewById(R.id.iv_red_point);
        btn_start_main = (Button) findViewById(R.id.btn_start_main);

        initData();
    }

    /**
     * 初始化引導頁的數據
     */
    private void initData() {

        widthDpi = DensityUtil.dip2px(this, 10);
        LogUtil.e(widthDpi + "-----------------");

        imageViews = new ArrayList<>();

        for (int i = 0; i < ids.length; i++) {

            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(ids[i]);

            //把圖片添加到集合中
            imageViews.add(imageView);

            //添加灰色的點
            ImageView point = new ImageView(this);
            point.setImageResource(R.drawable.point_gray);

            //設置點的大小
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(widthDpi, widthDpi);
            if (i != 0) {
                //設置間距
                params.leftMargin = widthDpi;
            }
            point.setLayoutParams(params);

            ll_point_group.addView(point);

        }

        //設置適配器
        viewpager.setAdapter(new MyPagerAdapter());

        /**
         * 求間距
         * 構造方法--> 測量(measure--onMeasure)--> layout-->onLayout-->draw-->onDraw
         */
        iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());

        //監聽viewPager頁面滑動的百分比
        viewpager.addOnPageChangeListener(new MyOnPageChangeListener());

        //設置點擊事件
        btn_start_main.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //記錄進入引導頁面
                CacheUtils.putBoolean(GuideActivity.this, START_MAIN, true);
                //跳轉到主頁面
                startActivity(new Intent(GuideActivity.this, MainActivity.class));

                finish();//關閉引導頁面
            }
        });
    }

    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        /**
         * @param position             當前滑動頁面的下標位置
         * @param positionOffset       滑動了頁面的百分比
         * @param positionOffsetPixels 滑動了頁面多少像數
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            //紅點移動的距離 = ViewPager頁面的百分比* 間距

//            float leftMargin = positionOffset * leftMarg;
            //座標 = 起始位置 + 紅點移動的距離；

            float leftMargin = (position + positionOffset) * leftMarg;
            RelativeLayout.LayoutParams paramgs = (RelativeLayout.LayoutParams) iv_red_point.getLayoutParams();
            //距離左邊的距離
            paramgs.leftMargin = (int) leftMargin;
            iv_red_point.setLayoutParams(paramgs);

            LogUtil.e("position==" + position + ",positionOffset==" + positionOffset + ",positionOffsetPixels==" + positionOffsetPixels);


        }

        @Override
        public void onPageSelected(int position) {
            if (position == imageViews.size() - 1) {//滑動到最後一個頁面顯示按鈕
                //讓按鈕顯示
                btn_start_main.setVisibility(View.VISIBLE);
            } else {
                //按鈕隱藏
                btn_start_main.setVisibility(View.GONE);
            }

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener {

        @Override
        public void onGlobalLayout() {

            iv_red_point.getViewTreeObserver().removeGlobalOnLayoutListener(this);

            //間距 = 第一個點距離左邊距離 - 第0個點距離左邊距離
            leftMarg = ll_point_group.getChildAt(1).getLeft() - ll_point_group.getChildAt(0).getLeft();

        }
    }

    class MyPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return imageViews.size();
        }

        /**
         * @param container viewPager容器
         * @param position  創建視圖對應的位置
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = imageViews.get(position);
            container.addView(imageView);
            return imageView;
        }

        /**
         * @param view
         * @param object
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

}

好了，今天的分享就到這裏，大家有什麼問題，歡迎與我交流。