【Android UI设计与开发】第04期：引导界面（四）仿人人网V5.9.2最新版引导界面

这一篇我将会以人人网的引导界面为实例来展开详细的讲解，人人网的引导界面比较的新颖，不同于其他应用程序千篇一律的靠滑动来引导用户，而是以一个一个比较生动形象的动画效果展示在用户们的面前，有一种给人眼前一亮的感觉，话不多说，进入正题。

一、实现的效果图

欢迎界面：

引导界面1

引导界面 2

引导界面 3

二 、项目的目录结构

三、具体的编码实现

1、欢迎界面的xml布局，activity_welcome：

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:background="@drawable/v5_6_2_welcome"
6. android:orientation="vertical" />

2、引导界面的xml布局，activity_guide.xml：

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6. <ImageView
7. android:id="@+id/iv_guide_picture"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:layout_weight="1.0"
11. android:scaleType="fitXY" />
12. <LinearLayout
13. android:id="@+id/ll_bottom_action_bar"
14. android:layout_width="fill_parent"
15. android:layout_height="wrap_content"
16. android:layout_alignParentBottom="true"
17. android:orientation="horizontal"
18. android:padding="7dip" >
19. <Button
20. android:id="@+id/btn_register"
21. android:layout_width="fill_parent"
22. android:layout_height="45dip"
23. android:layout_weight="1.5"
24. android:background="@drawable/guide_btn_blue"
25. android:gravity="center"
26. android:singleLine="true"
27. android:text="注  册"
28. android:textColor="#FFFFFF"
29. android:textSize="15.0sp" />
30. <Button
31. android:id="@+id/btn_look_at_the_people_i_know"
32. android:layout_width="fill_parent"
33. android:layout_height="45dip"
34. android:layout_marginLeft="8dip"
35. android:layout_marginRight="8dip"
36. android:layout_weight="1.0"
37. android:background="@drawable/guide_btn_white"
38. android:gravity="center"
39. android:singleLine="true"
40. android:text="看看我认识的人"
41. android:textColor="#000000"
42. android:textSize="15.0sp" />
43. <Button
44. android:id="@+id/btn_login"
45. android:layout_width="fill_parent"
46. android:layout_height="45dip"
47. android:layout_weight="1.5"
48. android:background="@drawable/guide_btn_blue"
49. android:gravity="center"
50. android:singleLine="true"
51. android:text="登  录"
52. android:textColor="#FFFFFF"
53. android:textSize="15.0sp" />
54. </LinearLayout>
55. </RelativeLayout>

3、在这里还要创建两个xml资源文件文件来实现自定义按钮的效果，关于自定义按钮的效果实现我会在后面的UI专题详细介绍，这里就不在赘述，guide_btn_blue.xml：

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
3. <item android:drawable="@drawable/v5_0_1_guide_blue_default" android:state_focused="true" android:state_pressed="false"/>
4. <item android:drawable="@drawable/v5_0_1_guide_blue_press" android:state_pressed="true"/>
5. <item android:drawable="@drawable/v5_0_1_guide_blue_default"/>
6. </selector>

guide_btn_white：

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
3. <item android:drawable="@drawable/v5_0_1_guide_black_default" android:state_focused="true" android:state_pressed="false"/>
4. <item android:drawable="@drawable/v5_0_1_guide_black_press" android:state_pressed="true"/>
5. <item android:drawable="@drawable/v5_0_1_guide_black_default"/>
6. </selector>

4、然后是动画效果的xml资源文件，关于自定义动画效果的实现我也会在后面的UI专题中详细介绍，这里也就不再赘述渐入动画资源文件，guide_fade_in.xml：

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android" >
3. <alpha android:fromAlpha="0.0"
4. android:toAlpha="1.0" />
5. </set>

渐隐动画资源文件，guide_fade_out.xml：

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android" >
3. <scale
4. android:fillAfter="false"
5. android:fromXScale="1.1"
6. android:fromYScale="1.1"
7. android:interpolator="@android:anim/decelerate_interpolator"
8. android:pivotX="50.0%"
9. android:pivotY="50.0%"
10. android:toXScale="1.1"
11. android:toYScale="1.1" />
12. <alpha
13. xmlns:android="http://schemas.android.com/apk/res/android"
14. android:fromAlpha="1.0"
15. android:toAlpha="0.0" />
16. </set>

放大动画资源文件,guide_fade_in_scale：

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android" >
3. <scale
4. android:fillAfter="false"
5. android:fromXScale="1.0"
6. android:fromYScale="1.0"
7. android:interpolator="@android:anim/decelerate_interpolator"
8. android:pivotX="50.0%"
9. android:pivotY="50.0%"
10. android:toXScale="1.1"
11. android:toYScale="1.1"/>
12. </set>

5、开始启动的欢迎界WelcomeActivity.java：

[java] view
plaincopy

1. package com.yangyu.myguideview03;
2. import android.app.Activity;
3. import android.content.Intent;
4. import android.os.Bundle;
5. import android.os.CountDownTimer;
6. /**
7. * @author yangyu
8. *  功能描述：欢迎界面Activity（Logo）
9. */
10. public class WelcomeActivity extends Activity {
11. @Override
12. public void onCreate(Bundle savedInstanceState) {
13. super.onCreate(savedInstanceState);
14. setContentView(R.layout.activity_welcome);
15. /**
16. * millisInFuture:从开始调用start()到倒计时完成并onFinish()方法被调用的毫秒数
17. * countDownInterval:接收onTick(long)回调的间隔时间
18. */
19. new CountDownTimer(5000, 1000) {
20. @Override
21. public void onTick(long millisUntilFinished) {
22. }
23. @Override
24. public void onFinish() {
25. Intent intent = new Intent(WelcomeActivity.this, GuideActivity.class);
26. startActivity(intent);
27. WelcomeActivity.this.finish();
28. }
29. }.start();
30. }
31. }

