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

ViewPager实现带有动画的引导页,供大家参考,具体内容如下

好了,又到我们学习基础控件的时候了,其实引导页很简单,就是五张图片而已

一、ViewPager实现传统的引导页

传统的ViewPager实现引导页和ListView是一样道理的,只是把ListView的Item换成图片,把BaseAdapter换成PagerAdapter,我们先来看下传统引导页的效果图

步骤一:编写xml文件

既然用到的是ViewPager,那么xml文件就必须要有ViewPager,细心的你,可能会发现最后一页还有个按钮的出现,没错,xml文件中也要有个按钮

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

  <Button
    android:id="@+id/bt_main"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true"
    android:layout_marginBottom="50dp"
    android:background="@color/colorPrimary"
    android:padding="6dp"
    android:text="立即开启"
    android:textColor="#fff"
    android:textSize="16dp"
    android:visibility="gone" />
</RelativeLayout>

步骤二:编写Adapter

开头也说了,Viewpager其实就和ListView一样的,需要一个Adapter,那么就从Adapter入手。Google提供了一个专门适配ViewPager的Adapter——PagerAdapter

public class GuideAdapter extends PagerAdapter {
  private List<View> views;
  private Context context;

  public GuideAdapter(List<View> views, Context context) {
    this.context = context;
    this.views = views;
  }

  public Object instantiateItem(View container, int position) {
    ((ViewPager) container).addView(views.get(position));
    return views.get(position);
  }

  public void destroyItem(View container, int position, Object object) {
    ((ViewPager) container).removeView(views.get(position));
  }

  public int getCount() {
    return views.size();
  }

  public boolean isViewFromObject(View arg0, Object arg1) {
    return (arg0 == arg1);
  }
}

基本ViewPager的Adapter都是这么写的,就是往ViewPager中添加List传过来的View和删除List传过来的View,可以说是每个ViewPager的模板

步骤三:编写Activity

我们找到对应的ViewPager,然后设置Adapter,代码中的initViews、initListener、initData是按顺序执行下去的,这段代码不难,很容易看懂

public class GuideActivity extends BaseActivity implements ViewPager.OnPageChangeListener {

  private ViewPager vp_guide;
  private int[] imgId = {R.drawable.guide_center_1, R.drawable.guide_center_2, R.drawable.guide_center_3,
      R.drawable.guide_center_4, R.drawable.guide_center_5};
  private List<View> mImageViews;
  private GuideAdapter adapter;
  private Button bt_main;

  @Override
  public void initViews() {
    setContentView(R.layout.activity_guide);
    vp_guide = (ViewPager) findViewById(R.id.vp_guide);
    bt_main = (Button) findViewById(R.id.bt_main);
  }

  @Override
  public void initListener() {
    bt_main.setOnClickListener(this);
    vp_guide.setOnPageChangeListener(this);
  }

  @Override
  public void initData() {
    //初始化引导资源
    mImageViews = new ArrayList<>();
    for (int i = 0; i < imgId.length; i++) {
      ImageView imageView = new ImageView(this);
      imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
      imageView.setImageResource(imgId[i]);
      mImageViews.add(imageView);
    }
    //设置引导页
    adapter = new GuideAdapter(mImageViews, this);
    vp_guide.setAdapter(adapter);
  }

  @Override
  public void processClick(View v) {
    switch (v.getId()) {
      //按钮点击事件,跳转到主页面
      case R.id.bt_main:
        Intent intent = new Intent(GuideActivity.this, MainActivity.class);
        startActivity(intent);
        finish();
        break;
    }
  }

  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    if (position == imgId.length - 1) {
      //最后一个,实现动画浮现
      bt_main.setVisibility(View.VISIBLE);
      AlphaAnimation aa = new AlphaAnimation(0, 1f);
      aa.setDuration(1000);
      bt_main.startAnimation(aa);
    } else {
      bt_main.setVisibility(View.GONE);
    }
  }

  @Override
  public void onPageSelected(int position) {

  }

  @Override
  public void onPageScrollStateChanged(int state) {

  }
}

细心的你可能也发现了该引导页是没有状态栏的,所以我们需要设置其主题为状态栏透明

<activity
  android:name=".Activity.GuideActivity"
  android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>

特别注意:这里需要注意的是图片的大小问题,如果图片高清太大,可能会出现内存溢出的错误。

二、ViewPager实现带有动画的引导页

