RxJava两步打造华丽的Android引导页

前言

之前的一篇文章:基于RxJava实现酷炫启动页 中,我们尝试了用RxJava实现酷炫的启动页,今天我们在此基础上加入首次使用APP时的引导页功能。

效果如下图:

思路:思路其实很简单,就是在WelcomeActivity setContentView()之前判断是否是首次打开APP,若是,则去启动引导页(WelcomeGuideActivity)并return;若不是,则直接setContentView(),然后启动动画再启动MainActivity

一、WelcomeActivity中判断是否是第一次启动

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 判断是否是第一次开启应用
    boolean isFirstOpen = SharedPreferencesUtil.getBoolean(this, SharedPreferencesUtil.FIRST_OPEN, true);
    // 如果是第一次启动,则先进入功能引导页
    if (isFirstOpen) {
      Intent intent = new Intent(this, WelcomeGuideActivity.class);
      startActivity(intent);
      finish();
      return;
    }

    // 如果不是第一次启动app,则正常显示启动屏
    setContentView(R.layout.activity_welcome);
    ButterKnife.bind(this);
    startMainActivity();
  }

我们判断是否是第一次打开APP是用了SharedPreferences,我们这里对他进行了一下简单封装,代码如下:

/**
 * Created by xialo on 2016/7/25.
 */
public class SharedPreferencesUtil {

  private static final String spFileName = "welcomePage";
  public static final String FIRST_OPEN = "first_open";

  public static Boolean getBoolean(Context context, String strKey,
                   Boolean strDefault) {//strDefault  boolean: Value to return if this preference does not exist.
    SharedPreferences setPreferences = context.getSharedPreferences(
        spFileName, Context.MODE_PRIVATE);
    Boolean result = setPreferences.getBoolean(strKey, strDefault);
    return result;
  }

  public static void putBoolean(Context context, String strKey,
                 Boolean strData) {
    SharedPreferences activityPreferences = context.getSharedPreferences(
        spFileName, Context.MODE_PRIVATE);
    SharedPreferences.Editor editor = activityPreferences.edit();
    editor.putBoolean(strKey, strData);
    editor.commit();
  }

}

二、WelcomeGuideActivity中,我们使用ViewPager以加载多个引导页面使其可以左右滑动

不多说,请看WelcomeGuideActivity.java代码:

/**
 * Created by xialo on 2016/7/25.
 */
public class WelcomeGuideActivity extends Activity implements View.OnClickListener {
  private ViewPager vp;
  private GuideViewPagerAdapter adapter;
  private List<View> views;
  private Button startBtn;

  // 引导页图片资源
  private static final int[] pics = { R.layout.guide_view1,
      R.layout.guide_view2, R.layout.guide_view3};

  // 底部小点图片
  private ImageView[] dots;

  // 记录当前选中位置
  private int currentIndex;

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

    views = new ArrayList<View>();

    // 初始化引导页视图列表
    for (int i = 0; i < pics.length; i++) {
      View view = LayoutInflater.from(this).inflate(pics[i], null);

      if (i == pics.length - 1) {
        startBtn = (Button) view.findViewById(R.id.btn_enter);
        startBtn.setTag("enter");
        startBtn.setOnClickListener(this);
      }

      views.add(view);

    }

    vp = (ViewPager) findViewById(R.id.vp_guide);
    adapter = new GuideViewPagerAdapter(views);
    vp.setAdapter(adapter);
    vp.addOnPageChangeListener(new PageChangeListener());

