相信大家对于微信等社交应用的UI界面已经都很熟悉了,该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片,可以左右滑动浏览,最后进入应用,这一效果适用于多种项目中,相信今后开发应用一定会用得到。网路上也有不少这样的例子可以参考,不过看别人的代码是一回事,自己实际做起来又是另一回事,今天的这个微信的Demo是研究过多个类似的界面后自己动手去实现的效果,并且都加上了详细的注释(虽然有的多余),方便以后回顾一看就能看明白,只有真正亲自写一写,体会才会更深刻,例子中的图片都是在微信的APK中提取出来的,涉及到的知识点无外乎是ViewPager和Animation。
首先是开场闪屏的一个界面,使用handler控制该页面指定时间后进行跳转
接着是主要的部分,也就是一系列的功能介绍图片,主要是viewpager来实现,嵌套在上面的小圆点的跟随导航也是要实现的效果之一
而后的便是开门的动画效果了,这一块还是比较简单的,分别控制两幅图片的移动动画就可以实现
最后进入到我们的登陆界面,就是一个简单的微信登陆布局,代码就不贴了
OK了,以上就是微信第一次使用的时候开场功能介绍和动画,比较使用,适用于为自己发布新产品的时候作为导航简介,大家可以根据具体要求具体设计,不过大致思路都是这样的。
转自: http://blog.csdn.net/eyu8874521/article/details/8332366
首先是开场闪屏的一个界面,使用handler控制该页面指定时间后进行跳转
![1355906191_9462.jpg 1355906191_9462.jpg](http://www.apkbus.com/data/attachment/forum/201212/20/155008rvmnnjmumdul3ccn.jpg)
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
package
com.example.weichat.UI;
import
com.example.weichat.R;
import
android.app.Activity;
import
android.content.Intent;
import
android.os.Bundle;
import
android.os.Handler;
/** 开场欢迎动画 */
public
class
WelcomeA
extends
Activity {
@Override
public
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.strat);
//延迟两秒后执行run方法中的页面跳转
new
Handler().postDelayed(
new
Runnable() {
@Override
public
void
run() {
Intent intent =
new
Intent(WelcomeA.
this
, WhatsnewPagesA.
class
);
startActivity(intent);
WelcomeA.
this
.finish();
}
},
2000
);
|
接着是主要的部分,也就是一系列的功能介绍图片,主要是viewpager来实现,嵌套在上面的小圆点的跟随导航也是要实现的效果之一
![1355906198_6025.jpg 1355906198_6025.jpg](http://www.apkbus.com/data/attachment/forum/201212/20/155008t45uoz17jj1464rq.jpg)
![1355906203_2773.jpg 1355906203_2773.jpg](http://www.apkbus.com/data/attachment/forum/201212/20/155008lrrc979v17421rr4.jpg)
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
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
|
package
com.example.weichat.UI;
import
java.util.ArrayList;
import
android.app.Activity;
import
android.content.Intent;
import
android.os.Bundle;
import
android.support.v4.view.PagerAdapter;
import
android.support.v4.view.ViewPager;
import
android.support.v4.view.ViewPager.OnPageChangeListener;
import
android.view.LayoutInflater;
import
android.view.View;
import
android.view.ViewGroup;
import
android.view.ViewGroup.LayoutParams;
import
android.view.Window;
import
android.widget.ImageView;
import
com.example.weichat.R;
/** What's new 的导航界面 */
public
class
WhatsnewPagesA
extends
Activity {
/** Viewpager对象 */
private
ViewPager viewPager;
private
ImageView imageView;
/** 创建一个数组,用来存放每个页面要显示的View */
private
ArrayList<View> pageViews;
/** 创建一个imageview类型的数组,用来表示导航小圆点 */
private
ImageView[] imageViews;
/** 装显示图片的viewgroup */
private
ViewGroup viewPictures;
/** 导航小圆点的viewgroup */
private
ViewGroup viewPoints;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super
.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
LayoutInflater inflater = getLayoutInflater();
pageViews =
new
ArrayList<View>();
pageViews.add(inflater.inflate(R.layout.viewpager01,
null
));
pageViews.add(inflater.inflate(R.layout.viewpager02,
null
));
pageViews.add(inflater.inflate(R.layout.viewpager03,
null
));
pageViews.add(inflater.inflate(R.layout.viewpager04,
null
));
pageViews.add(inflater.inflate(R.layout.viewpager05,
null
));
pageViews.add(inflater.inflate(R.layout.viewpager06,
null
));
// 小圆点数组,大小是图片的个数
imageViews =
new
ImageView[pageViews.size()];
// 从指定的XML文件中加载视图
viewPictures = (ViewGroup) inflater.inflate(R.layout.viewpagers,
null
);
viewPager = (ViewPager) viewPictures.findViewById(R.id.guidePagers);
viewPoints = (ViewGroup) viewPictures.findViewById(R.id.viewPoints);
// 添加小圆点导航的图片
for
(
int
i =
0
; i < pageViews.size(); i++) {
imageView =
new
ImageView(WhatsnewPagesA.
this
);
imageView.setLayoutParams(
new
LayoutParams(
20
,
20
));
imageView.setPadding(
5
,
0
,
5
,
0
);
// 吧小圆点放进数组中
imageViews[i] = imageView;
// 默认选中的是第一张图片,此时第一个小圆点是选中状态,其他不是
if
(i ==
0
)
imageViews[i].setImageDrawable(getResources().getDrawable(
R.drawable.page_indicator_focused));
else
imageViews[i].setImageDrawable(getResources().getDrawable(
R.drawable.page_indicator_unfocused));
// 将imageviews添加到小圆点视图组
viewPoints.addView(imageViews[i]);
}
setContentView(viewPictures);
viewPager.setAdapter(
new
NavigationPageAdapter());
// 为viewpager添加监听,当view发生变化时的响应
viewPager.setOnPageChangeListener(
new
NavigationPageChangeListener());
}
// 导航图片view的适配器,必须要实现的是下面四个方法
class
NavigationPageAdapter
extends
PagerAdapter {
@Override
public
int
getCount() {
return
pageViews.size();
}
@Override
public
boolean
isViewFromObject(View arg0, Object arg1) {
return
arg0 == arg1;
}
// 初始化每个Item
@Override
public
Object instantiateItem(View container,
int
position) {
((ViewPager) container).addView(pageViews.get(position));
return
pageViews.get(position);
}
// 销毁每个Item
@Override
public
void
destroyItem(View container,
int
position, Object object) {
((ViewPager) container).removeView(pageViews.get(position));
}
}
// viewpager的监听器,主要是onPageSelected要实现
class
NavigationPageChangeListener
implements
OnPageChangeListener {
@Override
public
void
onPageScrollStateChanged(
int
arg0) {
}
@Override
public
void
onPageScrolled(
int
arg0,
float
arg1,
int
arg2) {
}
@Override
public
void
onPageSelected(
int
position) {
// 循环主要是控制导航中每个小圆点的状态
for
(
int
i =
0
; i < imageViews.length; i++) {
// 当前view下设置小圆点为选中状态
imageViews[i].setImageDrawable(getResources().getDrawable(
R.drawable.page_indicator_focused));
// 其余设置为飞选中状态
if
(position != i)
imageViews[i].setImageDrawable(getResources().getDrawable(
R.drawable.page_indicator_unfocused));
}
}
}
// 开始按钮方法,开始按钮在XML文件中onClick属性设置;
// 我试图把按钮在本activity中实例化并设置点击监听,但总是报错,使用这个方法后没有报错,原因没找到
public
void
startbutton(View v) {
Intent intent =
new
Intent(WhatsnewPagesA.
this
, WhatsnewAnimationA.
class
);
startActivity(intent);
WhatsnewPagesA.
this
.finish();
}
}
|
而后的便是开门的动画效果了,这一块还是比较简单的,分别控制两幅图片的移动动画就可以实现
![1355906250_7537.jpg 1355906250_7537.jpg](http://www.apkbus.com/data/attachment/forum/201212/20/155009g7w3dti9ww2002lt.jpg)
01
02
03
04
05
06
07
08
09
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
|
package
com.example.weichat.UI;
import
com.example.weichat.R;
import
android.app.Activity;
import
android.content.Intent;
import
android.os.Bundle;
import
android.os.Handler;
import
android.view.animation.Animation;
import
android.view.animation.AnimationSet;
import
android.view.animation.TranslateAnimation;
import
android.widget.ImageView;
/**导航过后的动画效果界面*/
public
class
WhatsnewAnimationA
extends
Activity {
private
ImageView img_left, img_right;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super
.onCreate(savedInstanceState);
setContentView(R.layout.whatnew_animation);
img_left = (ImageView) findViewById(R.id.doorpage_left);
img_right = (ImageView) findViewById(R.id.doorpage_right);
//创建一个AnimationSet对象
AnimationSet animLeft =
new
AnimationSet(
true
);
TranslateAnimation transLeft =
new
TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
-1f, Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0f);
//设置动画效果持续的时间
transLeft.setDuration(
2000
);
//将anim对象添加到AnimationSet对象中
animLeft.addAnimation(transLeft);
animLeft.setFillAfter(
true
);
img_left.startAnimation(transLeft);
transLeft.startNow();
//创建一个AnimationSet对象
AnimationSet animRight =
new
AnimationSet(
true
);
TranslateAnimation transRight =
new
TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
1f, Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0f);
//设置动画效果持续的时间
transRight.setDuration(
2000
);
//将anim对象添加到AnimationSet对象中
animRight.addAnimation(transRight);
animRight.setFillAfter(
true
);
img_right.startAnimation(transRight);
transRight.startNow();
new
Handler().postDelayed(
new
Runnable() {
@Override
public
void
run() {
// TODO Auto-generated method stub
Intent intent =
new
Intent(WhatsnewAnimationA.
this
, FirstPageA.
class
);
startActivity(intent);
WhatsnewAnimationA.
this
.finish();
}
},
1000
);
}
}
|
最后进入到我们的登陆界面,就是一个简单的微信登陆布局,代码就不贴了
![1355906254_9792.jpg 1355906254_9792.jpg](http://www.apkbus.com/data/attachment/forum/201212/20/155010bqc5mhuurvnargx1.jpg)
OK了,以上就是微信第一次使用的时候开场功能介绍和动画,比较使用,适用于为自己发布新产品的时候作为导航简介,大家可以根据具体要求具体设计,不过大致思路都是这样的。
转自: http://blog.csdn.net/eyu8874521/article/details/8332366