本文主要介绍如何利用ViewPager实现Gallery的画廊效果,即一屏显示多个Fragment
Demo APK 可以方便的查看效果,在各大应用商店搜索 trinea android 下载即可,如:Google Play。
示例代码可见ViewPager MultiFragmentDemo
效果图如下:

在使用Gallery的时候大家会发现有几个问题(1). 无法控制每次滑动只滑动一页, (2). Gallery默认第一个item居中,无法修改它与Gallery的左间距。ViewPager可以方便的解决上面两个问题,但默认却无法在屏幕上显示多个Fragment。
下面介绍如何利用ViewPager及android:clipChildren属性解决这个问题。
1、定义xml
<?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。
还可以
viewPager.setOffscreenPageLimit(TOTAL_COUNT); viewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin));
setOffscreenPageLimit表示设置缓存,这样左右拖动即可看见后面的Fragment。setPageMargin表示设置Fragment之间的间距
(2). FrameLayout设置
需要setOnTouchListener函数中将滑动滑动事件传递给viewPager,否则只有viewPager中间的view可以滑动,设置后整个viewPager都可以滑动。
具体代码如下:
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也会导致无法实现画廊而只是显示一屏。
getPageWidth,当设置返回为0.3f,滑动是出现屏幕跳动,闪屏如何解决,各位@Trinea
人家本家就自带接口,一函数搞定!@Overridepublic float getPageWidth(int position) { return (float) 0.3;}
不错,回头我了解下
这是能设置下一页显示一部分,上一页一部分无法显示的
getPageWidth,当设置返回为0.3f,滑动是出现屏幕跳动,闪屏如何解决,各位@Trinea
getPageWidth,当设置返回为0.3f,滑动是出现屏幕跳动,闪屏如何解决,各位@Trinea
为什么不能居中?
只有滑倒第一个图片能点击,多出来的图片怎么点击啊
需要处理外层布局的 Touch 事件
这个问题我也遇到了,怎么处理多出来的部分view的点击事件??跪求大神解答
跪求大神解答!
可能运行后出现viewpager的部分Fragment无法看见或是突然消失的问题,请确保RelativeLayout和ViewPager的android:clipChildren都设置为了false并且viewPager.setOffscreenPageLimit(TOTAL_COUNT);其中TOTAL_COUNT大于0您知道为什么会出现部分Fragment无法看见或是突然消失的情况吗?我的页面是动态获取的,一次获取4页左右,偶尔会出现下一页或上一页无法看见的情况,我已经按照上面说的要求做了,请问有可能是什么原因?
用hierarchyviewer看看实际布局是不是和想象的一样
出来的效果,当前显示的fragment是靠左的,只有右边看得到下一个fragment,左边(当前的上一个)fragment看不到,怎么解决呢?
拿上面的Demo改
拿上面的Demo改
求源码lvsandong@163.com/谢谢
https://github.com/Trinea/android-demo
具体应该怎么操作???
Pingback: 显示周边部分子页面的viewpager(一屏显示多个子页面) | riaos.com
Pingback: viewpager实现画廊(一屏多个Fragment)效果 - 移动端开发 - 无忧网
Pingback: viewpager实现画廊(一屏多个Fragment)效果 - 移动端开发 - 开发者