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  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(); 
 
    //创建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; 
 
 
 
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); 
  } 
}

（二）、

 
 
public interface MyConstants 
{ 
  String ConFIGFILE = "cachevalue";//sp的文件名 
  String ISSETUP = "issetup";//是否设置向导界面设置过数据 
}

（三）、

import android.content.Context; 
import android.content.SharedPreferences; 
 
 
 
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的布局实现

注、关于圆点、Button按钮的状态、等UI效果的设置

（一）、自己画圆点，定义颜色
外面的大圆big_point.xml：

里面的圆点small_point.xml

（二）、Button的颜色、以及状态选择
背景状态选择器btn_selector.xml

文本颜色选择器btn_colors.xml

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。

Android ViewPager向导页面制作方法

Android相关栏目本月热门文章