ViewPager系列之 仿魅族应用的广告BannerView
来源:互联网 发布:京东剑客软件 编辑:程序博客网 时间:2024/05/16 04:37
转自:http://www.jianshu.com/p/653680cfe877#
目的:添加自己的理解和注释。
主要改动:展示多页的更深解释、动画效果的优化。
1 . ViewPager展示多页
要让ViewPager页面展示多页的内容,就要用到ViewGroup的一个强大的属性。这个属性虽然强大,但是也不常用,可能有些小伙伴不知道(之前我也没用过…),那就是clipChildren属性。这个属性有什么作用呢,我们看一下它的文档介绍:
/** * By default, children are clipped to their bounds before drawing. This * allows view groups to override this behavior for animations, etc. * * @param clipChildren true to clip children to their bounds, * false otherwise * @attr ref android.R.styleable#ViewGroup_clipChildren */
clipChildren: 默认值为true, 子View 的大小只能在父View规定的范围之内,比如父View的高为50,子View的高为60 ,那么多处的部分就会被裁剪。如果我们设置这个值为false的话,那么多处的部分就不会被裁剪了。
clipChildren的意思:是否限制子View在其范围内,我们将其值设置为false后那么当子控件的高度高于父控件时也会完全显示,而不会被压缩,ViewPager是一组连续的图片,我们设置了false,其实父控件也不能控制ViewPager的大小了。
这里我们就可以利用这个属性来实现了这个效果了,我们设置ViewPager的父布局的clipChildren为false。然后设置ViewPager 左右一定的边距,那么左右就空出了一定的区域,利用clipChildren 属性,就能让前后页面的部分显示在当前页了。布局如下:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:clipChildren="false" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" /></LinearLayout>
这样就能实现ViewPager 展示前后页面的部分内容。
2 . 自定义ViewPager.PageTransformer动画
上面实现了ViewPager当前页面显示前后页的部分内容,但是从最开始魅族的Banner效果我们可以看出,滑动的时候是有 一个放大缩小的动画的。左右显示的部分有一定比例的缩小。这就要用到ViewPager.PageTransformer了。
ViewPager.PageTransformer 干什么的呢?ViewPager.PageTransformer 是用来做ViewPager切换动画的,它是一个接口,里面只有一个方法transformPage。
public interface PageTransformer { /** * Apply a property transformation to the given page. * * @param page Apply the transformation to this page * @param position Position of page relative to the current front-and-center * position of the pager. 0 is front and center. 1 is one full * page position to the right, and -1 is one page position to the left. */ void transformPage(View page, float position); }
虽然只有一个方法,但是它很强大,它能反映出在ViewPager滑动过程中,各个View的位置变化。我们拿到了这些位置变化,就能在这个过程中对View做各种各样的动画了。
要自定义动画,我们就来需要知道positon这个值的变化区间。从官方给的ViewPager的两个示例我们知道,position的变换有三个区间,[-Infinity,-1),[-1,1],(1.Infinity)。
[-Infinity,-1):已经在屏幕之外,看不到了
(1.Infinity): 已经在屏幕之外,看不到了。
[-1,1]: 这个区间是我门操作View动画的重点区间。
我们来看一下官方对于position的解释:
官方的解释:The position parameter indicates where a given page is located relative to the center of the screen. It is a dynamic property that changes as the user scrolls through the pages. When a page fills the screen, its position value is 0. When a page is drawn just off the right side of the screen, its position value is 1. If the user scrolls halfway between pages one and two, page one has a position of -0.5 and page two has a position of 0.5.
根据解释,也就是说当前停留的页面的位置为 0,右边屏幕之外绘制的这个页面位置为 1。那么,A 页面滑到 B 页面有 2 种情况:第一种:左边划出屏幕,那么 A:0 -> -1,B :1 -> 0。第二种:右边划出屏幕,A:0->1, B :-1-> 0
了解了这个方法的变化后,我们就来自定义我们的切换动画,这里很简单,我们只需要一个scale动画。代码如下:
public class CustomTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.9F; @Override public void transformPage(View page, float position) { Log.e("xsr", "position = " + position + ", page = " + page); if (position <= -1) { page.setScaleY(MIN_SCALE); } else if (position < 1 && position > -1) { // position会显示ViewPager里面的所有的位置。这些位置都是相对于中间(0)位置的。最中间是0,往右:1,2,3。。。往左:-1,-2,-3。。。相对位置越靠近中间(0),数值越小。相当于就是-1到0到1之间无穷的小数。所以我们直接取到这个位置的绝对值,然后乘以0.1f得到缩小的距离比例。然后再用1减去,得到最终的比例。 float scale = 1 - Math.abs(position) * 0.1f; Log.e("xsr", "scale = " + scale); page.setScaleY(scale); /*page.setScaleX(scale); if(position<0){ page.setTranslationX(width * (1 - scale) /2); }else{ page.setTranslationX(-width * (1 - scale) /2); }*/ } else { page.setScaleY(MIN_SCALE); } }}
到此,我们仿魅族Banner的静态效果就实现了。接下来我们就要让Banner动起来,实现无限轮播效果。
- ViewPager系列之 仿魅族应用的广告BannerView
- ViewPager系列之 仿魅族应用的广告BannerView
- ViewPager系列之仿魅族应用的广告BannerView
- 自定义View系列之ViewPager实现广告条效果
- android BannerView实现自动轮播广告的用法(参考自github)
- IOS 广告轮播控件 - BannerView
- ViewPager 系列之 打造一个通用的 ViewPager
- ViewPager系列之 打造一个通用的ViewPager
- 自定义的广告条(ViewPager)
- 基于viewpager的广告滑动效果
- ViewPager的广告轮播功能
- ViewPager作用于广告条的流程
- android viewpager非常实用的广告轮播图
- Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View
- Android之ViewPager实现轮播广告效果的自定义View
- android 学习笔记之四 ViewPager 打造不一样的广告轮播切换效果
- 一个例子带你深入理解ViewPager之广告轮播条的实现
- Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View
- Bootstrap文件上传组件:Bootstrap fileinput
- Android7.0中文API -- TabWidget
- 物联网浪潮之下,前端工程师如何迎刃而上?
- webpack和webpack-simple中如何引入css文件
- @1x @2x和@3x.png 的区别
- ViewPager系列之 仿魅族应用的广告BannerView
- Weak Pointer
- 大话设计模式阅读笔记-外观模式
- 有序广播与无序广播案例
- Linux扩大虚拟机系统磁盘空间
- log4j日志输出性能优化-缓存、异步
- 微信(五):wx_sample.php
- 面向语法分析的word2vec修正
- 模板类中重载<<和>>操作符