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

目前很多软件安装时都会出现引导页面,用户体验很好。

下面就来DIY下:

因为视频上传很麻烦,所以截图了。

首先看看效果图:

点击小点可自由切换,滑动也可以自由切换,最后一个导航页添加了点击跳转。

开始实现引导页:

一、采集需要的图片放入drawable文件里

二、初始化每个导航页的视图

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.yyp.myapp.Adapter.ViewPagerAdapter;
import com.yyp.myapp.R;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerActivity extends Activity implements ViewPager.OnPageChangeListener,View.OnClickListener {

 private ViewPager viewPager;
 private ImageView[] pots;
 private List<View> views;

 private TextView et_into_login;

 private ViewPagerAdapter adapter;

 //图片资源
 private int[] guideImages = {R.drawable.guide1,R.drawable.guide2,R.drawable.guide3};
 private int index;
 private LinearLayout layout;

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

  initView();
  initData();
 }

 //初始化ViewPager
 public void initView()
 {
  layout = (LinearLayout) this.findViewById(R.id.ll_pots);
  viewPager = (ViewPager) this.findViewById(R.id.viewpager);
  et_into_login = (TextView) this.findViewById(R.id.et_into_login);
  views = new ArrayList<View>();
  adapter = new ViewPagerAdapter(views);
  pots = new ImageView[guideImages.length];
  Log.e("ll_viewpager", layout + "");
 }

 //初始化每一个图片数据
 public void initData()
 {
  //设置图片的长宽类型
  android.view.ViewGroup.LayoutParams layoutParams = new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.MATCH_PARENT,android.view.ViewGroup.LayoutParams.MATCH_PARENT);
  for(int i:guideImages)
  {
   ImageView imageView = new ImageView(this);
   imageView.setImageResource(i); //将对应图片的id传进去,用于初始化图片
   imageView.setLayoutParams(layoutParams);
   views.add(imageView);
  }
  initPot();
  viewPager.setAdapter(adapter);
  viewPager.setOnPageChangeListener(this);
 }

 //初始化每个点颜色
 public void initPot()
 {
  //点的集合
  for(int i=0;i<layout.getChildCount();i++)
  {
   //全部设置为灰色
   pots[i] = (ImageView) layout.getChildAt(i);
   pots[i].setImageResource(R.drawable.pot5);
   //给每个点设置点击事件
   pots[i].setOnClickListener(this);

   pots[i].setTag(i);
  }
  //第一个设置为橙色
  index = 0;
  pots[index].setImageResource(R.drawable.pot1);

 }

 @Override
 public void onPageScrollStateChanged(int arg0) {
  // TODO Auto-generated method stub

 }

 @Override
 public void onPageScrolled(int arg0, float arg1, int arg2) {
  // TODO Auto-generated method stub

 }

 @Override
 public void onPageSelected(int position) {
  // TODO Auto-generated method stub
  SetIndex(position);

  //最后一张导航页才进行跳转提示
  if(position==2){
   et_into_login.setVisibility(View.VISIBLE);
  }else{
   et_into_login.setVisibility(View.INVISIBLE);
  }
 }

 public void SetIndex(int position) {
  // TODO Auto-generated method stub
  for(int i=0;i<layout.getChildCount();i++)
  {
   //全部设置为灰色
   pots[i] = (ImageView) layout.getChildAt(i);
   pots[i].setImageResource(R.drawable.pot5);

  }
  //选中的设置为橙色
  pots[position].setImageResource(R.drawable.pot1);

 }

 @Override
 public void onClick(View v) {
  // TODO Auto-generated method stub
  int i = (Integer) v.getTag();
  //设置当前页为i所对应的图片
  viewPager.setCurrentItem(i);
  if(i==2){
   et_into_login.setVisibility(View.VISIBLE);
  }
 }

 //跳转到登录界面
 public void goLogin(View v){
  Intent goLogin = new Intent(this,LoginActivity.class);
  startActivity(goLogin);
  finish();
 }
}

三、初始化期间自定义ViewPager适配器

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by yyp on 2015/10/25.
 */
public class ViewPagerAdapter extends PagerAdapter {

 //获得导航页的图片集
 private List<View> views;

 public ViewPagerAdapter(List<View> views)
 {
  this.views = views;
 }

