Android ViewPager嚮導頁面製作方法_Android

接著上一篇部落格，上一篇部落格跟大家分享了三種開始頁面的定時跳轉，根據項目需求接下來就說一下嚮導頁面吧！幾乎每一個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> 

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。