带有动画的引导页编写步骤和传统是一模一样的,只不过给ViewPager设置一个动画。Google提供ViewPager.setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)方法来设置引导页的切换效果,这里先看Google提供的切换Demo

步骤一:编写PageTransformer

从上面效果看出,只是在引导页之间添加了一个动画而已,而Google提供的PageTransformer就可以对当前位置的引导页进行操作,比如:设置透明度的变化,设置缩放的变化,就能实现切换的动画效果

public class DepthPageTransformer implements ViewPager.PageTransformer {

  private static final float MIN_SCALE = 0.75f;

  @Override
  public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();
    if (position < -1) {
      view.setAlpha(0);
    } else if (position <= 0) {
      view.setAlpha(1);
      view.setTranslationX(0);
      view.setScaleX(1);
      view.setScaleY(1);
    } else if (position <= 1) {
      view.setAlpha(1 - position);
      view.setTranslationX(pageWidth * -position);
      float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
      view.setScaleX(scaleFactor);
      view.setScaleY(scaleFactor);
    } else {
      view.setAlpha(0);
    }
  }
}

步骤二:分析PageTransformer

从上面的代码中,可以知道在ViewPager滑动的时候,会触发transformPage这个方法,并且会将当前的position和View传递过来,下面就是我们的对View的操作

① position

position < -1(即-无穷到-1):让引导页消失,透明度为0
position <= 0(即-1到0):让引导页出现
position <= 1(即0到1):让引导页根据position做动画
剩下else(即1到无穷):让引导页消失,透明度为0

② 图解position

原谅我画图不好看,不生动,如果还不理解的话可以自己打印Log信息,把View和Position都打印出来帮助理解

步骤三:使用PageTransformer

使用PageTransformer非常简单,只要通过ViewPager设置即可

vp_guide.setPageTransformer(true, new DepthPageTransformer());

三、其他动画的引导页的参考

Google还为我们提供了另一个动画效果,看效果图

实现步骤其实和上面的步骤是一样的,具体我们来看PageTransformer的编写

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {

  private static final float MIN_SCALE = 0.85f;
  private static final float MIN_ALPHA = 0.5f;

  @SuppressLint("NewApi")
  public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();
    int pageHeight = view.getHeight();
    if (position < -1) {
      view.setAlpha(0);
    } else if (position <= 1) {
      float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
      float vertMargin = pageHeight * (1 - scaleFactor) / 2;
      float horzMargin = pageWidth * (1 - scaleFactor) / 2;
      if (position < 0) {
        view.setTranslationX(horzMargin - vertMargin / 2);
      } else {
        view.setTranslationX(-horzMargin + vertMargin / 2);
      }
      view.setScaleX(scaleFactor);
      view.setScaleY(scaleFactor);
      view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
    } else {
      view.setAlpha(0);
    }
  }
}

这里的原理就不分析了,和上面是一样的,只不过操作不同而已。除了Google提供的Demo之外,我们可以模仿谷歌的Demo,编写出我们自己的动画效果

public class RotateDownPageTransformer implements ViewPager.PageTransformer {

  private static final float ROT_MAX = 20.0f;
  private float mRot;

  public void transformPage(View view, float position) {
    if (position < -1) {
      ViewHelper.setRotation(view, 0);
    } else if (position <= 1) {
      //[-1,1]
      mRot = (ROT_MAX * position);
      ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
      ViewHelper.setPivotY(view, view.getMeasuredHeight());
      ViewHelper.setRotation(view, mRot);
    } else {
      ViewHelper.setRotation(view, 0);
    }
  }
}

效果如图

好了,今天基础控件就到这里了,如果不懂的话可以自己实践一下,然后用纸笔思考思考,你就会有收获的。我也是通过博客学习别人的博客,然后通过自己的方式,将学习的内容写出来。我们一起加油,后来者们

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

(0)

