Android启动引导页使用ViewPager实现

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

先上图:

下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.
 先上XML.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.example.nanchen.guidepagedemo.GuideActivity">

 <android.support.v4.view.ViewPager
 android:id="@+id/guide_vp"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 </android.support.v4.view.ViewPager>
 <LinearLayout
 android:id="@+id/guide_ll_point"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal"
 android:layout_alignParentBottom="true"
 android:layout_marginBottom="40dp"
 android:gravity="center_horizontal">
 </LinearLayout>
 <ImageButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/guide_ib_start"
 android:src="@mipmap/btn_start"
 android:layout_centerHorizontal="true"
 android:layout_above="@+id/guide_ll_point"
 android:background="@null"
 android:visibility="gone"/>
</RelativeLayout>

在准备一个Adapter,这个没什么好说的。

package com.example.nanchen.guidepagedemo;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;

/**

 * Created by 南尘 on 2016/7/10.

 */
public class GuidePageAdapter extends PagerAdapter {
 private List<View> viewList;
 public GuidePageAdapter(List<View> viewList) {
 this.viewList = viewList;

 }
 /**

 * @return 返回页面的个数

 */

 @Override
 public int getCount() {
 if (viewList != null){
  return viewList.size();
 }
 return 0;
 }

 /**
 * 判断对象是否生成界面
 * @param view
 * @param object
 * @return
 */
 @Override
 public boolean isViewFromObject(View view, Object object) {
 return view == object;

 } 

 /**
 * 初始化position位置的界面
 * @param container
 * @param position
 * @return
 */
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
 container.addView(viewList.get(position));
 return viewList.get(position);

 }
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
 container.removeView(viewList.get(position));

 }
}

最后就是我们的Activity了

package com.example.nanchen.guidepagedemo;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
/**

 * 实现首次启动的引导页面

 */
public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

 private ViewPager vp;
 private int []imageIdArray;//图片资源的数组
 private List<View> viewList;//图片资源的集合
 private ViewGroup vg;//放置圆点
//实例化原点View
 private ImageView iv_point;
 private ImageView []ivPointArray;
 //最后一页的按钮
 private ImageButton ib_start;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
 setContentView(R.layout.activity_guide);
 ib_start = (ImageButton) findViewById(R.id.guide_ib_start);
 ib_start.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  startActivity(new Intent(GuideActivity.this,MainActivity.class));
  finish();
  }

 });
 //加载ViewPager
 initViewPager(); 

 //加载底部圆点
 initPoint();
 }

 /**
 * 加载底部圆点
 */

 private void initPoint() {

 //这里实例化LinearLayout

 vg = (ViewGroup) findViewById(R.id.guide_ll_point);

 //根据ViewPager的item数量实例化数组

 ivPointArray = new ImageView[viewList.size()];

 //循环新建底部圆点ImageView,将生成的ImageView保存到数组中

 int size = viewList.size();
 for (int i = 0;i<size;i++){
  iv_point = new ImageView(this);
  iv_point.setLayoutParams(new ViewGroup.LayoutParams(20,20));
  iv_point.setPadding(30,0,30,0);//left,top,right,bottom
  ivPointArray[i] = iv_point;
  //第一个页面需要设置为选中状态,这里采用两张不同的图片

  if (i == 0){

  iv_point.setBackgroundResource(R.mipmap.full_holo);

  }else{
  iv_point.setBackgroundResource(R.mipmap.empty_holo);
  }
  //将数组中的ImageView加入到ViewGroup
  vg.addView(ivPointArray[i]);

 }
 }
 /**
 * 加载图片ViewPager
 */
private void initViewPager() {
 vp = (ViewPager) findViewById(R.id.guide_vp);
 //实例化图片资源
 imageIdArray = new int[]{R.mipmap.guide1,R.mipmap.guide2,R.mipmap.guide3};
 viewList = new ArrayList<>();
 //获取一个Layout参数,设置为全屏
 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
  LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);
 //循环创建View并加入到集合中
 int len = imageIdArray.length;
 for (int i = 0;i<len;i++){
  //new ImageView并设置全屏和图片资源
  ImageView imageView = new ImageView(this);
  imageView.setLayoutParams(params);
  imageView.setBackgroundResource(imageIdArray[i]);
  //将ImageView加入到集合中
  viewList.add(imageView);
 }
 //View集合初始化好后,设置Adapter
 vp.setAdapter(new GuidePageAdapter(viewList));
 //设置滑动监听
 vp.setOnPageChangeListener(this);
 }
 @Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 }

 /**
 * 滑动后的监听
 * @param position
 */
 @Override
 public void onPageSelected(int position) {
 //循环设置当前页的标记图
 int length = imageIdArray.length;
 for (int i = 0;i<length;i++){
  ivPointArray[position].setBackgroundResource(R.mipmap.full_holo);
  if (position != i){
  ivPointArray[i].setBackgroundResource(R.mipmap.empty_holo);
  }
 }
 //判断是否是最后一页,若是则显示按钮
 if (position == imageIdArray.length - 1){
  ib_start.setVisibility(View.VISIBLE);
 }else {
  ib_start.setVisibility(View.GONE);
 }
 }
 @Override
 public void onPageScrollStateChanged(int state) {

 }
}

