使用ViewPager实现启动引导页
来源:互联网 发布:男士围巾织法 知乎 编辑:程序博客网 时间:2024/06/15 09:03
我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等。
一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢。
今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果。
先上图:
下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.
先上XML.
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
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<RelativeLayout
xmlns:android=
"http://schemas.android.com/apk/res/android"
xmlns:tools=
"http://schemas.android.com/tools"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
tools:context=
"com.example.nanchen.guidepagedemo.GuideActivity"
>
<android.support.v4.view.ViewPager
android:id=
"@+id/guide_vp"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:id=
"@+id/guide_ll_point"
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:orientation=
"horizontal"
android:layout_alignParentBottom=
"true"
android:layout_marginBottom=
"40dp"
android:gravity=
"center_horizontal"
>
</LinearLayout>
<ImageButton
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:id=
"@+id/guide_ib_start"
android:src=
"@mipmap/btn_start"
android:layout_centerHorizontal=
"true"
android:layout_above=
"@+id/guide_ll_point"
android:background=
"@null"
android:visibility=
"gone"
/>
</RelativeLayout>
在准备一个Adapter,这个没什么好说的、
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
package
com.example.nanchen.guidepagedemo;
import
android.support.v4.view.PagerAdapter;
import
android.view.View;
import
android.view.ViewGroup;
import
java.util.List;
/**
* Created by 南尘 on 2016/7/10.
*/
public
class
GuidePageAdapter
extends
PagerAdapter {
private
List<View> viewList;
public
GuidePageAdapter(List<View> viewList) {
this
.viewList = viewList;
}
/**
* @return 返回页面的个数
*/
@Override
public
int
getCount() {
if
(viewList !=
null
){
return
viewList.size();
}
return
0
;
}
/**
* 判断对象是否生成界面
* @param view
* @param object
* @return
*/
@Override
public
boolean
isViewFromObject(View view, Object object) {
return
view == object;
}
/**
* 初始化position位置的界面
* @param container
* @param position
* @return
*/
@Override
public
Object instantiateItem(ViewGroup container,
int
position) {
container.addView(viewList.get(position));
return
viewList.get(position);
}
@Override
public
void
destroyItem(ViewGroup container,
int
position, Object object) {
container.removeView(viewList.get(position));
}
}
最后就是我们的Activity了
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
package
com.example.nanchen.guidepagedemo;
import
android.content.Intent;
import
android.os.Bundle;
import
android.support.v4.view.ViewPager;
import
android.support.v7.app.AppCompatActivity;
import
android.view.View;
import
android.view.ViewGroup;
import
android.view.Window;
import
android.widget.ImageButton;
import
android.widget.ImageView;
import
android.widget.LinearLayout;
import
java.util.ArrayList;
import
java.util.List;
/**
* 实现首次启动的引导页面
*/
public
class
GuideActivity
extends
AppCompatActivity
implements
ViewPager.OnPageChangeListener{
private
ViewPager vp;
private
int
[]imageIdArray;
//图片资源的数组
private
List<View> viewList;
//图片资源的集合
private
ViewGroup vg;
//放置圆点
//实例化原点View
private
ImageView iv_point;
private
ImageView []ivPointArray;
//最后一页的按钮
private
ImageButton ib_start;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_guide);
ib_start = (ImageButton) findViewById(R.id.guide_ib_start);
ib_start.setOnClickListener(
new
View.OnClickListener() {
@Override
public
void
onClick(View v) {
startActivity(
new
Intent(GuideActivity.
this
,MainActivity.
class
));
finish();
}
});
//加载ViewPager
initViewPager();
//加载底部圆点
initPoint();
}
/**
* 加载底部圆点
*/
private
void
initPoint() {
//这里实例化LinearLayout
vg = (ViewGroup) findViewById(R.id.guide_ll_point);
//根据ViewPager的item数量实例化数组
ivPointArray =
new
ImageView[viewList.size()];
//循环新建底部圆点ImageView,将生成的ImageView保存到数组中
int
size = viewList.size();
for
(
int
i =
0
;i<size;i++){
iv_point =
new
ImageView(
this
);
iv_point.setLayoutParams(
new
ViewGroup.LayoutParams(
20
,
20
));
iv_point.setPadding(
30
,
0
,
30
,
0
);
//left,top,right,bottom
ivPointArray[i] = iv_point;
//第一个页面需要设置为选中状态,这里采用两张不同的图片
if
(i ==
0
){
iv_point.setBackgroundResource(R.mipmap.full_holo);
}
else
{
iv_point.setBackgroundResource(R.mipmap.empty_holo);
}
//将数组中的ImageView加入到ViewGroup
vg.addView(ivPointArray[i]);
}
}
/**
* 加载图片ViewPager
*/
private
void
initViewPager() {
vp = (ViewPager) findViewById(R.id.guide_vp);
//实例化图片资源
imageIdArray =
new
int
[]{R.mipmap.guide1,R.mipmap.guide2,R.mipmap.guide3};
viewList =
new
ArrayList<>();
//获取一个Layout参数,设置为全屏
LinearLayout.LayoutParams params =
new
LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);
//循环创建View并加入到集合中
int
len = imageIdArray.length;
for
(
int
i =
0
;i<len;i++){
//new ImageView并设置全屏和图片资源
ImageView imageView =
new
ImageView(
this
);
imageView.setLayoutParams(params);
imageView.setBackgroundResource(imageIdArray[i]);
//将ImageView加入到集合中
viewList.add(imageView);
}
//View集合初始化好后,设置Adapter
vp.setAdapter(
new
GuidePageAdapter(viewList));
//设置滑动监听
vp.setOnPageChangeListener(
this
);
}
@Override
public
void
onPageScrolled(
int
position,
float
positionOffset,
int
positionOffsetPixels) {
}
/**
* 滑动后的监听
* @param position
*/
@Override
public
void
onPageSelected(
int
position) {
//循环设置当前页的标记图
int
length = imageIdArray.length;
for
(
int
i =
0
;i<length;i++){
ivPointArray[position].setBackgroundResource(R.mipmap.full_holo);
if
(position != i){
ivPointArray[i].setBackgroundResource(R.mipmap.empty_holo);
}
}
//判断是否是最后一页,若是则显示按钮
if
(position == imageIdArray.length -
1
){
ib_start.setVisibility(View.VISIBLE);
}
else
{
ib_start.setVisibility(View.GONE);
}
}
@Override
public
void
onPageScrollStateChanged(
int
state) {
}
}
总的来说实现流程比较简单。
1)先加载ViewPager,新建ImageView并添加到View集合中,然后设置Adapter并显示。
2)然后加载LinearLayout,放置原点图片,同样新建ImageView设置背景后放在圆点图集合中。
3)最后设置ViewPager的滑动监听事件,在滑动完成的监听OnPageSelected方法中,设置对应的圆点为选中,如果是最后一页,则显示按钮。
阅读全文
0 0
- 使用ViewPager实现启动引导页
- 使用ViewPager实现引导页
- 使用viewPager实现引导页
- 利用ViewPager实现启动引导页
- android使用ViewPager实现欢迎引导页
- android使用ViewPager实现引导页效果
- 152.n1-使用ViewPager实现引导页
- ViewPager实现引导页
- ViewPager实现引导页
- ViewPager实现引导页
- ViewPager 实现引导页
- ViewPager实现引导页
- ViewPager实现引导页
- 【Android】利用ViewPager控件实现软件启动引导页
- 使用ViewPager设置app首次启动引导页
- Android ViewPager实现引导页
- 利用viewpager实现引导页
- android引导页viewpager实现
- #正念奇迹#ZQ0004《消除压力,从大脑开始》
- 新的起点
- Oracle创建表空间、创建用户并指定该用户的表空间、授权
- Python将list中的每一项的首字母大写
- 关于《Android开发艺术探索》的Activity启动模式的讨论
- 使用ViewPager实现启动引导页
- UNIX操作系统进程
- (转)JAVA WEB学习总结牛人分享
- QT5 for android 实现横屏锁定
- 单机 并发TCP连接上限(不是65536)
- 使用TextInputLayout创建一个登陆界面
- Java实现二叉树基本操作
- 微信公众平台开发[4] —— ThinkPHP 框架下微信支付
- 蓝桥杯