Android实现渐变启动页和带有指示器的引导页

引导页是项目中很常见的东西了,在用户下载app首次打开后,会进入引导界面,通常都是三四张图片说明,简单介绍下app的功能和使用方法之类,最后一张有着“进入应用”的按钮,点击即可进入主页,之后打开app则不会再次进入启动页,话不多说,以下做个归纳。

效果图:

实现步骤:

1.首先我们做个有渐变动画的启动页面SplashActivity

在onCreate里设置核心方法setAlphaAnimation()

public void setAlphaAnimation(){

   //生成AlphaAnimation的对象

   AlphaAnimation animation= new AlphaAnimation(this);

   //设置动画的持续时间

   animation.setDuration(3000);

   //给要渐变的控件设置动画,比如说imageview,textview,linearLayout之类的

   ll.setAnimation(animation);

   //设置动画监听,结束时跳转到下一个页面(首次打开就是引导页面,反之就是主页)

   animation.setAnimationListener(new Animation.AnimationListener(){

      public void onAnimationStart(Animation animation){ }

      public void onAnimationEnd(Animation animation){ 

         jump2Activity();      

      }

      public void onAnimationRepeat(Animation animation){ }

   });

}

分析一下这个跳转方法jump2Activity(),我们这里使用SharedPeference来判断应用是否首次打开,设变量isFirst默认值为0,进入引导页跳转到主页时再把这个值设为1,这样,每次跳转时判断isFirst的值,如果仍是默认值0则为首次打开进入引导页,反之进入主页。

public void jump2Activity(){

  SharedPreferences sharedPreference= getSharedPreferences("data", MODE_PRIVATE);

  String isFirst= sharedPreferences.getString("isFirst", "0");

  Intent intent= new Intent();  

  if("0".equals(isFirst)){

    intent.setClass(this, GuideActivity.class);

  }else{

    intent.setClass(this. MainActivity.class);

  }

  startActivity(intent);

  finish();

}

2.接下来我们做引导页面

引导页面是由三个控件组成,Viewpager,圆点指示器的线性布局linearlayout, 最后一页的 “进入应用” 按钮。

<?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/guide_vp"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

 <LinearLayout
  android:id="@+id/guide_ll"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:layout_centerHorizontal="true"
  android:layout_marginBottom="100dp"
  android:orientation="horizontal" />

 <Button
  android:id="@+id/guide_btn"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_above="@id/guide_ll"
  android:layout_centerHorizontal="true"
  android:text="进入应用"
  android:layout_marginBottom="10dp"
  android:visibility="gone"/>

</RelativeLayout>

在GuideActivity中,首先初始化引导图片

/**
 * 初始化图片
 */
private void initImgs() {
 ViewPager.LayoutParams params= new ViewPager.LayoutParams();
 imageViews= new ArrayList<ImageView>();
 for (int i= 0; i< imgs.length; i++){
  ImageView imageView= new ImageView(this);
  imageView.setLayoutParams(params);
  imageView.setImageResource(imgs[i]);
  imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  imageViews.add(imageView);
 }
}

初始化底部圆点指示器,这里值得一提的是我们给各圆点设置相应的点击事件,当点击某个位置的圆点时,viewpager自动切换到相应位置的图片,不过实际应用中这里实用性不是很大,因为圆点太小,可触摸范围有限,点击事件不太好触发。

/**
 * 初始化底部圆点指示器
 */
private void initDots() {
 LinearLayout layout= findViewById(R.id.guide_ll);
 LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(20, 20);
 params.setMargins(10, 0, 10, 0);
 dotViews= new ImageView[imgs.length];
 for (int i= 0; i< imageViews.size(); i++){
  ImageView imageView= new ImageView(this);
  imageView.setLayoutParams(params);
  imageView.setImageResource(R.drawable.dotselector);
  if (i== 0){
   imageView.setSelected(true);
  }else{
   imageView.setSelected(false);
  }
  dotViews[i]= imageView;
  final int finalI = i;
  dotViews[i].setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    vp.setCurrentItem(finalI);
   }
  });
  layout.addView(imageView);
 }
}

设置viewpager的滑动事件

vp.addOnPageChangeListener(this);

生成三个方法,我们主要在onPageSelected()方法中做操作,当某个位置的圆点被选中时,显示选中后的图片,其余圆点显示未选中的图片,这里主要应用selector控制器,至于相应的选中未选中圆点图片需要大家去找。当滑动到最后一个页面时,将 "进入应用" 的按钮显示,反之隐藏。

@Override
public void onPageScrolled(int i, float v, int i1) {}

@Override
public void onPageScrollStateChanged(int i) {}

@Override
public void onPageSelected(int arg0) {
 for (int i= 0; i< dotViews.length; i++){
  if (arg0== i){
   dotViews[i].setSelected(true);
  }else {
   dotViews[i].setSelected(false);
  }

  if (arg0== dotViews.length- 1){
   btn.setVisibility(View.VISIBLE);
  }else {
   btn.setVisibility(View.GONE);
  }
 }
}

dotSelector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/focus_on" android:state_selected="true"/>
 <item android:drawable="@drawable/focus_nomal" android:state_selected="false"/>
</selector>

在最后一个页面点击 "进入应用" 按钮跳转到主页时,将缓存中的isFirst数据改为1,以后打开应用则不会再进入引导页面了。

@Override
public void onClick(View view) {
 switch (view.getId()){
  case R.id.guide_btn:
   setisFirst();
   Intent intent= new Intent(GuideActivity.this, MainActivity.class);
   startActivity(intent);
   finish();
   break;
 }
}
/**
 * 改变首次打开的状态
 */
