听说你想用ViewPager实现这样的效果?

效果图

ViewPager实现多个View

此图盗于https://github.com/smallnew/FuCardPager

代码实现

实现效果有两种:

1.重写PagerAdaptergetPageWidth()方法

@Override
public float getPageWidth(int position) {
    return (float)0.8;
}

该方法返回结果默认为1.0,其效果为ViewPager的Item占满整个ViewPager控件的宽度,如果我们将返回的结果重写为小于1的数,则Item会相对默认效果变小,两边的Item也会相应地靠近过来,从而来到屏幕可见的区域,实现了我们想要的效果。

2.布局参数设置

这里我们设置的参数有点杂乱,我们分块来看:

【xml-ViewPager】

设置外边距和clipChildren

代码如下:

android:layout_marginLeft="xx"
android:layout_marginRight="xx"
android:clipChildren="false"

【xml-ViewPager的父容器】

设置clipChildren和layerType

代码如下:

android:clipChildren="false"
android:layerType="software"

【java-viewPager】

设置最多一屏最多显示个数及page间距

代码如下:

viewPager.setOffscreenPageLimit(4);
viewPager.setPageMargin(xxx);

知其然,知其所以然!我们来看看其中的原理:

android:clipChildren表示是否限制子View在其范围内,如果clipChildren属性设置为true,就表明我们要将children给clip掉,就是说对于子元素来说,超出当前view的部分都会被切掉,所以我们需要将clipChidren设置为false

setClipChildren(false)在3.0以上版本中,开启了硬件加速后将不能 正常工作,所以需要将其设置为软件加速。即:android:layerType="software"

注意一下:PAGE_MARGIN的间距要小于 VIEW_PAGER_MARGIN的间距才可以实现一屏多View的效果。

实现居中

有的时候,我们为了好看,想要将我们的item实现居中。实现居中的方法很灵活,这里说一个比较接地气的方法:

ViewPager宽度设置为MATCH_PARENT,横向间距设置相同宽度。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏分享达人秀

ImageView的属性和方法大全

通过前面几期的学习,TextView控件及其子控件基本学习完成,可以在Android屏幕上显示一些文字或者按钮,那么从本期开始来学习如何进行图片展示,这...

20790
来自专栏Android干货园

Android 自定义上面圆角下面直角的ImageView

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

85840
来自专栏Android小菜鸡

Android 简单实现控件滑动固定效果

  首先我们需要实时的获取滑动的Y值scrollDistanceY(可以理解为滑动了的距离),可以通过ScrollView的getScrollY();方法来获取...

29930
来自专栏向治洪

滑动开关按钮SlideSwich

iphone上有开关控件,很漂亮,其实android4.0以后也有switch控件,但是只能用在4.0以后的系统中,这就失去了其使用价值,而且我觉得它的界面也...

392100
来自专栏Felix的技术分享

Android快速索引条控件QuickIndexBar

27070
来自专栏Android开发指南

15.屏幕适配

40880
来自专栏Android干货

Android项目实战(四十一):游戏和视频类型应用 状态栏沉浸式效果

35660
来自专栏Java学习网

Android UI控件系列:LinearLayout(线性布局)

Android UI控件系列:LinearLayout(线性布局) LinearLayout是在线性方向显示View元素的一个ViewGroup,可以是水平方...

22790
来自专栏Android源码框架分析

仿淘宝、京东拖拽商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhost)实现效果图实现

22830
来自专栏向治洪

CoordinatorLayout

CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能:  1、作为顶层布局  2、调度协调子布局 ...

174100

扫码关注云+社区

领取腾讯云代金券