相关推荐

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

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

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

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

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

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

  • Android利用ViewPager实现用户引导界面效果的方法

    本文实例讲述了Android利用ViewPager实现用户引导界面效果.分享给大家供大家参考,具体如下: 我相信有很多朋友在装完软件首次打开时,有很多软件都有一个软件功能介绍, 例如刚装完微信打开它,有很多介绍微信功能的图片,并且在屏幕下方有很多小圆点提示你当前图片的位置. 今天我就来实现这么个功能 所实现的功能: 1.可以左右滑动功能图片. 2.图片的索引 看出当前图片所在的位置. 3.可循环滑动. 4.图片的索引带有动画效果. 本次学习主要是利用ViewPager实现用户引导界面 在这里,我

  • Android UI设计与开发之ViewPager介绍和简单实现引导界面

    做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受--UI设计开始写起吧,循序渐进,娓娓道来.博主在这里和大家一起学习,希望能多多支持,话不多说,下面就开始讲解UI设计的第一篇. 在讲解如何实现引导界面的效果之前,我想先详细介绍一下ViewPager类的使用和说明,因为这是开发引导界面最重要的类,没有之一. 一.ViewPager实现的效果图 二.

  • 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控件ViewPager实现带有动画的引导页

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

  • Android控件FlowLikeView实现点赞动画

    现在市面上直播类的应用可以说是一抓一大把,随随便便就以什么主题来开发个直播App,说白了就想在这领域分杯羹.在使用这些应用过程中其实不难发现,在所有的直播界面,少不了的就是各种打赏.各种点赞.今天自己就针对点赞功能敲了一下,代码不多,主要是涉及到动画运动轨迹运算,这里需借助 贝塞尔曲线 相关知识,我使用三阶贝塞尔曲线来实现轨迹动画. 运行效果 一.具体实现流程 仔细分析整个点赞过程可以发现,首先是"爱心"的出现动画,然后是"爱心"以类似气泡的形式向上运动. &quo

  • Android控件Tween动画(补间动画)实现方法示例

    本文实例讲述了Android控件Tween动画(补间动画)实现方法.分享给大家供大家参考,具体如下: Android动画中的Tween动画:是把控件对象不断的进行图像变化来产生旋转.平移.放缩和渐变等动画效果. /** * 控件Tween动画 * * @description: * @author ldm * @date 2016-6-22 下午5:26:24 */ public class TweenActivity extends Activity { private SeekBar see

  • Android控件之Gallery用法实例分析

    本文实例讲述了Android控件之Gallery用法.分享给大家供大家参考.具体如下: Gallery组件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Gallery组件指定了10张图像,那么当Gallery组件显示到第10张时,就不会再继续显示了.这虽然在大多数时候没有什么关系,但在某些情况下,我们希望图像显示到最后一张时再重第1张开始显示,也就是循环显示.要实现这种风格的Gallery组件,就需要对Gallery的Adapter对象进行

  • 很赞的引导界面效果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控件之RatingBar自定义星级评分样式

    一.RatingBar简单介绍 RatingBar是基于SeekBar(拖动条)和ProgressBar(状态条)的扩展,用星形来显示等级评定,在使用默认RatingBar时,用户可以通过触摸/拖动/按键(比如遥控器)来设置评分, RatingBar自带有两种模式 ,一个小风格 ratingBarStyleSmall,大风格为ratingBarStyleIndicator,大的只适合做指示,不适用与用户交互. 效果图展示: 二.实例 1.布局文件 <?xml version="1.0&qu

  • 简单仿写Android控件SlidingMenu的实例代码

    SlidingMenu (侧滑菜单形式)在android开发过程中,经常用到,这次我们通过一个简单案例来仿写SlidingMenu 的大体功能,下面 是主要实现的代码: java代码:(重写onTouchEvent方法 处理侧滑菜单处的事件分发机制) public class SlidingMenu extends ViewGroup implements OnClickListener { private View menu; private View main; private int me

  • android控件Banner实现简单轮播图效果

    本文实例为大家分享了android控件Banner实现简单轮播图效果的具体代码,供大家参考,具体内容如下 实现这个轮播图是在Fragment里实现的,所以要想实现,首先要创建Fragment 首先是布局文件中的展示 <com.youth.banner.Banner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="500dp"

  • Android 控件自动贴边实现实例详解

    目录 正文 判断交互 隐藏与显示 示例 正文 最近接到个需求,需要在用户与App交互时,把SDK中之前实现过的悬浮控件贴边隐藏,结束交互后延迟一段时间再自动显示.本篇文章介绍一下实现的思路. 判断交互 用户与App交互.结束交互可以通过监听触摸事件来实现.建议使用的Activity的dispatchTouchEvent,Activity下的所有触摸事件分发时都会回调此方法,代码如下: class AutoEdgeHideActivity : BaseGestureDetectorActivity

  • Android控件ListView使用方法详解

    Android控件ListView使用方法介绍,具体如下 一.ListView的简单用法 首先新建一个ListViewTest项目,并让Android Studio自动创建好活动.然后修改activity_main.xml中的代码,如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/re

随机推荐