Android ViewPager向導頁面制作方法

接著上一篇博客，上一篇博客跟大家分享了三種開始頁面的定時跳轉，根據項目需求接下來就說一下向導頁面吧！幾乎每一個APP都有自己的向導頁面，一般都是第一次安裝的時或者第一次進入應用時才有向導頁面的，就是只出現一次向導頁面，向導頁面顧名思義是指引客戶大概了解APP的功能，向客戶介紹APP的主要內容和使用方式，給客戶一種期待已久的感覺，向導頁面的實現方法有很多，現在我就以我之前做的項目為例給大家介紹用ViewPager去實現向導頁面吧！

現在就給你們先看看效果圖，是很酷吧！

一、判斷開始頁面是否跳轉到向導頁面（如果是第一次進入APP，則開始頁面跳轉到想到頁面；如果不是第一次進入APP了，則開始頁面跳轉到主頁面。這就是向導頁面只出現一次的邏輯構思）

// 判斷是否進入向導界面還是主界面 
        if (SpTools.getBoolean(getApplicationContext(), MyConstants.ISSETUP, false)){ 
          //true，設置過，直接進入主界面 
          // 
          Intent main = new Intent(SplashActivity.this,MainActivity.class); 
          startActivity(main);//主界面 
        } else { 
          //false，沒設置過，進入設置向導界面 
 
          Intent intent = new Intent(SplashActivity.this,GuideActivity.class); 
          startActivity(intent);//向導界面 
        } 

二、向導頁面GuideActivity.class的實現，用ViewPager來實現。 （默認第一次進入APP的，不然開始頁面就不會跳轉到向導頁面了）如果有對ViewPager不熟悉的，也可以查一下Android API幫助文檔，地址：http://android-doc.com/reference/android/support/v4/view/ViewPager.html

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.support.v4.view.ViewPager.OnPageChangeListener; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.view.ViewGroup; 
import android.view.ViewTreeObserver.OnGlobalLayoutListener; 
import android.view.Window; 
import android.view.WindowManager; 
import android.widget.Button; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.LinearLayout.LayoutParams; 
import android.widget.RelativeLayout; 
 
import com.zsml.fashiongou.sputils.DensityUtil; 
import com.zsml.fashiongou.sputils.MyConstants; 
import com.zsml.fashiongou.sputils.SpTools; 
 
import java.util.ArrayList; 
import java.util.List; 
 
 
public class GuideActivity extends Activity 
{ 
  private ViewPager vp_guids; 
  private LinearLayout ll_points; 
  private View v_redpoint; 
  private Button bt_startExp; 
  private List<ImageView>  guids; 
  private MyAdapter adapter; 
  private int disPoints;// 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉標題 
 
    // Full Screen 
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
    WindowManager.LayoutParams.FLAG_FULLSCREEN); 
 
    initView();// 初始化界面 
 
    initData();//初始化數據 
 
    initEvent();//初始化組件事件 
  } 
 
  private void initEvent() { 
    // 
    v_redpoint.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() { 
 
 
 
      @Override 
      public void onGlobalLayout() { 
        // 
        v_redpoint.getViewTreeObserver().removeGlobalOnLayoutListener(this); 
        // 
        disPoints = (ll_points.getChildAt(1).getLeft() - ll_points.getChildAt(0) 
            .getLeft()); 
      } 
    }); 
 
    //給開始體驗按鈕添加點擊事件 
    bt_startExp.setOnClickListener(new OnClickListener() { 
 
      @Override 
      public void onClick(View v) { 
        //保存設置的狀態 
        SpTools.setBoolean(getApplicationContext(), MyConstants.ISSETUP, true);//保存設置完成的狀態 
        //進入主界面 
        Intent main = new Intent(GuideActivity.this,MainActivity.class); 
        startActivity(main);//啟動主界面 
        //關閉自己 
        finish(); 
      } 
    }); 
 
    // 
    vp_guids.setOnPageChangeListener(new OnPageChangeListener() { 
 
 
      @Override 
      public void onPageSelected(int position) { 
        //當前viewpager顯示的頁碼 
        //如果viewpager滑動到第三頁碼（最後一頁），顯示button 
        if (position == guids.size() - 1) { 
          bt_startExp.setVisibility(View.VISIBLE);//設置按鈕的顯示 
        } else { 
          //隱藏該按鈕 
          bt_startExp.setVisibility(View.GONE); 
        } 
      } 
 
 
      @Override 
      public void onPageScrolled(int position, float positionOffset, 
                    int positionOffsetPixels) { 
 
        // 
        // 
        float leftMargin = disPoints * (position + positionOffset); 
 
        // 
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) v_redpoint.getLayoutParams(); 
        layoutParams.leftMargin = Math.round(leftMargin);// 
 
        // 
        v_redpoint.setLayoutParams(layoutParams); 
      } 
 
      @Override 
      public void onPageScrollStateChanged(int state) { 
 
      } 
    }); 
  } 
 
  private void initData() { 
    // viewpaper adapter適配器  list容器 
    // 圖片的數據（數組） 
    int[] pics = new int[] { R.mipmap.img_guide_1, R.mipmap.img_guide_2, 
        R.mipmap.img_guide_3}; 
 
    //定義viewpager使用的容器 
    guids = new ArrayList<ImageView>(); 
 
    //創建viewpager的適配器 
    for (int i = 0; i < pics.length; i++) { 
      ImageView iv_temp = new ImageView(getApplicationContext()); 
      iv_temp.setBackgroundResource(pics[i]); 
 
      //添加界面的數據 
      guids.add(iv_temp); 
 
      // 
      View v_point = new View(getApplicationContext()); 
//      v_point.setBackgroundResource(R.drawable.gray_point);//紅點背景色 
      int dip = 10; 
      // 
      LayoutParams params = new LayoutParams(DensityUtil.dip2px(getApplicationContext(), dip), DensityUtil.dip2px(getApplicationContext(), dip));// dp 
 
      // 
      // 
      if (i != 0)// 
        params.leftMargin = 47;// 
      v_point.setLayoutParams(params);// 
 
      // 
      ll_points.addView(v_point); 
    } 
 
    // 
 
 
    // 創建viewpager的適配器 
    adapter = new MyAdapter(); 
 
    // 設置適配器 
    vp_guids.setAdapter(adapter); 
 
  } 
 
  //viewpager的適配器 
  private class MyAdapter extends PagerAdapter 
  { 
 
    @Override 
    public int getCount() { 
 
      return guids.size();// 返回數據的個數 
    } 
 
    @Override 
    public boolean isViewFromObject(View arg0, Object arg1) { 
      return arg0 == arg1;// 過濾和緩存的作用 
    } 
 
    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
 
      container.removeView((View) object);//從viewpager中移除掉 
    } 
 
    @Override 
    public Object instantiateItem(ViewGroup container, int position) { 
      // container viewpaper 
      //獲取View 
      View child = guids.get(position); 
      // 添加View 
      container.addView(child); 
 
      return child; 
    } 
 
  } 
 
  private void initView() { 
    setContentView(R.layout.activity_guide); 
 
    // ViewPage組件 
    vp_guids = (ViewPager) findViewById(R.id.vp_guide_pages); 
 
    // 動態加點容器 
    ll_points = (LinearLayout) findViewById(R.id.ll_guide_points); 
 
    // 點 
    v_redpoint = findViewById(R.id.v_guide_redpoint); 
 
    //確定開始體驗按鈕 
    bt_startExp = (Button) findViewById(R.id.bt_guide_startexp); 
  } 
} 

