ViewPager 实现 GallerView 效果, 显示左右两边

正常情况下, ViewPager  一页只能显示一项数据, 
但是如果需求是,  除了小显示本页数据, 还有包 左右两半的数据 也都露出一点来呢?

这该怎么处理?

后面在网上了搜了一下, 发现有不少这样得到文章, 这里自己也写一篇总结一下.

其实 主要就是用到 View 的 android:clipChildren 属性.
简单来说这个属性,  就是 父View 是否 束缚 子View 的显示范围.
如果 父View  有 padding , 那么 子View 则在 padding区域是不能显示内容的, 
但是如果 设置 android:clipChildren 为 false 时, 则子View 就可以在 父View 的padding屈戌显示内容了.

ok 基本了解了 android:clipChildren  那么来处理一下  ViewPager吧

先看一下我做的demo: 


基本就是上面那样, 除了可以显示 当先项的内容, 还可以显示 左右两边的内容.

下面贴一下主要代码:
布局文件: 
[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout  
  3.     android:id="@+id/view_pager_box"  
  4.     xmlns:android="http://schemas.android.com/apk/res/android"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="360dp"  
  7.     android:layout_marginTop="30dp"  
  8.     android:clipChildren="false"  
  9.     >  
  10.   
  11.     <android.support.v4.view.ViewPager  
  12.         android:id="@+id/view_pager"  
  13.         android:layout_width="match_parent"  
  14.         android:layout_height="match_parent"  
  15.         android:layout_marginLeft="50dp"  
  16.         android:layout_marginRight="50dp"  
  17.         android:clipChildren="false"  
  18.   
  19.         />  
  20.   
  21. </RelativeLayout>  


可以在看到 
外层的 RelativeLayout 设置了android:clipChildren 为false
ViewPager 同样页设置了 android:clipChildren 为false
需要两个都设置, 不然会出问题

activity 相关代码 

public class MainActivity extends AppCompatActivity {


    ViewPager mViewPager;
    RelativeLayout mViewPagerBox;


    private ViewPagerAdapter1 mViewPagerAdapter1;


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


        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPagerBox = (RelativeLayout) findViewById(R.id.view_pager_box);


        mViewPager.setOffscreenPageLimit(3);


        mViewPagerAdapter1 = new ViewPagerAdapter1(this);
        mViewPager.setAdapter(mViewPagerAdapter1);


        mViewPagerBox.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return mViewPager.dispatchTouchEvent(event);
            }
        });


    }
}



可以看到 和使用普通的 Viewpager 没有任何的区别,
需要注意的是, 为了能够滑动 左右漏出的两边时,  也能滑动 ViewPager 
需要吧 Viewpager 的 父View收到的事件 传递给 viewpager

ok  很简单 就实现了.
但是总感觉,  不是很好看,  
向实现,  左右两半的 与中间 有点距离,
用时 左右两边的 图片, 比中间的图片小一点,  在滑动到中间的时候, 逐渐方法 这个怎么实现呢?

这个看后面一片文章 会写到.

阅读更多
想对作者说点什么? 我来说一句

中间大两边小的viewpager

2015年09月11日 2.52MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