private void setisFirst() {
 SharedPreferences.Editor editor= getSharedPreferences("data", MODE_PRIVATE).edit();
 editor.putString("isFirst", "1");
 editor.commit();
}

至此全部完成!demo附上

源码下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(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,细心的你,可能会发现最后一页

  • Android启动页出现白屏、黑屏的解决方案

    历史原因 当系统启动一个APP时,zygote进程会首先创建一个新的进程去运行这个APP,但是进程的创建是需要时间的,在创建完成之前,界面是呈现假死状态的,这就很尴尬了,因为用户会以为没有点到APP而再次点击,这极大的降低用户体验,Android需要及时做出反馈去避免这段迷之尴尬.于是系统根据你的manifest文件设置的主题颜色的不同来展示一个白屏或者黑屏.而这个黑(白)屏正式的称呼应该是Preview Window,即预览窗口. 好了,现在我们明白了,Preview Window其实是为了提

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

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

  • Android开发实现的ViewPager引导页功能(动态加载指示器)详解

    本文实例讲述了Android开发实现的ViewPager引导页功能(动态加载指示器).分享给大家供大家参考,具体如下: 先看效果图咯~ 现在几乎每个App都会有引导页,是不是感觉很炫很厉害,所以就想做出来一个学习一下~让自己的App看起来更加的美观~ 现在来分析一下: 这个引导页可以分为俩部分~ 1.小红点--来提醒这是第几页了~ 2."开始体验"这个Button--可以进入主界面,但是要控制这个Button只能在最后一页出现 布局的话使用相对布局~ 那现在来看看布局吧: activi

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

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

  • Android开发之开发者头条(一)启动页实现

    废话就不多说了,开始今天的正题,带你实现开发者头条APP的启动页. 一.老规矩,先上效果图 从效果图中我们可以看出,整个滑动的界面就是一个ViewPager实现,然后监听ViewPager的滑动事件,改变底部四个小图标的切换,以及跳转到首页的按钮的隐藏显示. 二.代码实现 1).整个布局文件.上面是ViewPager,下面是四个小图标存放的容器. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi

  • Android启动页解决方案(推荐)

    启动页几乎成为了每个app的标配,有些商家在启动页中增加了开屏广告以此带来更多的收入.目前启动页的广告都有倒计时的功能,那么我们在倒计时的过程中能做些什么呢? 这篇文章主要包括以下两方面内容 集成腾讯广告联盟的SDK 启动页加载过程中,后台初始化数据 我们在设计启动页时的常规做法是建立一个Activity来加载开屏图片或者广告,作为程序的入口,那么在这个三到五秒时间内如果进行数据下载,当用户点击了跳过按钮或者计时结束了数据还没初始化完成,已经进入了主页面,而主界面刚好需要那些基础数据该如何? 因

  • Android启动页面定时跳转的三种方法

    从我所做的项目来看,几乎都少不了开始页面,启动页面的作用能够打广告.发公告.做缓存处理.更新数据等等!Android实现开始页面的跳转,就是打开一个Android手机APP的欢迎界面后跳转到指定界面,下面就让我简单介绍下比较常用的开始页面的跳转方法吧. 一.在onCreate里设置个Timer,然后建立Intent指向你要调用的Activity.设置Timer 任意秒后执行startActivity即可!(Timer是一种定时器工具,用来在一个后台线程计划执行指定任务,它可以计划执行一个任务一次

  • Android启动页广告(腾讯广告联盟)解决方法及源码下载

    Android启动页广告(腾讯广告联盟) 启动页几乎成为了每个app的标配,有些商家在启动页中增加了开屏广告以此带来更多的收入.目前启动页的广告都有倒计时的功能,那么我们在倒计时的过程中能做些什么呢? 这篇文章主要包括以下两方面内容 集成腾讯广告联盟的SDK 启动页加载过程中,后台初始化数据 我们在设计启动页时的常规做法是建立一个Activity来加载开屏图片或者广告,作为程序的入口,那么在这个三到五秒时间内如果进行数据下载,当用户点击了跳过按钮或者计时结束了数据还没初始化完成,已经进入了主页面

  • Android优化之启动页去黑屏实现秒启动

    前言 还记得之前我们写了一篇文章,基于RxJava实现酷炫启动页,然而当我们点击桌面图标启动APP时,有时会闪一下黑色背景,有时黑色背景时间还比较长,哎呀,难看死了,这个怎么办捏,别方,我们今天就来看看启动页的优化. 一.消除启动时的黑屏 点击桌面launcher图标启动APP,闪现的黑色背景其实是出现在我们看到界面第一帧之前.那我们就要想办法让这个黑色的背景变成用户喜欢看到的画面或者让它透明化.有了思路方法也就粗现了,我们有下面两种方案: 自定义WelcomActivity的Theme 说白了

  • Android项目实战教程之高仿网易云音乐启动页实例代码

    前言 本文主要给大家介绍了关于Android高仿网易云音乐启动页的相关内容,这一节我们来讲解启动界面,效果如下: 首次创建一个SplashActivity用来做启动界面,因为创建完项目默认是MainActivity做主界面,所以需要去掉,将启动配置到同时去掉SplashActivity,并且去掉SplashActivity的标题栏,同时还要设置为全屏. Activity启动配置 在清单文件将启动配置剪贴到SplashActivity: <activity android:name=".ac

随机推荐