本文主要介绍如何利用ViewPager实现Gallery的画廊效果,即一屏显示多个Fragment
示例APK可从这些地址下载:Google Play, 360手机助手, 百度手机助手, 小米应用商店, 豌豆荚(其中的ViewPager Multi Fragment Demo)
示例代码可见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也会导致无法实现画廊而只是显示一屏。