带导航点的ViewPager
时间：2014-03-27 19:22:47
手机看文章
扫描二维码
随时随地手机看文章
[导读] 此处为显示的布局： 01 android:layout_width="match_parent" 02 android:layout_hei
此处为显示的布局：
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 |
} |
下载文档