6、引导界面，GuideActivity.java：

[java] view
plaincopy

1. package com.yangyu.myguideview03;
2. import android.app.Activity;
3. import android.graphics.drawable.Drawable;
4. import android.os.Bundle;
5. import android.view.View;
6. import android.view.View.OnClickListener;
7. import android.view.animation.Animation;
8. import android.view.animation.Animation.AnimationListener;
9. import android.view.animation.AnimationUtils;
10. import android.widget.Button;
11. import android.widget.ImageView;
12. import android.widget.Toast;
13. /**
14. * @author yangyu
15. * 功能描述：导引界面(每张图片都执行的动画顺序，渐现、放大和渐隐，结束后切换图片和文字
16. * 又开始执行 渐现、放大和渐隐,当最后一张执行完渐隐，切换到第一张，从而达到循环效果)
17. */
18. public class GuideActivity extends Activity implements OnClickListener{
19. //定义注册、登录和看看我认识的人按钮
20. private Button btnRegister,btnLogin,btnIKnowPeople;
21. //显示图片的ImageView组件
22. private ImageView ivGuidePicture;
23. //要展示的一组图片资源
24. private Drawable[] pictures;
25. //每张展示图片要执行的一组动画效果
26. private Animation[] animations;
27. //当前执行的是第几张图片（资源索引）
28. private int currentItem = 0;
29. @Override
30. protected void onCreate(Bundle savedInstanceState) {
31. super.onCreate(savedInstanceState);
32. setContentView(R.layout.activity_guide);
33. initView();
34. initData();
35. }
36. /**
37. * 初始化组件
38. */
39. private void initView(){
40. //实例化ImageView引导图片
41. ivGuidePicture = (ImageView) findViewById(R.id.iv_guide_picture);
42. //实例化按钮
43. btnRegister = (Button) findViewById(R.id.btn_register);
44. btnIKnowPeople = (Button) findViewById(R.id.btn_look_at_the_people_i_know);
45. btnLogin = (Button) findViewById(R.id.btn_login);
46. //实例化引导图片数组
47. pictures = new Drawable[] { getResources().getDrawable(R.drawable.v5_3_0_guide_pic1),getResources().getDrawable(R.drawable.v5_3_0_guide_pic2),
48. getResources().getDrawable(R.drawable.v5_3_0_guide_pic3)};
49. //实例化动画效果数组
50. animations = new Animation[] { AnimationUtils.loadAnimation(this, R.anim.guide_fade_in),
51. AnimationUtils.loadAnimation(this, R.anim.guide_fade_in_scale),
52. AnimationUtils.loadAnimation(this, R.anim.guide_fade_out) };
53. }
54. /**
55. * 初始化数据
56. */
57. private void initData(){
58. //给按钮设置监听
59. btnRegister.setOnClickListener(this);
60. btnIKnowPeople.setOnClickListener(this);
61. btnLogin.setOnClickListener(this);
62. //给每个动画效果设置播放时间
63. animations[0].setDuration(1500);
64. animations[1].setDuration(3000);
65. animations[2].setDuration(1500);
66. //给每个动画效果设置监听事件
67. animations[0].setAnimationListener(new GuideAnimationListener(0));
68. animations[1].setAnimationListener(new GuideAnimationListener(1));
69. animations[2].setAnimationListener(new GuideAnimationListener(2));
70. //设置图片动画初始化默认值为0
71. ivGuidePicture.setImageDrawable(pictures[currentItem]);
72. ivGuidePicture.startAnimation(animations[0]);
73. }
74. /**
75. * 实现了动画监听接口，重写里面的方法
76. */
77. class GuideAnimationListener implements AnimationListener {
78. private int index;
79. public GuideAnimationListener(int index) {
80. this.index = index;
81. }
82. @Override
83. public void onAnimationStart(Animation animation) {
84. }
85. //重写动画结束时的监听事件，实现了动画循环播放的效果
86. @Override
87. public void onAnimationEnd(Animation animation) {
88. if (index < (animations.length - 1)) {
89. ivGuidePicture.startAnimation(animations[index + 1]);
90. } else {
91. currentItem++;
92. if (currentItem > (pictures.length - 1)) {
93. currentItem = 0;
94. }
95. ivGuidePicture.setImageDrawable(pictures[currentItem]);
96. ivGuidePicture.startAnimation(animations[0]);
97. }
98. }
99. @Override
100. public void onAnimationRepeat(Animation animation) {
101. }
102. }
103. @Override
104. public void onClick(View v) {
105. switch (v.getId()) {
106. case R.id.btn_register:
107. Toast.makeText(this, "点击了注册按钮", Toast.LENGTH_SHORT).show();
108. break;
109. case R.id.btn_look_at_the_people_i_know:
110. Toast.makeText(this, "点击了我认识的人按钮", Toast.LENGTH_SHORT).show();
111. break;
112. case R.id.btn_login:
113. Toast.makeText(this, "点击了登录按钮", Toast.LENGTH_SHORT).show();
114. break;
115. default:
116. break;
117. }
118. }
119. }

下一篇将会对整个引导界面的开发专题做一个完结篇，敬请期待。

源码下载地址