展会信息港展会大全

用ViewPager实现Gallery的画廊效果,即一屏显示多个Fragment
来源:互联网   发布日期:2015-10-02 16:50:48   浏览:9239次  

导读:本文主要介绍如何利用ViewPager实现Gallery的画廊效果,即一屏显示多个Fragment。具体代码可见ViewPager MultiFragment@Google Code,示例APK地址TrineaAndroidDemo.apk(其中的ViewPager Multi Fragment De......

本文主要介绍如何利用ViewPager实现Gallery的画廊效果,即一屏显示多个Fragment。具体代码可见ViewPager MultiFragment@Google Code,示例APK地址TrineaAndroidDemo.apk(其中的ViewPager Multi Fragment Demo)。

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

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

1、定义xml

Java

<?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>

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。

还可以

Java

viewPager.setOffscreenPageLimit(TOTAL_COUNT);

viewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin));

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都可以滑动。

具体代码如下:

Java部分实现

Java

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 intTOTAL_COUNT = 3;

private RelativeLayout viewPagerContainer;

private ViewPagerviewPager;

@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) {

}

}

}

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 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 intTOTAL_COUNT = 3;

private RelativeLayout viewPagerContainer;

private ViewPagerviewPager;

@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 Gallery Fragment

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港