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

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

阅读更多
想对作者说点什么?

博主推荐

换一批

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