Android中启动界面左右滑动实例
一、首先看一下界面
下面是我的实现，一个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 Activity
implements ViewPager.OnPageChangeListener{
private
ViewPager vp;
private
int []imageIdArray;//图片资源的数组
private
List<View> viewList;//图片资源的集合
private
ViewGroup vg;//放置圆点
//实例化原点View
private
ImageView iv_point;
private
ImageView []ivPointArray;
@Override
protected
void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_guide);
//加载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);
}
}
}
@Override
public
void onPageScrollStateChanged(int
state) {
}
} |