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附上

源码下载

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

时间: 2019-09-16

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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实现

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

Android使用ViewPager实现启动引导页效果

本文实例为大家分享了Android实现启动引导页效果的具体代码,供大家参考,具体内容如下 ViewPagerTwoActivity.java package cn.edu.zufe.app001; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.PagerAdapter; import androidx.vie

Android新特性页面之ViewPager拖拽到最后一页再拖拽打开其他Activity(三种方法)

android新特性页面,ViewPager拖拽到最后一页再拖拽打开其他Activity.实现的方式有很多,效果比较好的就是到了最后一页再拖拽出现禁止蓝色条时再跳转activity 方式一:拿到ViewPager的边界条EdgeEffectCompat,判断是否到了边界(获取EdgeEffectCompat通过反射,方法来自网络最后边会给出原文) /** * 初始化view */ private void initView(){ pager = (ViewPager) findViewById(

Android使用ViewPager实现启动引导页

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

Android自定义引导玩转ViewPager的方法详解

ViewPager简介: ViewPager(android.support.v4.view.ViewPager)是android扩展包v4包中的类,这个类可以让用户左右切换当前的view,实现滑动切换的效果. 注意: ViewPager类直接继承了ViewGroup类,也就是说它和我们经常打交道的LinearLayout一样,都是一个容器,需要在里面添加我们想要显示的内容. ViewPager类需要一个PagerAdapter适配器类给它提供数据,这个和ListView类似. ViewPage

iOS实现启动引导页与指纹解锁的方法详解

前言 应用程序启动时有些会有引导页,目的是用户第一次登录时对应用程序的一些简单了解介绍,一般就是几张轮播图片,当引用程序第一次进入时会跳到引导页,以后不再显示,这时就需要将不是第一次登录的标致flag保存到内存中,推荐用户偏好设置NSUserDefaults,第一直接去取值取这个flag取不到(因为是第一次登录)就跳引导页,然后在引导页进入登录页或者首页时将flag值保存到偏好设置中,以后再进来就可以取到不是第一登录的flag就直接跳过引导页.方式有两种:一种是直接切换UIWindow的根控制器

Android实现引导页的圆点指示器

在App引导界面通常有引导界面提示小圆点,我们使用一个集成的类 来整体封装实现: 使用的方法: 首先在 XML布局中引入这个自定义的控件: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent&quo

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

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