本文主要介绍如何利用ViewPager实现Gallery的画廊效果,即一屏显示多个Fragment
Demo APK 可以方便的查看效果,在各大应用商店搜索 trinea android 下载即可,如:Google Play。
示例代码可见ViewPager MultiFragmentDemo
效果图如下:
在使用Gallery的时候大家会发现有几个问题(1). 无法控制每次滑动只滑动一页, (2). Gallery默认第一个item居中,无法修改它与Gallery的左间距。ViewPager可以方便的解决上面两个问题,但默认却无法在屏幕上显示多个Fragment。
下面介绍如何利用ViewPager及android:clipChildren属性解决这个问题。
1、定义xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false" android:layerType="software" > <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="250dp" android:layout_height="450dp" android:layout_gravity="center" android:clipChildren="false" /> </RelativeLayout> |
发现上面的RelativeLayout(可以用其它layout替换)和ViewPager的android:clipChildren都设置为了false。
android:clipChildren表示是否限制子View在其范围内,在animations动画以及本文的情况下可以发挥很大的作用。默认为true。
2、Java部分
这里我们主要完成
(1). ViewPager设置
需要setOnPageChangeListener,在onPageScrolled(int position, float positionOffset, int positionOffsetPixels)函数中不断刷新layout。
还可以
1 2 |
viewPager.setOffscreenPageLimit(TOTAL_COUNT); viewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin)); |
setOffscreenPageLimit表示设置缓存,这样左右拖动即可看见后面的Fragment。setPageMargin表示设置Fragment之间的间距
(2). FrameLayout设置
需要setOnTouchListener函数中将滑动滑动事件传递给viewPager,否则只有viewPager中间的view可以滑动,设置后整个viewPager都可以滑动。
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
package cn.trinea.android.demo; import android.app.ActionBar; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.MenuItem; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.RelativeLayout; /** * ViewPager实现画廊效果 * * @author Trinea 2013-04-03 */ public class ViewPagerMulTiFragmentDemo extends FragmentActivity { private static int TOTAL_COUNT = 3; private RelativeLayout viewPagerContainer; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.view_pager_multi_fragment_demo); viewPager = (ViewPager)findViewById(R.id.view_pager); viewPagerContainer = (RelativeLayout)findViewById(R.id.pager_layout); viewPager.setAdapter(new MyPagerAdapter()); // to cache all page, or we will see the right item delayed viewPager.setOffscreenPageLimit(TOTAL_COUNT); viewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin)); MyOnPageChangeListener myOnPageChangeListener = new MyOnPageChangeListener(); viewPager.setOnPageChangeListener(myOnPageChangeListener); viewPagerContainer.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { // dispatch the events to the ViewPager, to solve the problem that we can swipe only the middle view. return viewPager.dispatchTouchEvent(event); } }); } /** * this is a example fragment, just a imageview, u can replace it with your needs * * @author Trinea 2013-04-03 */ class MyPagerAdapter extends PagerAdapter { @Override public int getCount() { return TOTAL_COUNT; } @Override public boolean isViewFromObject(View view, Object object) { return (view == object); } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = new ImageView(ViewPagerMulTiFragmentDemo.this); imageView.setImageResource(R.drawable.image1 + position); ((ViewPager)container).addView(imageView, position); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager)container).removeView((ImageView)object); } } public class MyOnPageChangeListener implements OnPageChangeListener { @Override public void onPageSelected(int position) { } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // to refresh frameLayout if (viewPagerContainer != null) { viewPagerContainer.invalidate(); } } @Override public void onPageScrollStateChanged(int arg0) { } } } |
可能运行后出现viewpager的部分Fragment无法看见或是突然消失的问题,请确保RelativeLayout和ViewPager的android:clipChildren都设置为了false并且viewPager.setOffscreenPageLimit(TOTAL_COUNT);其中TOTAL_COUNT大于0. 当然子Fragment本身不能是match_parent的。viewpager设置了paddingTop也会导致无法实现画廊而只是显示一屏。
我给viewpager和他的父控件都设置了false了呀,但是还是看不到效果,还有哪些可能的坑点呢
Demo地址:https://github.com/CB2Git/BlogDemoRepository/tree/master/XTuone
终于弄出来了,楼主太棒了,这个找的我吐血,结果是因为我设了padding,看了好多博客只说了设置clipchildren就行,完全没有前方有坑的预警
你好,请问给viewpager父view设置onTouchListener设置整个viewpager可以滑动,我换成TouchDelgate后就无法实现想要的效果,这是为什么呢?
今天算是倒霉透了,老婆自己生气,没有机会发泄,于是让我穿上情侣衫,然后打了我一顿,理由是我和她撞衫了…尼玛!打人就不能找个好点的理由吗?