带导航点的ViewPager

 此处为显示的布局：

01	android:layout_width="match_parent"

02	android:layout_height="match_parent"

03	android:orientation="vertical" >

04	<RelativeLayout

05	android:layout_width="match_parent"

06	android:layout_height="match_parent" >

07

08	<android.support.v4.view.ViewPager

09	android:id="@+id/navigation_page"

10	android:layout_width="fill_parent"

11	android:layout_height="fill_parent" />

12

13	<LinearLayout

14	android:id="@+id/viewGroup"

15	android:layout_width="fill_parent"

16	android:layout_height="wrap_content"

17	android:layout_alignParentBottom="true"

18	android:layout_centerHorizontal="true"

19	android:layout_marginBottom="40dp"

20	android:gravity="center_horizontal"

21	android:orientation="horizontal" >

22	</LinearLayout>

23	</RelativeLayout>

此处为ViewPager中显示的布局:

1	<?xml version="1.0" encoding="utf-8"?>

01	android:layout_width="match_parent"

02	android:layout_height="match_parent" >

03	<ImageView

04	android:id="@+id/img_navigation_page"

05	android:layout_width="match_parent"

06	android:layout_height="match_parent"

07	android:scaleType="fitXY"/>

08

09	<RelativeLayout

10	android:layout_width="match_parent"

11	android:layout_height="match_parent" >

12

13	<ImageView

14	android:id="@+id/img_cancel"

15	android:layout_width="25dp"

16	android:layout_height="25dp"

17	android:layout_alignParentRight="true"

18	android:src="@drawable/ic_btn_chat_text" />

19

20

<Button

21	android:id="@+id/btn_enter"

22	android:layout_width="80dp"

23	android:layout_height="30dp"

24	android:layout_alignParentBottom="true"

25	android:layout_centerHorizontal="true"

26	android:layout_marginBottom="80dp"

27	android:background="@drawable/invite_btn_bg"

28	android:text="@string/trend_navigation"

29	android:textColor="@color/red"

30	android:textSize="15sp"

31	android:visibility="invisible" />

32	</RelativeLayout>

代码部分：

/* 装分页显示的view的数组 /

01	private ArrayList<View> pageViews;

02	private ImageView imageView;

03

04	/** 将小圆点的图片用数组表示 */

05	private ImageView[] imageViews;

06

07	// 包裹小圆点的LinearLayout

08	private LinearLayout mViewPoints;

09

10	//初始化要显示的页面，添加到view集合中

11	private void init(Context context) {

12	// 将要分页显示的View装入数组中

13	pageViews = new ArrayList<View>();

14	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,

15

null));

16	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,

17

null));

18	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,

19

null));

20	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,

21

null));

22	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,

23

null));

24	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,

25

null));

26

}

//初始化显示的控件，有viewpager和显示导航点的linearlayout

private void initView(Context context,View v) {

01	// 创建imageviews数组，大小是要显示的图片的数量

02	imageViews = new ImageView[pageViews.size()];

03	// 实例化小圆点的linearLayout和viewpager

04	mViewPoints = (LinearLayout) v.findViewById(R.id.viewGroup);

05	mViewPager = (ViewPager) v.findViewById(R.id.navigation_page);

06

07	// 添加小圆点的图片

08	for (int i = 0; i < pageViews.size(); i++) {

09	imageView = new ImageView(context);

10	// 设置小圆点imageview的参数

11	LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(

12

10, 10);

13	layoutParams.setMargins(5, 0, 5, 0);

14	imageView.setLayoutParams(layoutParams);// 创建一个宽高均为20 的布局

15	// 将小圆点layout添加到数组中

16	imageViews[i] = imageView;

17	// 默认选中的是第一张图片，此时第一个小圆点是选中状态，其他不是

18	if (i == 0) {

19	imageViews[i]

20	.setBackgroundResource(R.drawable.indicator_normal_pressed);

21

} else {

22	imageViews[i]

23	.setBackgroundResource(R.drawable.indicator_normal);

24

}

25

26	// 将imageviews添加到小圆点视图组

27	mViewPoints.addView(imageViews[i]);

28

}

29	// 设置viewpager的适配器和监听事件

30	mViewPager.setAdapter(new NavigationPageAdapter());

31	mViewPager.setOnPageChangeListener(new NavigationPageChangeListener());

32

33

}

34	//设置要显示的pageradapter类

35	private class NavigationPageAdapter extends PagerAdapter {

36

37	// 销毁position位置的界面

38

@Override

39	public void destroyItem(View v, int position, Object arg2) {

40	((ViewPager) v).removeView((View) arg2);

41

}

42

43	// 获取当前窗体界面数

44

@Override

45	public int getCount() {

46	return pageViews.size();

47

}

48

49	// 初始化position位置的界面

50

@Override

51	public Object instantiateItem(View v, int position) {

52	View contentView = pageViews.get(position);

53

/**

54	*显示页面的相关操作

55

**/

56	((ViewPager) v).addView(contentView, 0);

57	return pageViews.get(position);

58

}

59

60

@Override

61	public boolean isViewFromObject(View v, Object arg1) {

62	return v == arg1;

63

}

64

65

@Override

66	public void startUpdate(View arg0) {

67

}

68

69

@Override

70	public int getItemPosition(Object object) {

71	return super.getItemPosition(object);

72

}

73

74

}

75	//设置viewpager滑动的事件，实现导航点的滚动

private class NavigationPageChangeListener implements OnPageChangeListener {

01

@Override

02	public void onPageScrollStateChanged(int arg0) {

03

}

04

05

@Override

06	public void onPageScrolled(int arg0, float arg1, int arg2) {

07

}

08

09

@Override

10	public void onPageSelected(int position) {

11	for (int i = 0; i < imageViews.length; i++) {

12	imageViews[position]

13	.setBackgroundResource(R.drawable.indicator_normal_pressed);

14	// 不是当前选中的page，其小圆点设置为未选中的状态

15	if (position != i) {

16	imageViews[i]

17	.setBackgroundResource(R.drawable.indicator_normal);

18

}

19

}

20

}

21

22

}