android 仿ios画廊,viewpager实现画廊(一屏多个Fragment)效果

本文主要介绍如何利用ViewPager实现Gallery的画廊效果，即一屏显示多个Fragment。

效果图如下：

在 使用Gallery的时候大家会发现有几个问题(1). 无法控制每次滑动只滑动一页, (2). Gallery默认第一个item居中，无法修改它与Gallery的左间距。ViewPager可以方便的解决上面两个问题，但默认却无法在屏幕上显示 多个Fragment。

下面介绍如何利用ViewPager及android:clipChildren属性解决这个问题。

1、定义xml

android:id="@+id/pager_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:clipChildren="false"

android:layerType="software" >

android:id="@+id/view_pager"

android:layout_width="250dp"

android:layout_height="450dp"

android:layout_gravity="center"

android:clipChildren="false" />

复制代码

发现上面的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 com.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也会导致无法实现画廊而只是显示一屏。

【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

. 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

. 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

Android使用ViewPager实现左右循环滑动及轮播效果

边界的时候会看到一个不能翻页的动画,可能影响用户体验.此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其 ...

ViewPager+GridView实现首页导航栏布局分页效果

如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

Vue.js大屏数字滚动翻转效果

================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

viewpager中彻底性动态添加、删除Fragment

为了解决彻底删除fragment,我们要做的是:1.将FragmentPagerAdapter 替换成FragmentStatePagerAdapter,因为前者只要加载过,fragment中的视图就 ...

Android -- 使用ViewPager实现画廊效果

1,今天在微信推送文章看到实现画廊效果,感觉挺不错的,就来写写试试,先来看一下效果图: 上面的效果基本上可以用两个功能点来包含:ViewPager的切换动画.ImageView的倒影的实现 嗯,先来将 ...

ViewPager 详解(五)-----使用Fragment实现ViewPager滑动

前言:前几篇文章讲解了ViewPager的普通实现方法,但Android官方最推荐的一种实现方法却是使用fragment,下面我们使用fragment来重新实现一下第一篇

随机推荐

python , angular js 学习记录【1】

1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

win7 telnet

一.telnet连接 1.linux linux下可以通过net stat 查看22端口来确认端口是否开放. 然后在cmd中可通过telnet 10.0.200.151 22来连接. 2.win7 w ...

0429 Scrum团队成立与第6-7章读后感

Scrum团队成立: 团队名称:何首污大战污妖王 团队目标:每个人都尽可能的学到东西,共同进步. 团队口号:因为自信,所以成功! 团队照: 角色分配 产品负责人(梁毅乾): 决定开发内容和优先级排序, ...

【百度地图学习-一】初始化以及TextOverlay

一.百度地图的初始化 主要用到三个类: 1.BMapManager:使用地图sdk前需先初始化BMapManager.BMapManager是全局的,可为多个MapView共用,它需要地图模块创建前创 ...

IOS开发UI基础UIView

主要介绍下UIView得基本概念和一些属性的介绍至于属性的用户后面会由详细的介绍 -.UIView基本概念 1.什么是控件? 屏幕上所有的UI元素都叫做控件 (也有很多书中叫做视图 组件) 比如 按钮 ...

NOI2012 : 迷失游乐园

终于补完NOI2012了好开心~ 题目大意:给定一棵树或者环套外向树,求出从中随机选一条简单路径的期望长度,环上点数不超过20. 设 d[x]表示x的度数,ch[x]表示x孩子个数 up[x]表示x向 ...

nova-network创建初始化网络

nova-network创建初始化网络

Oracle静默安装-简单记录

一.与图形界面安装一样,检查如下条件:新建用户.组创建安装目录配置环境变量检查安装依赖包修改内核参数……前面这些操作都属于常规操作,不管是图形还是静默都需要处理. 二./home/oracle/dat ...

Spring Boot 2.0 图文教程 | 集成邮件发送功能

文章首发自个人微信公众号: 小哈学Java 个人网站: https://www.exception.site/springboot/spring-boots-send-mail 大家好,后续会间断地奉 ...

jquery的优良继承方法

说一下好处:这个封装函数可以可以实现子类继承父类原型对象里面的所有方法和属性,但是也留了第二条路,去继承父类构造函数的里面的东西. 两个参数分别是子类的构造函数,后面是父类构造函数 $.inherit ...