注、關於是否是第一次進入，實現方式比較簡單，用過使用SharedPreferences保存使用狀態，將他封裝到工具類中便於使用！這裡我就直接貼出SharedPreferences封裝好的3個工具類了

（一）、

import android.content.Context; 
 
/** 
 * Created by Administrator on 2016/11/1 0001. 
 */ 
 
public class DensityUtil { 
 
  public static int dip2px(Context context, float dpValue) { 
    final float scale = context.getResources().getDisplayMetrics().density; 
    return (int) (dpValue * scale + 0.5f); 
  } 
 
  /** 
   * 
   */ 
  public static int px2dip(Context context, float pxValue) { 
    final float scale = context.getResources().getDisplayMetrics().density; 
    return (int) (pxValue / scale + 0.5f); 
  } 
} 

（二）、

/** 
 * Created by Administrator on 2016/11/1 0001. 
 */ 
 
public interface MyConstants 
{ 
  String CONFIGFILE = "cachevalue";//sp的文件名 
  String ISSETUP = "issetup";//是否設置向導界面設置過數據 
} 

（三）、

import android.content.Context; 
import android.content.SharedPreferences; 
 
/** 
 * Created by Administrator on 2016/11/1 0001. 
 */ 
 
public class SpTools { 
 
  public static void setBoolean(Context context, String key, boolean value){ 
    SharedPreferences sp = context.getSharedPreferences(MyConstants.CONFIGFILE, Context.MODE_PRIVATE); 
    sp.edit().putBoolean(key, value).commit();//提交保存鍵值對 
 
  } 
 
 
  public static boolean getBoolean(Context context,String key,boolean defValue){ 
    SharedPreferences sp = context.getSharedPreferences(MyConstants.CONFIGFILE, Context.MODE_PRIVATE); 
    return sp.getBoolean(key, defValue); 
  } 
} 

三、XML的布局實現

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <android.support.v4.view.ViewPager 
    android:id="@+id/vp_guide_pages" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 
  </android.support.v4.view.ViewPager> 
 
  <RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:layout_centerHorizontal="true" 
    android:layout_marginBottom="30dip" > 
 
    <LinearLayout 
      android:id="@+id/ll_guide_points" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal" > 
    </LinearLayout> 
 
    <View 
      android:id="@+id/v_guide_redpoint" 
      android:layout_width="10dip" 
      android:layout_height="10dip" 
      android:layout_marginBottom="0.7dp" 
      android:background="@drawable/red_point" /> 
  </RelativeLayout> 
 
  <Button 
    android:id="@+id/bt_guide_startexp" 
    android:background="@drawable/btn_selector" 
    android:layout_alignParentBottom="true" 
    android:layout_centerHorizontal="true" 
    android:layout_marginBottom="45dip" 
    android:paddingTop="5dip" 
    android:paddingBottom="5dip" 
    android:paddingLeft="10dip" 
    android:paddingRight="10dip" 
    android:textColor="@color/btn_colors" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="開始體驗" 
    android:visibility="gone" 
    android:textSize="18sp" /> 
 
</RelativeLayout> 

注、關於圓點、Button按鈕的狀態、等UI效果的設置

（一）、自己畫圓點，定義顏色
外面的大圓big_point.xml：

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

裡面的圓點small_point.xml

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

 （二）、Button的顏色、以及狀態選擇
背景狀態選擇器btn_selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
 
  <!-- 按鈕按下的狀態 --> 
  <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"></item> 
  <!-- 按鈕松開的狀態 --> 
  <item android:drawable="@drawable/button_red_normal" android:state_pressed="false"></item> 
 
</selector> 

文本顏色選擇器btn_colors.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
   <!-- 按鈕按下的狀態 黑色 --> 
  <item android:color="#000000" android:state_pressed="true"></item> 
  <!-- 按鈕松開的狀態 白色 --> 
  <item android:color="#ffffff" ></item> 
   
</selector> 

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持本站。