基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧。好的,话不多说,回归正题。
这篇要实现的是一个仿微信的动画效果,虽然这种效果的实现在网上到处都有,但是我还是想站在中低端开发者的角度去告诉大家是如何实现的,当然实现的方式有很多,我也只是列出了我认为实现起来比较方便的一种方法,希望大家能够受用。
一、实现的效果图
有图才有真相,上图先:
点击按钮后出现动画效果,然后进入到另一个界面:
二 、程序的目录结构
三、具体的编码实现
1、 在主布局界面中加入ViewPager组件,以及底部的小点,activity_main.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
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
|
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
< android.support.v4.view.ViewPager
android:id = "@+id/viewpager"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
< LinearLayout
android:id = "@+id/ll"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_alignParentBottom = "true"
android:layout_centerHorizontal = "true"
android:layout_marginBottom = "24.0dip"
android:orientation = "horizontal"
< ImageView
android:id = "@+id/page0"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_vertical"
android:clickable = "true"
android:padding = "5dip"
android:src = "@drawable/page_indicator_focused"
< ImageView
android:id = "@+id/page1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_vertical"
android:clickable = "true"
android:padding = "5dip"
android:src = "@drawable/page_indicator_unfocused"
< ImageView
android:id = "@+id/page2"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_vertical"
android:clickable = "true"
android:padding = "5dip"
android:src = "@drawable/page_indicator_unfocused"
< ImageView
android:id = "@+id/page3"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_vertical"
android:clickable = "true"
android:padding = "5dip"
android:src = "@drawable/page_indicator_unfocused"
< ImageView
android:id = "@+id/page4"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_vertical"
android:clickable = "true"
android:padding = "5dip"
android:src = "@drawable/page_indicator_unfocused"
< ImageView
android:id = "@+id/page5"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_vertical"
android:clickable = "true"
android:padding = "5dip"
android:src = "@drawable/page_indicator_unfocused"
</ LinearLayout >
</ RelativeLayout >
|
2、接着在guide_view01.xml等几个布局页面中添加引导界面要显示的图片和控件,因为这几个布局界面都大同小异,所以在这里我就不一一贴出来了吧,有需要的同学可以直接下载源码,guide_view01.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<? xml
= "1.0"
= "UTF-8" ?>
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:background = "@drawable/w01"
android:orientation = "vertical"
< TextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:layout_alignParentTop = "true"
android:layout_marginTop = "35dp"
android:gravity = "center"
android:text = "@string/guide_text01"
android:textColor = "@color/TextColor"
android:textSize = "22sp"
</ RelativeLayout >
|
3、然后是要实现动画效果的布局界面,guide_door.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
|
<? xml
= "1.0"
= "UTF-8" ?>
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
< ImageView
android:id = "@+id/imageLeft"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:layout_alignParentLeft = "true"
android:scaleType = "fitXY"
android:src = "@drawable/w_left"
< ImageView
android:id = "@+id/imageRight"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:layout_alignParentRight = "true"
android:scaleType = "fitXY"
android:src = "@drawable/w_right"
android:visibility = "visible"
< TextView
android:id = "@+id/anim_text"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:layout_alignParentTop = "true"
android:layout_marginTop = "35dp"
android:gravity = "center"
android:text = "
android:textColor = "#fff"
android:textSize = "22sp"
</ RelativeLayout >
|
4、最后是完成动画效果之后进入的布局界面,activity_other.xml:
1
2
3
4
5
6
7
8
9
10
11
12
|
<? xml
= "1.0"
= "utf-8" ?>
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "vertical"
< TextView
android:id = "@+id/textView1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "亲,可以开始你的微信生活了!"
</ LinearLayout >
|
5、在这里还要创建一个xml文件来实现自定义按钮的效果,关于自定义按钮的效果实现我会在后面的文章中专题详细介绍,这里就不在赘述,start_weixin_btn.xml:
1
2
3
4
5
6
7
|
<? xml
= "1.0"
= "utf-8" ?>
< item
= "true"
= "true"
android:drawable = "@drawable/whatsnew_btn_pressed"
<!--按下时的效果--> < item
= "true"
= "@drawable/whatsnew_btn_nor"
<!--正常状态的效果-->
</ selector >
|
6、布局界面已经讲解完毕,接下来让我们进行详细的代码讲解,ViewPager适配器代码,ViewPagerAdapter.java:
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
import
import
import
import
/**
*
*
*/
public
extends
//界面列表
private
public
this .views
}
/**
*
*/
@Override
public
if
null )
return
}
return
;
}
/**
*
*/
@Override
public
int
((ViewPager) 0 );
return
}
/**
*
*/
@Override
public
return
}
/**
*
*/
@Override
public
int
((ViewPager)
}
}
|
7、主程序入口activity类,MainActivity.java:
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
package
import
import
import
import
import
import
import
import
import
import
import
/**
*
*
*/
public
extends
//
private
//
private
//
private
//定义各个界面View对象
private
//
private
//定义开始按钮对象
private
//
private
0 ;
@Override
protected
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
/**
*
*/
private
//实例化各个界面的布局对象
LayoutInflater this );
view1 null );
view2 null );
view3 null );
view4 null );
view5 null );
view6 null );
//
viewPager
//
views new
//
vpAdapter new
//
pointImage0
pointImage1
pointImage2
pointImage3
pointImage4
pointImage5
//实例化开始按钮
startBt
}
/**
*
*/
private
//
viewPager.setOnPageChangeListener( new
//
viewPager.setAdapter(vpAdapter);
//将要分页显示的View装入数组中
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
views.add(view5);
views.add(view6);
//
startBt.setOnClickListener( new
@Override
public
startbutton();
}
});
}
public
implements
@Override
public
int
switch
case
:
pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
break ;
case
:
pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
break ;
case
:
pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
break ;
case
:
pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
break ;
case
:
pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
break ;
case
:
pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
break ;
}
currIndex
//
//
//
}
@Override
public
int
}
@Override
public
int
float
int
}
}
/**
*
*/
private
Intent new
intent.setClass(MainActivity. this ,GuideViewDoor. class );
startActivity(intent);
this .finish();
}
}
|
PS:在这段代码中,有个地方需要注意,尽管我们写代码的时候一直很小心,但还是避免不了会犯一些低级的错误,以至于调试耽误了时间
1
2
|
//实例化开始按钮
startBt
|
这是最后一个布局界面中的一个开始按钮,由于在findvViewById()方法前面忘记使用了view6来调用该方法,以至于模拟器报出空指针异常。
8、实现动画效果的入口activity类,在这个类中主要实现了点击开始按钮后实现一个动画效果来达到进入另一个界面的目的,该类中的主要使用了动画类。我会在后面的章节中以专题的形式来介绍动画这一块的类容,所以这里也不再赘述,GuideViewDoor.java:
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
|
package
import
import
import
import
import
import
import
import
import
import
import
/**
*
*
*/
public
extends
//定义左右两张图片对象
private
//定义一个文本对象
private
@Override
public
super .onCreate(savedInstanceState);
setContentView(R.layout.guide_door);
//实例化对象
mLeft
mRight
mText
//实例化动画对象
AnimationSet new
true );
//实例化位移动画对象
TranslateAnimation new
//设置动画持续时间
mytranslateanim.setDuration( 2000 );
//设置启动时间
anim.setStartOffset( 800 );
//将位移动画添加进动画效果中
anim.addAnimation(mytranslateanim);
//动画结束后,保留在终止位
anim.setFillAfter( true );
//左边图启动该动画效果
mLeft.startAnimation(anim);
AnimationSet new
true );
TranslateAnimation new
mytranslateanim1.setDuration( 1500 );
anim1.addAnimation(mytranslateanim1);
anim1.setStartOffset( 800 );
anim1.setFillAfter( true );
mRight.startAnimation(anim1);
AnimationSet new
true );
ScaleAnimation new
0 .5f,Animation.RELATIVE_TO_SELF, 0 .5f);
myscaleanim.setDuration( 1000 );
AlphaAnimation new
1 , 0 .0001f);
myalphaanim.setDuration( 1500 );
anim2.addAnimation(myscaleanim);
anim2.addAnimation(myalphaanim);
anim2.setFillAfter( true );
mText.startAnimation(anim2);
new
new
@Override
public
Intent new
this ,OtherActivity. class );
startActivity(intent);
GuideViewDoor. this .finish();
}
}, 2300 );
}
}
|
9、最后是另一个activity类,我为了只是达到进入到另一个界面的这种效果,所以代码比较简单,就是调用了一个layout布局页面,OtherActivity.java:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
package
import
import
/**
*
*
*/
public
extends
@Override
protected
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_other);
}
}
|
10、最后大家别忘了在AndroidManifest.xml清单文件中为程序添加GuideViewDoor、OtherActivity这两个activity,否则会报出异常。