Viewpager显示前后两页部分界面(含5种demo)

背景

UI设计中,为了提醒用户当前是一个可横向滑动的列表,所以在显示时,希望显示出前后两页部分界面.

实现方案1之效果21

  • 效果


    Viewpager显示前后两页部分界面(含5种demo)_第1张图片
    静图

    Viewpager显示前后两页部分界面(含5种demo)_第2张图片
    动图
  • 关键代码
    在ViewPager中设置如下三项属性
android:clipToPadding="false"
android:paddingLeft="20dp"
android:paddingRight="20dp"

xml完整代码如下(也可以通过代码中设置)


实现方案1之效果2

  • 效果


    Viewpager显示前后两页部分界面(含5种demo)_第3张图片
    静图

    Viewpager显示前后两页部分界面(含5种demo)_第4张图片
    动图
  • 代码
    因代码较多,请直接下载源代码库查看showneighbour工程

实现方案2及效果(代码复杂一些,但是更加炫酷)

  • 效果


    Viewpager显示前后两页部分界面(含5种demo)_第5张图片
    静图

    Viewpager显示前后两页部分界面(含5种demo)_第6张图片
    动图
  • 代码
    因代码较多,请直接下载源代码库查看showneighbour2工程

完整源代码(一共包括5种demo)

https://github.com/cxyzy1/viewPagerDemos/tree/master/showNeighbours

Viewpager显示前后两页部分界面(含5种demo)_第7张图片

你可能感兴趣的:(Viewpager显示前后两页部分界面(含5种demo))