    initDots();

  }

  @Override
  protected void onResume() {
    super.onResume();
  }

  @Override
  protected void onPause() {
    super.onPause();
    // 如果切换到后台,就设置下次不进入功能引导页
    SharedPreferencesUtil.putBoolean(WelcomeGuideActivity.this, SharedPreferencesUtil.FIRST_OPEN, false);
    finish();
  }

  @Override
  protected void onStop() {
    super.onStop();
  }

  @Override
  protected void onDestroy() {
    super.onDestroy();
  }

  private void initDots() {
    LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
    dots = new ImageView[pics.length];

    // 循环取得小点图片
    for (int i = 0; i < pics.length; i++) {
      // 得到一个LinearLayout下面的每一个子元素
      dots[i] = (ImageView) ll.getChildAt(i);
      dots[i].setEnabled(false);// 都设为灰色
      dots[i].setOnClickListener(this);
      dots[i].setTag(i);// 设置位置tag,方便取出与当前位置对应
    }

    currentIndex = 0;
    dots[currentIndex].setEnabled(true); // 设置为白色,即选中状态

  }

  /**
   * 设置当前view
   *
   * @param position
   */
  private void setCurView(int position) {
    if (position < 0 || position >= pics.length) {
      return;
    }
    vp.setCurrentItem(position);
  }

  /**
   * 设置当前指示点
   *
   * @param position
   */
  private void setCurDot(int position) {
    if (position < 0 || position > pics.length || currentIndex == position) {
      return;
    }
    dots[position].setEnabled(true);
    dots[currentIndex].setEnabled(false);
    currentIndex = position;
  }

  @Override
  public void onClick(View v) {
    if (v.getTag().equals("enter")) {
      enterMainActivity();
      return;
    }

    int position = (Integer) v.getTag();
    setCurView(position);
    setCurDot(position);
  }

  private void enterMainActivity() {
    Intent intent = new Intent(WelcomeGuideActivity.this,
        WelcomeActivity.class);
    startActivity(intent);
    SharedPreferencesUtil.putBoolean(WelcomeGuideActivity.this, SharedPreferencesUtil.FIRST_OPEN, false);
    finish();
  }

  private class PageChangeListener implements ViewPager.OnPageChangeListener {
    @Override
    public void onPageScrollStateChanged(int position) {

    }

    @Override
    public void onPageScrolled(int position, float arg1, int arg2) {

    }

    @Override
    public void onPageSelected(int position) {
      // 设置底部小点选中状态
      setCurDot(position);
    }

  }
}

我们用了三个页面guide_view1、guide_view2、guide_view3作为引导页面,布局类似,只是guide_view3多了个点击进入的Button

以下是guide_view3.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@mipmap/guide_img3" />
  <Button
    android:id="@+id/btn_enter"
    android:layout_width="100dp"
    android:layout_height="26dp"
    android:layout_gravity="bottom|center_horizontal"
    android:layout_marginBottom="75dp"
    android:background="@drawable/button_shape"
    android:text="@string/entry"
    android:textColor="@color/white"
    android:textSize="18sp"
    android:visibility="visible" />

</FrameLayout>

WelcomeGuideActivity中值得注意的是该Button点击事件的处理,在点击Button后我们并没有直接进入MainActivity,而是先把SharedPreferences中标记是否第一次进入的布尔值设为false,而后再次进入WelcomeActivity,此时WelcomeActivity会直接setContentView()然后启动动画,进入MainActivity

以上,我们华丽丽的引导页就完成了。希望本文中能对你的引导页提供帮助,和在大家学习Android开发中有所参考,谢谢大家对我们的支持。

(0)