总的来说实现流程比较简单。
 1)先加载ViewPager,新建ImageView并添加到View集合中,然后设置Adapter并显示。
 2)然后加载LinearLayout,放置原点图片,同样新建ImageView设置背景后放在圆点图集合中。
 3)最后设置ViewPager的滑动监听事件,在滑动完成的监听OnPageSelected方法中,设置对应的圆点为选中,如果是最后一页,则显示按钮。

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

(0)

相关推荐

  • Android 新手引导蒙层效果实现代码示例

    先上效果图: 这个效果一开始我是想直接让UI给个切图,后来发现这样不行,适配很差,达不到效果.所以就自己动手写代码,其实思路也很简单:在这个布局的父布局上面再手动添加一个view(通常LinearLayout比较方便),然后把这个linearlayout的背景设置成#88000000,之后就是给这个linearlayout动态增加子view,初步效果就能达到. 下面直接上代码: public void showGuideView() { View view = getWindow().getDe

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

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

  • ViewPager实现带引导小圆点与自动跳转的引导界面

    实现引导小圆点的方法其实很简单,可直接在布局上放置与引导页面等量的ImageView,然后在切换页面的时候更改图片资源就好了.这里顺便提一下,有些APP是干脆在制作引导页面图片的时候加上引导小圆点,这种方式显然最简单不过了,但是既然是附在图片上的,在切换的时候也是随着图片滑动的,显然看起来效果并不是很好,甚至在我们需要加入小圆点的切换动画时,那就更不能这么去做了. 首先我们先来看看实现效果 这里我们的小圆点图片资源是采用shape绘制的,这里我弄的很随便,所以很粗糙,如果觉得不是很美观那就自行修

  • Android绘制炫酷引导界面

    一个超炫的引导界面,分享给大家 代码: MainActivity.java package com.bzu.gxs.webview1; import android.app.Activity; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.KeyEvent; import android.view.Men

  • android实现App活动定时自动跳转效果

    App的小功能点,很简单几十行代码就可以实现 主页面代码 package com.buildingbuilding; import android.content.Intent; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.WindowManag

  • Android引导页面的简单实现

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

  • android 引导界面的实现方法

    复制代码 代码如下: /** * 实现 * @author dujinyang * */ 顺序是: OneAcitivity  -->MainActivity -> TwoActivity 然后第2次进去就是:OneActivity -> TwoActivity 代码里都有注释的了,这里就不多说了.OneActivity的代码如下: [java] 复制代码 代码如下: package cn.djy.activity; import android.app.Activity; import

  • Android应用自动跳转到应用市场详情页面的方法

    前言 众所周知在Android应用开发过程中,可能会有需求,比如:推广时跳转到应用市场下载应用,跳转到应用市场给自己的应用打分,跳转到应用市场更新自己的应用. 那如何跳转到应用市场呢? 可能跳转的方法大家都是知道的,方法如下: public static void goToMarket(Context context, String packageName) { Uri uri = Uri.parse("market://details?id=" + packageName); Int

  • 很赞的引导界面效果Android控件ImageSwitcher实现

    本文实例为大家分享了Android控件ImageSwitcher实现引导界面的代码,供大家参考,具体内容如下 效果图: 布局代码: <?xml version="1.0" encoding="UTF-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent&

  • 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

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

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

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

    引导页是项目中很常见的东西了,在用户下载app首次打开后,会进入引导界面,通常都是三四张图片说明,简单介绍下app的功能和使用方法之类,最后一张有着"进入应用"的按钮,点击即可进入主页,之后打开app则不会再次进入启动页,话不多说,以下做个归纳. 效果图: 实现步骤: 1.首先我们做个有渐变动画的启动页面SplashActivity 在onCreate里设置核心方法setAlphaAnimation() public void setAlphaAnimation(){ //生成Alph

随机推荐

其他