 //获得界面个数
 @Override
 public int getCount() {

  //返回图片页数
  return views.size();
 }

 //初始化position位置的界面
 @Override
 public Object instantiateItem(ViewGroup container, int position) {

  ((ViewGroup)container).addView(views.get(position));
  return views.get(position);
 }

 //判断是否由对象生成界面
 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
  // TODO Auto-generated method stub
  return arg0==arg1;
 }

 //对不在界面内的导航页进行删除
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView(views.get(position));
 }
}

在用户体验方面,我们能发掘的东西还有很多,说不定下次流行的视图,就是我们某个人做出来的。

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

时间: 2016-08-07

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控件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引导页面的简单实现

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

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应用自动跳转到应用市场详情页面的方法

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

android 引导界面的实现方法

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

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

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

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

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

Android实现新手引导半透明蒙层效果

本文实例为大家分享了Android实现新手引导半透明蒙层效果的具体代码,供大家参考,具体内容如下 效果图: 其中的文字和我知道啦是ui切得两张透明图片 自定义View: package com.cymobi.library.view.widget; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas;

Android实现桌面悬浮窗、蒙板效果实例代码

现在很多安全类的软件,比如360手机助手,百度手机助手等等,都有一个悬浮窗,可以飘浮在桌面上,方便用户使用一些常用的操作. 今天这篇文章,就是介绍如何实现桌面悬浮窗效果的. 首先,看一下效果图. 悬浮窗一共分为两个部分,一个是平常显示的小窗口,另外一个是点击小窗口显示出来的二级悬浮窗口. 首先,先看一下这个项目的目录结构. 最关键的就是红框内的四个类. 首先,FloatWindowService是一个后台的服务类,主要负责在后台不断的刷新桌面上的小悬浮窗口,否则会导致更换界面之后,悬浮窗口也会随

Android实现蒙板效果

本文实例为大家分享了Android实现蒙板效果的相关代码,供大家参考,具体内容如下 1.不保留标题栏蒙板的实现 效果: 原理: 1.弹窗时,设置背景窗体的透明度 2.取消弹窗时,恢复背景窗体的透明度 关键代码: private void popupWindows(List<String> list){ //产生背景变暗效果 WindowManager.LayoutParams lp=getWindow().getAttributes(); lp.alpha = 0.4f; getWindow(

Android DrawerLayout实现抽屉效果实例代码

官网:https://developer.android.com/training/implementing-navigation/nav-drawer.html 贴上主要的逻辑和布局文件: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schema

Android数据传输中的参数加密代码示例

Android开发中,难免会遇到需要加解密一些数据内容存到本地文件.或者通过网络传输到其他服务器和设备的问题,但并不是使用了加密就绝对安全了,如果加密函数使用不正确,加密数据很容易受到逆向破解攻击.还有很多开发者没有意识到的加密算法的问题. 1.数据传输 1).http请求中,最常用的方法有两种:get和post:一般post请求适合做提交,而get请求适合做请求数据 2).数据的加密,大概有三种常用的:AES,DES,Base64 2.Base64加密 这里使用的aes加密,然后再将字符串使用

Android实现水波纹效果实例代码

效果图 attrs.xml 自定义属性 <declare-styleable name="RippleAnimationView"> <attr name="ripple_anim_color" format="color" /> <!-- 水波纹填充类型 --> <attr name="ripple_anim_type" format="enum"> <

Android刮刮乐效果-proterDuffXfermode的示例代码

先看看实现的效果 这个场景主要是模拟我们有些app里面的刮刮乐中奖的效果,主要是利用Android的proterDuffXfermode这个类去实现的. proterDuffXfermode 在用Android中的Canvas进行绘图时,可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合,形成新的像素值,从而更新Canvas中最终的像素颜色值,这样会创建很多有趣的效果.PorterDuffXfermode的功能十分的强大,其他的

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示       源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以

Android刮刮卡效果实现代码

本文实例为大家分享了Android刮刮卡效果,供大家参考,具体内容如下 android实现底层一张图片,上层一个遮罩层,触摸滑动按手指滑动路径实现去除遮罩效果,类似于抽奖的刮刮卡一样,不多说先上张效果图: 直接上代码: XfermodeView.java /** * Created by 57 on 2016-4-21. */ public class XfermodeView extends View{ private Bitmap mBgBitmap,mFgBitmap; private P