【Android UI设计与开发】第03期:引导界面(三)仿微信引导界面以及动画效果
基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是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,否则会报出异常。
【Android UI设计与开发】第03期:引导界面(三)仿微信引导界面以及动画效果的更多相关文章
- 【Android UI设计与开发】6.底部菜单栏(三)使用Fragment+PopupWindow仿QQ空间最新版底部菜单栏
直接看栗子吧,效果基本实现,界面微调和弹窗的优化,去做的话会很耗时说,暂时就酱紫了.上传效果动态图太大了,直接手机截图的效果图如下: 至于代码的实现主要就是自定义的菜单栏,和用 PopupWindow ...
- 【Android UI设计与开发】第05期:引导界面(五)实现应用程序只启动一次引导界面
[Android UI设计与开发]第05期:引导界面(五)实现应用程序只启动一次引导界面 jingqing 发表于 2013-7-11 14:42:02 浏览(229501) 这篇文章算是对整个引导界 ...
- 【转】【Android UI设计与开发】之详解ActionBar的使用,androidactionbar
原文网址:http://www.bkjia.com/Androidjc/895966.html [Android UI设计与开发]之详解ActionBar的使用,androidactionbar 详解 ...
- 【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面
本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载 ...
- 【Android UI设计与开发】第01期:引导界面(一)ViewPager介绍和使用详解
做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受 ...
- 【Android UI设计与开发】第04期:引导界面(四)仿人人网V5.9.2最新版引导界面
这一篇我将会以人人网的引导界面为实例来展开详细的讲解,人人网的引导界面比较的新颖,不同于其他应用程序千篇一律的靠滑动来引导用户,而是以一个一个比较生动形象的动画效果展示在用户们的面前,有一种给人眼前一 ...
- 【转】【Android UI设计与开发】第07期:底部菜单栏(二)Fragment的详细介绍和使用方法
原始地址:http://blog.csdn.net/yangyu20121224/article/category/1431917/1 由于TabActivity在Android4.0以后已经被完全弃 ...
- 【Android UI设计与开发】第17期:滑动菜单栏(二)开源项目SlidingMenu的示例
通过上一篇文章的讲解,相信大家对于开源项目SlidingMenu都有了一个比较初步的了解(不了解的可以参考上 一篇文章),那么从这一章开始,博主将会以SlidingMenu为重心,给大家带来非常丰富的 ...
- 【Android UI设计与开发】3.引导界面(三)实现应用程序只启动一次引导界面
大部分的引导界面基本上都是千篇一律的,只要熟练掌握了一个,基本上也就没什么好说的了,要想实现应用程序只启动一次引导界面这样的效果,只要使用SharedPreferences类,就会让程序变的非常简单, ...
随机推荐
- 使用 Azure 资源管理器向 Windows VM 应用策略
通过使用策略,组织可以在整个企业中强制实施各种约定和规则. 强制实施所需行为有助于消除风险,同时为组织的成功做出贡献. 本文介绍如何使用 Azure 资源管理器策略,为组织中的虚拟机定义所需的行为. ...
- Visual Studio 2012自动添加注释(如版权信息等)
转自:http://blog.163.com/guohuan88328@126/blog/static/69430778201381553150156/ 如何使用Visual Studio 2012给 ...
- Linux 辅助命令
0. 说明 记录在 Linux 使用过程中的一些有帮助的命令 1. 命令集合 [1.1 错误输出重定向] # 将错误信息重定向到 /dev/null source /xxx >/dev/null ...
- SHGetFileInfo 报错 异常 问题
查看代码是否使用了 ::CoInitializeEx(NULL, COINIT_MULTITHREADED); 如果是,换成在每个线程调用 ::CoInitialize(NULL); 真够蛋疼的,查了 ...
- 【优质】React的学习资源
React的学习资源 github 地址: https://github.com/LeuisKen/react-collection https://github.com/reactnativecn/ ...
- PyQt5--QToggleButton
# -*- coding:utf-8 -*- ''' Created on Sep 20, 2018 @author: SaShuangYiBing Comment: '' import sys fr ...
- postgresql+postgis+pgrouting实现最短路径查询(1)---线数据的处理和建立拓扑
准备一个线shp数据,并将其导入postgres里面,postgres安装postgis和pgrouting两个插件(方法见http://www.cnblogs.com/nidaye/p/455352 ...
- MySQL多实例.md
MySQL5.7多实例配置 数据库实例1配置文件 # cat /etc/my.cnf [mysqld] datadir=/data/mysql port=3306 socket=/tmp/mysql. ...
- AnyHashable类型擦除的原因:set和dictory需要指定一个确定的类型
AnyHashable 属于无关联类型的擦除. 将具体类型的类型信息擦除掉了,只剩下协议类型的信息暴露出来. 类型擦除实践:将相同协议的不同实现屏蔽起来,暴露出类型的共同特征(协议接口). A typ ...
- Netty入门(二)时间服务器及客户端
在这个例子中,我在服务器和客户端连接被创立时发送一个消息,然后在客户端解析收到的消息并输出.并且,在这个项目中我使用 POJO 代替 ByteBuf 来作为传输对象. 一.服务器实现 1. 首先我们 ...