相关推荐

  • Android启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果. 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0" enco

  • Android控件ViewPager实现带有动画的引导页

    ViewPager实现带有动画的引导页,供大家参考,具体内容如下 好了,又到我们学习基础控件的时候了,其实引导页很简单,就是五张图片而已 一.ViewPager实现传统的引导页 传统的ViewPager实现引导页和ListView是一样道理的,只是把ListView的Item换成图片,把BaseAdapter换成PagerAdapter,我们先来看下传统引导页的效果图 步骤一:编写xml文件 既然用到的是ViewPager,那么xml文件就必须要有ViewPager,细心的你,可能会发现最后一页

  • ViewPager打造轮播图Banner/引导页Guide

    前言 去年7月时,在Github发布了一个开源的Banner库,虽然Star不多,但还是有少部分人使用. Banner效果: Github链接地址:https://github.com/Allure0/LMBanners 昨天,有使用此库的同学提出需求,想在引导页的时候用这个库并且最后一页有进入按钮如何实现,为满足他的需求,也方便更多开发者是快速实现.进行了简单的扩展支持Guide模式的使用. Guide效果图: OK,效果如图所以,咱们此库满足了既可在Banner上使用也可以快速在第一次安装应

  • ViewPager实现漂亮的引导页

    废话就不多说了,直接上效果图和代码 fry.Activity01 package fry; import java.util.ArrayList; import java.util.Collection; import java.util.Iterator; import java.util.List; import java.util.ListIterator; import com.example.viewPager.R; import android.app.Activity; impor

  • Android引导页面的简单实现

    第一次进入应用的时候,都会有一个引导页面,引导页面的实现起来也很简单,实现的方式也有很多,下面是自己写的一个引导页面的效果,大致的实现思路为: 最外层是一个FragmentActivity,里面包含4个fragment,在fragment中给ViewPager开一个循环,这样实现了图片播,其实效果就是在FragmentActivity中几个fragment滑动切换, fragment中ViewPager无限轮播和滑动切换: 下面为代码实现: public class MainActivity e

  • Android开发实战之漂亮的ViewPager引导页

    目前很多软件安装时都会出现引导页面,用户体验很好. 下面就来DIY下: 因为视频上传很麻烦,所以截图了. 首先看看效果图: 点击小点可自由切换,滑动也可以自由切换,最后一个导航页添加了点击跳转. 开始实现引导页: 一.采集需要的图片放入drawable文件里 二.初始化每个导航页的视图 import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.suppo

  • Android实现绕球心旋转的引导页效果

    现在很多APP都会出现Android实现绕球心旋转的引导页效果,一个类似小车一直在往前开的旋转式动画效果. 先看一下预览效果: 嗯,整体效果还算理想,基本实现了页面绕屏幕底部中心旋转. 这里我们用到了Android系统的一个组件ViewFlipper,该控件的主要作用是为其中的View切换提供动画效果,主要的方法如下: setInAnimation:设置View进入屏幕时的动画. setOutAnimation:设置View退出屏幕时的动画. showNext:调用该方法可以显示下一个View.

  • RxJava两步打造华丽的Android引导页

    前言 之前的一篇文章:基于RxJava实现酷炫启动页 中,我们尝试了用RxJava实现酷炫的启动页,今天我们在此基础上加入首次使用APP时的引导页功能. 效果如下图: 思路:思路其实很简单,就是在WelcomeActivity 中setContentView()之前判断是否是首次打开APP,若是,则去启动引导页(WelcomeGuideActivity)并return:若不是,则直接setContentView(),然后启动动画再启动MainActivity. 一.WelcomeActivity

  • Android自定义控件打造绚丽平行空间引导页

    本文实例为大家分享了Android自定义控件打造平行空间引导页的具体代码,供大家参考,具体内容如下 先上图,动图太大传不上来,在项目中有动图 点击查看动图 首先解释下工程的主要部分. 首先谷歌的百分比布局做了部分修改,因为我设置的宽高都是相对于屏幕的宽度,而谷歌的百分比布局不能实现,只需要修改一部分代码就可以实现.下面贴出修改的部分代码 public static class PercentLayoutInfo { private enum BASEMODE { BASE_WIDTH, BASE

  • Android实现过渡动画、引导页 Android判断是否第一次启动App

    目前的App在安装后,第一次打开,都会显示两秒左右的logo,然后进入引导页.如果关闭App,再重新打开,则只会显示logo,然后直接进入主页. 最近写了这个,记录一下. 首先是过渡动画,因为它不论App是否第一次启动都会显示. 这里我使用了Handler的postDelayed()方法.把过渡动画的Activity设为默认启动的Activity.在当前Activity中,执行postDelayed()方法,把延时的时长设为两秒即可. 过渡页面如下:transition_view.xml <?x

  • android引导用户开启自启动权限的方法

    前言: 最近在做项目的过程中遇到了以下一个需求,虽然看起来不难实现,但是在实现的过程中遇到了各种坑,记录一下,今后方便查看!!! 需求: 用户第一次安装APP,点击授权按钮,跳转至授权的页面(不同手机跳转到不同的授权页面),用户授权成功之后,点击返回按钮,直接进入主页面 问题: 1.如何适配不同机型 2.不同机型的授权页面显示不同弹窗(比如三星显示悬浮窗,小米显示弹窗) 3.小米弹窗始终无法显示 4.在授权页面点击返回按钮,怎么直接跳转到主页面 问题1:适配不同机型 这个是借鉴的一篇博文(忘记地

  • Android简单实现引导页

    本文实例为大家分享了Android简单实现引导页的具体代码,供大家参考,具体内容如下 一.思路 我们选择ViewPager + View + ImageView 来实现引导页效果,ViewPager用来实现滑动,View则是用来显示每页的图像,而ImageView则是用来实现下面的小红点. 二.XML代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&qu

  • Android使用ViewPager实现启动引导页

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果./p> 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0"

随机推荐

其他