转载请注明出处：http://blog.csdn.net/yangyu20121224/article/details/8985457       

基于前两篇比较简单的实例做铺垫之后，这一篇我们来实现一个稍微复杂一点的引导界面的效果，当然也只是稍微复杂了一点，对于会的人来说当然还是so easy！正所谓会者不难，难者不会，大概说的就是这个意思了吧。好的，话不多说，回归正题。

这篇要实现的是一个仿微信的动画效果，虽然这种效果的实现在网上到处都有，但是我还是想站在中低端开发者的角度去告诉大家是如何实现的，当然实现的方式有很多，我也只是列出了我认为实现起来比较方便的一种方法，希望大家能够受用。

   

一、实现的效果图


有图才有真相，上图先：

点击按钮后出现动画效果，然后进入到另一个界面：

二 、程序的目录结构


三、具体的编码实现


1、  在主布局界面中加入ViewPager组件，以及底部的小点，activity_main.xml:

[html] view plaincopy
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content" >
  5. <android.support.v4.view.ViewPager
  6. android:id="@+id/viewpager"
  7. android:layout_width="fill_parent"
  8. android:layout_height="fill_parent" />
  9. <LinearLayout
  10. android:id="@+id/ll"
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content"
  13. android:layout_alignParentBottom="true"
  14. android:layout_centerHorizontal="true"
  15. android:layout_marginBottom="24.0dip"
  16. android:orientation="horizontal" >
  17. <ImageView
  18. android:id="@+id/page0"
  19. android:layout_width="wrap_content"
  20. android:layout_height="wrap_content"
  21. android:layout_gravity="center_vertical"
  22. android:clickable="true"
  23. android:padding="5dip"
  24. android:src="@drawable/page_indicator_focused" />
  25. <ImageView
  26. android:id="@+id/page1"
  27. android:layout_width="wrap_content"
  28. android:layout_height="wrap_content"
  29. android:layout_gravity="center_vertical"
  30. android:clickable="true"
  31. android:padding="5dip"
  32. android:src="@drawable/page_indicator_unfocused" />
  33. <ImageView
  34. android:id="@+id/page2"
  35. android:layout_width="wrap_content"
  36. android:layout_height="wrap_content"
  37. android:layout_gravity="center_vertical"
  38. android:clickable="true"
  39. android:padding="5dip"
  40. android:src="@drawable/page_indicator_unfocused" />
  41. <ImageView
  42. android:id="@+id/page3"
  43. android:layout_width="wrap_content"
  44. android:layout_height="wrap_content"
  45. android:layout_gravity="center_vertical"
  46. android:clickable="true"
  47. android:padding="5dip"
  48. android:src="@drawable/page_indicator_unfocused" />
  49. <ImageView
  50. android:id="@+id/page4"
  51. android:layout_width="wrap_content"
  52. android:layout_height="wrap_content"
  53. android:layout_gravity="center_vertical"
  54. android:clickable="true"
  55. android:padding="5dip"
  56. android:src="@drawable/page_indicator_unfocused" />
  57. <ImageView
  58. android:id="@+id/page5"
  59. android:layout_width="wrap_content"
  60. android:layout_height="wrap_content"
  61. android:layout_gravity="center_vertical"
  62. android:clickable="true"
  63. android:padding="5dip"
  64. android:src="@drawable/page_indicator_unfocused" />
  65. </LinearLayout>
  66. </RelativeLayout>

2、接着在guide_view01.xml等几个布局页面中添加引导界面要显示的图片和控件，因为这几个布局界面都大同小异，所以在这里我就不一一贴出来了吧，有需要的同学可以直接下载源码，guide_view01.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:background="@drawable/w01"
  6. android:orientation="vertical" >
  7. <TextView
  8. android:layout_width="fill_parent"
  9. android:layout_height="wrap_content"
  10. android:layout_alignParentTop="true"
  11. android:layout_marginTop="35dp"
  12. android:gravity="center"
  13. android:text="@string/guide_text01"
  14. android:textColor="@color/TextColor"
  15. android:textSize="22sp" />
  16. </RelativeLayout>

