这个画廊的效果利用到了View的clipChildren属性，我们在这里要把ViewPager以及它的父窗体都设置为false，如下:
Android:clipChildren=”false”
因为如果clipChildren属性设置为true,就表明我们要将children给clip掉，就是说对于子元素来说，超出当前view的部分都会被切掉，那我们在这里把它设置成false，就表明超出view的部分，不要切掉，依然显示。
xml代码部分：
<LinearLayout
android:id=”@+id/container”
android:layout_width=”match_parent”
android:layout_height=”100dp”
android:clipChildren=”false”
android:gravity=”center_horizontal”
android:layerType=”software”
android:orientation=”horizontal” >
<android.support.v4.view.ViewPager
android:id=”@+id/viewpager”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_marginLeft=”110dp”
android:layout_marginRight=”110dp”
android:clipChildren=”false” >
</android.support.v4.view.ViewPager>
Java代码部分：
// 1.设置幕后item的缓存数目
mViewPager.setOffscreenPageLimit(3);
// 2.设置页与页之间的间距
mViewPager.setPageMargin(10);
// 3.将父类的touch事件分发至viewPgaer，否则只能滑动中间的一个view对象
container.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return mViewPager.dispatchTouchEvent(event);
}
});
参考效果图（上面代码并不能实现效果图，仅供参考）：
正常情况下, ViewPager 一页只能显示一项数据,
但是如果需求是, 除了小显示本页数据, 还有包 左右两半的数据 也都露出一点来呢?
这该怎么处理?
后面在网上了搜了一下, 发现有不少这样得到文章, 这里自己也写一篇总结一下.
其实 主要就是用到 View 的 android:clipChildren 属性.
简单来说这个属性, 就是 父View 是否 束缚 子View 的显示范围.
如果 父View 有 padding , 那么 子View 则在 padding区域是不能显示内容的,
但是如果 设置 android:clipChildren 为 false 时, 则子View 就可以在 父View 的padding屈戌显示内容了.
ok 基本了解了 android:clipChildren 那么来处理一下 ViewPager吧
先看一下我做的demo:
基本就是上面那样, 除了可以显示 当先项的内容, 还可以显示 左右两边的内容.
下面贴一下主要代码:
布局文件:
- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">“1.0”</span> <span class="attribute">encoding</span>=<span class="attribute-value">“utf-8”</span><span class="tag">?></span>
- <span class="tag"><</span><span class="tag-name">RelativeLayout</span>
- <span class="attribute">android:id</span>=<span class="attribute-value">“@+id/view_pager_box”</span>
- <span class="attribute">xmlns:android</span>=<span class="attribute-value">“http://schemas.android.com/apk/res/android”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“360dp”</span>
- <span class="attribute">android:layout_marginTop</span>=<span class="attribute-value">“30dp”</span>
- <span class="attribute">android:clipChildren</span>=<span class="attribute-value">“false”</span>
- <span class="tag">></span>
-
- <span class="tag"><</span><span class="tag-name">android.support.v4.view.ViewPager</span>
- <span class="attribute">android:id</span>=<span class="attribute-value">“@+id/view_pager”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">“50dp”</span>
- <span class="attribute">android:layout_marginRight</span>=<span class="attribute-value">“50dp”</span>
- <span class="attribute">android:clipChildren</span>=<span class="attribute-value">“false”</span>
-
- <span class="tag">/></span>
-
- <span class="tag"></</span><span class="tag-name">RelativeLayout</span><span class="tag">></span>
可以在看到
外层的 RelativeLayout 设置了android:clipChildren 为false
ViewPager 同样页设置了 android:clipChildren 为false
需要两个都设置, 不然会出问题
activity 相关代码
- <span class="keyword">public</span> <span class="keyword">class</span> MainActivity <span class="keyword">extends</span> AppCompatActivity {
-
- ViewPager mViewPager;
- RelativeLayout mViewPagerBox;
-
- <span class="keyword">private</span> ViewPagerAdapter1 mViewPagerAdapter1;
-
- <span class="annotation">@Override</span>
- <span class="keyword">protected</span> <span class="keyword">void</span> onCreate(Bundle savedInstanceState) {
- <span class="keyword">super</span>.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
-
- mViewPager = (ViewPager) findViewById(R.id.view_pager);
- mViewPagerBox = (RelativeLayout) findViewById(R.id.view_pager_box);
-
- mViewPager.setOffscreenPageLimit(<span class="number">3</span>);
-
- mViewPagerAdapter1 = <span class="keyword">new</span> ViewPagerAdapter1(<span class="keyword">this</span>);
- mViewPager.setAdapter(mViewPagerAdapter1);
-
- mViewPagerBox.setOnTouchListener(<span class="keyword">new</span> View.OnTouchListener() {
- <span class="annotation">@Override</span>
- <span class="keyword">public</span> <span class="keyword">boolean</span> onTouch(View v, MotionEvent event) {
- <span class="keyword">return</span> mViewPager.dispatchTouchEvent(event);
- }
- });
-
- }
- }
可以看到 和使用普通的 Viewpager 没有任何的区别,
需要注意的是, 为了能够滑动 左右漏出的两边时, 也能滑动 ViewPager
需要吧 Viewpager 的 父View收到的事件 传递给 viewpager
我们在使用Viewpager 的时候, 经常 会加入一些好看的滑动效果这个是怎么实现的呢?
其实很简单, google 以及为我提供了相应的方法.
通过 setPageTransformer 就可以设置 Viewpager的滑动效果.
Android 官方文档 已经提供了两种 滑动效果:
[http://developer.android.com/intl/zh-cn/training/animation/screen-slide.html](http://developer.android.com/intl/zh-cn/training/animation/screen-slide.html)
ZoomOutPageTransformer:
💬 评论