3、然后是要实现动画效果的布局界面，guide_door.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. <ImageView
  6. android:id="@+id/imageLeft"
  7. android:layout_width="fill_parent"
  8. android:layout_height="fill_parent"
  9. android:layout_alignParentLeft="true"
  10. android:scaleType="fitXY"
  11. android:src="@drawable/w_left" />
  12. <ImageView
  13. android:id="@+id/imageRight"
  14. android:layout_width="fill_parent"
  15. android:layout_height="fill_parent"
  16. android:layout_alignParentRight="true"
  17. android:scaleType="fitXY"
  18. android:src="@drawable/w_right"
  19. android:visibility="visible" />
  20. <TextView
  21. android:id="@+id/anim_text"
  22. android:layout_width="fill_parent"
  23. android:layout_height="wrap_content"
  24. android:layout_alignParentTop="true"
  25. android:layout_marginTop="35dp"
  26. android:gravity="center"
  27. android:text=" \n \n微信，是一个生活方式\n \n "
  28. android:textColor="#fff"
  29. android:textSize="22sp" />
  30. </RelativeLayout>

4、最后是完成动画效果之后进入的布局界面，activity_other.xml：

[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:orientation="vertical" >
  6. <TextView
  7. android:id="@+id/textView1"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:text="亲，可以开始你的微信生活了!" />
  11. </LinearLayout>

5、在这里还要创建一个xml文件来实现自定义按钮的效果，关于自定义按钮的效果实现我会在后面的文章中专题详细介绍，这里就不在赘述，start_weixin_btn.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:state_enabled="true" android:state_pressed="true"
  4. android:drawable="@drawable/whatsnew_btn_pressed" /> <!--按下时的效果-->
  5. <item android:state_enabled="true" android:drawable="@drawable/whatsnew_btn_nor" />  <!--正常状态的效果-->
  6. </selector>

6、布局界面已经讲解完毕，接下来让我们进行详细的代码讲解，ViewPager适配器代码，ViewPagerAdapter.java：

[java] view plaincopy
  1. package com.yangyu.myguideview02;
  2. import java.util.ArrayList;
  3. import android.support.v4.view.PagerAdapter;
  4. import android.support.v4.view.ViewPager;
  5. import android.view.View;
  6. /**
  7. * @author yangyu
  8. *   功能描述：ViewPager适配器，用来绑定数据和view
  9. */
  10. public class ViewPagerAdapter extends PagerAdapter {
  11. //界面列表
  12. private ArrayList<View> views;
  13. public ViewPagerAdapter (ArrayList<View> views){
  14. this.views = views;
  15. }
  16. /**
  17. * 获得当前界面数
  18. */
  19. @Override
  20. public int getCount() {
  21. if (views != null) {
  22. return views.size();
  23. }
  24. return 0;
  25. }
  26. /**
  27. * 初始化position位置的界面
  28. */
  29. @Override
  30. public Object instantiateItem(View view, int position) {
  31. ((ViewPager) view).addView(views.get(position), 0);
  32. return views.get(position);
  33. }
  34. /**
  35. * 判断是否由对象生成界面
  36. */
  37. @Override
  38. public boolean isViewFromObject(View view, Object arg1) {
  39. return (view == arg1);
  40. }
  41. /**
  42. * 销毁position位置的界面
  43. */
  44. @Override
  45. public void destroyItem(View view, int position, Object arg2) {
  46. ((ViewPager) view).removeView(views.get(position));
  47. }
  48. }

7、主程序入口activity类，MainActivity.java：

[java] view plaincopy
  1. package com.yangyu.myguideview02;
  2. import java.util.ArrayList;
  3. import android.app.Activity;
  4. import android.content.Intent;
  5. import android.os.Bundle;
  6. import android.support.v4.view.ViewPager;
  7. import android.support.v4.view.ViewPager.OnPageChangeListener;
  8. import android.view.LayoutInflater;
  9. import android.view.View;
  10. import android.view.View.OnClickListener;
  11. import android.widget.Button;
  12. import android.widget.ImageView;
  13. /**
  14. * @author yangyu
  15. *   功能描述：主程序入口activity
  16. */
  17. public class MainActivity extends Activity {
  18. // 定义ViewPager对象
  19. private ViewPager viewPager;
  20. // 定义ViewPager适配器
  21. private ViewPagerAdapter vpAdapter;
  22. // 定义一个ArrayList来存放View
  23. private ArrayList<View> views;
  24. //定义各个界面View对象
  25. private View view1,view2,view3,view4,view5,view6;
  26. // 定义底部小点图片
  27. private ImageView pointImage0, pointImage1, pointImage2, pointImage3,pointImage4, pointImage5;
  28. //定义开始按钮对象
  29. private Button startBt;
  30. // 当前的位置索引值
  31. private int currIndex = 0;
  32. @Override
  33. protected void onCreate(Bundle savedInstanceState) {
  34. super.onCreate(savedInstanceState);
  35. setContentView(R.layout.activity_main);
  36. initView();
  37. initData();
  38. }
  39. /**
  40. * 初始化组件
  41. */
  42. private void initView() {
  43. //实例化各个界面的布局对象
  44. LayoutInflater mLi = LayoutInflater.from(this);
  45. view1 = mLi.inflate(R.layout.guide_view01, null);
  46. view2 = mLi.inflate(R.layout.guide_view02, null);
  47. view3 = mLi.inflate(R.layout.guide_view03, null);
  48. view4 = mLi.inflate(R.layout.guide_view04, null);
  49. view5 = mLi.inflate(R.layout.guide_view05, null);
  50. view6 = mLi.inflate(R.layout.guide_view06, null);
  51. // 实例化ViewPager
  52. viewPager = (ViewPager) findViewById(R.id.viewpager);
  53. // 实例化ArrayList对象
  54. views = new ArrayList<View>();
  55. // 实例化ViewPager适配器
  56. vpAdapter = new ViewPagerAdapter(views);
  57. // 实例化底部小点图片对象
  58. pointImage0 = (ImageView) findViewById(R.id.page0);
  59. pointImage1 = (ImageView) findViewById(R.id.page1);
  60. pointImage2 = (ImageView) findViewById(R.id.page2);
  61. pointImage3 = (ImageView) findViewById(R.id.page3);
  62. pointImage4 = (ImageView) findViewById(R.id.page4);
  63. pointImage5 = (ImageView) findViewById(R.id.page5);
  64. //实例化开始按钮
  65. startBt = (Button) view6.findViewById(R.id.startBtn);
  66. }
  67. /**
  68. * 初始化数据
  69. */
  70. private void initData() {
  71. // 设置监听
  72. viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
  73. // 设置适配器数据
  74. viewPager.setAdapter(vpAdapter);
  75. //将要分页显示的View装入数组中
  76. views.add(view1);
  77. views.add(view2);
  78. views.add(view3);
  79. views.add(view4);
  80. views.add(view5);
  81. views.add(view6);
  82. // 给开始按钮设置监听
  83. startBt.setOnClickListener(new OnClickListener() {
  84. @Override
  85. public void onClick(View v) {
  86. startbutton();
  87. }
  88. });
  89. }
  90. public class MyOnPageChangeListener implements OnPageChangeListener {
  91. @Override
  92. public void onPageSelected(int position) {
  93. switch (position) {
  94. case 0:
  95. pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
  96. pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  97. break;
  98. case 1:
  99. pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
  100. pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  101. pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  102. break;
  103. case 2:
  104. pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
  105. pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  106. pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  107. break;
  108. case 3:
  109. pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
  110. pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  111. pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  112. break;
  113. case 4:
  114. pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
  115. pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  116. pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  117. break;
  118. case 5:
  119. pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
  120. pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
  121. break;
  122. }
  123. currIndex = position;
  124. // animation.setFillAfter(true);// True:图片停在动画结束位置
  125. // animation.setDuration(300);
  126. // mPageImg.startAnimation(animation);
  127. }
  128. @Override
  129. public void onPageScrollStateChanged(int arg0) {
  130. }
  131. @Override
  132. public void onPageScrolled(int arg0, float arg1, int arg2) {
  133. }
  134. }
  135. /**
  136. * 相应按钮点击事件
  137. */
  138. private void startbutton() {
  139. Intent intent = new Intent();
  140. intent.setClass(MainActivity.this,GuideViewDoor.class);
  141. startActivity(intent);
  142. this.finish();
  143. }
  144. }

PS：在这段代码中，有个地方需要注意，尽管我们写代码的时候一直很小心，但还是避免不了会犯一些低级的错误，以至于调试耽误了时间

[java] view plaincopy
  1. //实例化开始按钮
  2. startBt = (Button) view6.findViewById(R.id.startBtn);

这是最后一个布局界面中的一个开始按钮，由于在findvViewById()方法前面忘记使用了view6来调用该方法，以至于模拟器报出空指针异常。

8、实现动画效果的入口activity类,在这个类中主要实现了点击开始按钮后实现一个动画效果来达到进入另一个界面的目的，该类中的主要使用了动画类。我会在后面的章节中以专题的形式来介绍动画这一块的类容，所以这里也不再赘述，GuideViewDoor.java：

[java] view plaincopy
  1. package com.yangyu.myguideview02;
  2. import android.app.Activity;
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.os.Handler;
  6. import android.view.animation.AlphaAnimation;
  7. import android.view.animation.Animation;
  8. import android.view.animation.AnimationSet;
  9. import android.view.animation.ScaleAnimation;
  10. import android.view.animation.TranslateAnimation;
  11. import android.widget.ImageView;
  12. import android.widget.TextView;
  13. /**
  14. * @author yangyu
  15. *   功能描述：实现动画效果的入口activity
  16. */
  17. public class GuideViewDoor extends Activity {
  18. //定义左右两张图片对象
  19. private ImageView mLeft,mRight;
  20. //定义一个文本对象
  21. private TextView mText;
  22. @Override
  23. public void onCreate(Bundle savedInstanceState) {
  24. super.onCreate(savedInstanceState);
  25. setContentView(R.layout.guide_door);
  26. //实例化对象
  27. mLeft = (ImageView)findViewById(R.id.imageLeft);
  28. mRight = (ImageView)findViewById(R.id.imageRight);
  29. mText = (TextView)findViewById(R.id.anim_text);
  30. //实例化动画对象
  31. AnimationSet anim = new AnimationSet(true);
  32. //实例化位移动画对象
  33. TranslateAnimation mytranslateanim = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
  34. //设置动画持续时间
  35. mytranslateanim.setDuration(2000);
  36. //设置启动时间
  37. anim.setStartOffset(800);
  38. //将位移动画添加进动画效果中
  39. anim.addAnimation(mytranslateanim);
  40. //动画结束后，保留在终止位
  41. anim.setFillAfter(true);
  42. //左边图启动该动画效果
  43. mLeft.startAnimation(anim);
  44. AnimationSet anim1 = new AnimationSet(true);
  45. TranslateAnimation mytranslateanim1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
  46. mytranslateanim1.setDuration(1500);
  47. anim1.addAnimation(mytranslateanim1);
  48. anim1.setStartOffset(800);
  49. anim1.setFillAfter(true);
  50. mRight.startAnimation(anim1);
  51. AnimationSet anim2 = new AnimationSet(true);
  52. ScaleAnimation myscaleanim = new ScaleAnimation(1f,3f,1f,3f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
  53. myscaleanim.setDuration(1000);
  54. AlphaAnimation myalphaanim = new AlphaAnimation(1,0.0001f);
  55. myalphaanim.setDuration(1500);
  56. anim2.addAnimation(myscaleanim);
  57. anim2.addAnimation(myalphaanim);
  58. anim2.setFillAfter(true);
  59. mText.startAnimation(anim2);
  60. new Handler().postDelayed(new Runnable(){
  61. @Override
  62. public void run(){
  63. Intent intent = new Intent (GuideViewDoor.this,OtherActivity.class);
  64. startActivity(intent);
  65. GuideViewDoor.this.finish();
  66. }
  67. }, 2300);
  68. }
  69. }

9、最后是另一个activity类，我为了只是达到进入到另一个界面的这种效果，所以代码比较简单，就是调用了一个layout布局页面，OtherActivity.java：

[java] view plaincopy
  1. package com.yangyu.myguideview02;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. /**
  5. * @author yangyu
  6. *  功能描述：另一个activity
  7. */
  8. public class OtherActivity extends Activity {
  9. @Override
  10. protected void onCreate(Bundle savedInstanceState) {
  11. super.onCreate(savedInstanceState);
  12. setContentView(R.layout.activity_other);
  13. }
  14. }

10、最后大家别忘了在AndroidManifest.xml清单文件中为程序添加GuideViewDoor、OtherActivity这两个activity，否则会报出异常。

代码下载地址

Android UI设计与开发】第03期：引导界面（三）仿微信引导界面以及动画效果相关推荐

  1. 【Android UI设计与开发】9：滑动菜单栏（一）开源项目SlidingMenu的使用和示例-转...

    一.SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了 ...

  2. 【Android UI设计与开发】第02期：引导界面（二）使用ViewPager实现欢迎引导页面

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8980917 本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个 ...

  3. android ui设计与开发工具,Android用户体验与UI设计

    Android用户体验与UI设计 编辑 锁定 讨论 上传视频 本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 本书是一部介绍Android用户体验.UI设计理念和方法论的作品 ...

  4. 【Android UI设计与开发】第09期：底部菜单栏（四）Fragment+PopupWindow仿QQ空间最新版底部菜单栏

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451          在今天的这篇文章当中,我依然会以实战加理论结合 ...

  5. 【Android UI设计与开发】第05期：引导界面（五）实现应用程序只启动一次引导界面

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8987342  这篇文章算是对整个引导界面开发专题的一个终结了吧,个人觉得大部 ...

  6. 【Android UI设计与开发】第01期：引导界面（一）ViewPager介绍和使用详解

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8980917 做Android开发加起来差不多也有一年多的时间了,总是想写点自 ...

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

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8988147      这一篇我将会以人人网的引导界面为实例来展开详细的讲解, ...

  8. 【Android UI设计与开发】第07期：底部菜单栏（二）Fragment的详细介绍和使用方法

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8995025 由于TabActivity在Android4.0以后已经被完全弃 ...

  9. 【转】【Android UI设计与开发】第07期：底部菜单栏（二）Fragment的详细介绍和使用方法...

    原始地址:http://blog.csdn.net/yangyu20121224/article/category/1431917/1 由于TabActivity在Android4.0以后已经被完全弃 ...

最新文章

  1. Gnuplot安装避坑
  2. CSS实现跨浏览器兼容性的盒阴影效果
  3. 使用SVCUtil.exe生成客户端代理类和配置文件
  4. 如何对android菜单,Android菜单构造技巧
  5. java 实现loading效果_简单实现JS Loading功能
  6. 【转】 linux的网络接口之扫盲
  7. Centos系统查看版本
  8. 六石编程学：如何整合两个项目的代码
  9. LINUX FFMPEG编译详细过程记录（最全）
  10. Linux安装cURL
  11. 简易天线增益测量系统
  12. RPM-YUM-源码
  13. fuchsia代码管理
  14. 墙裂推荐，Python开发者不容错过的7个VS Code扩展
  15. jquery ajax content type,JQuery ajax的contentType
  16. 公众号快速注册并认证小程序功能介绍
  17. Java 数字转字符串并指定位数，位数不足，自动补零
  18. 蓝桥杯试题 算法提高 扶老奶奶过街（C语言）
  19. Python之基本数据类型
  20. 《C Prime Plus》(第六版) 第03章 编程练习 7 英寸转换成厘米

热门文章

  1. jquery之行自加自减
  2. openJDK之lambda——List的forEach如何实现的
  3. 一种简单的数据库性能测试方法
  4. react-router的基础知识
  5. dnsmasq搭建简易DNS服务器
  6. linux系统启动级别
  7. shell学习笔记 （2）
  8. MyBatis实现与插件开发
  9. 将集合中的内容按时间排序
  10. dubbo入门学习笔记之入门demo(基于普通maven项目)