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

转载请注明出处：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.   
6.     <android.support.v4.view.ViewPager  
7.         android:id="@+id/viewpager"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent" />  
10.   
11.     <LinearLayout  
12.         android:id="@+id/ll"  
13.         android:layout_width="wrap_content"  
14.         android:layout_height="wrap_content"  
15.         android:layout_alignParentBottom="true"  
16.         android:layout_centerHorizontal="true"  
17.         android:layout_marginBottom="24.0dip"  
18.         android:orientation="horizontal" >  
19.   
20.         <ImageView  
21.             android:id="@+id/page0"  
22.             android:layout_width="wrap_content"  
23.             android:layout_height="wrap_content"  
24.             android:layout_gravity="center_vertical"  
25.             android:clickable="true"  
26.             android:padding="5dip"  
27.             android:src="@drawable/page_indicator_focused" />  
28.   
29.         <ImageView  
30.             android:id="@+id/page1"  
31.             android:layout_width="wrap_content"  
32.             android:layout_height="wrap_content"  
33.             android:layout_gravity="center_vertical"  
34.             android:clickable="true"  
35.             android:padding="5dip"  
36.             android:src="@drawable/page_indicator_unfocused" />  
37.   
38.         <ImageView  
39.             android:id="@+id/page2"  
40.             android:layout_width="wrap_content"  
41.             android:layout_height="wrap_content"  
42.             android:layout_gravity="center_vertical"  
43.             android:clickable="true"  
44.             android:padding="5dip"  
45.             android:src="@drawable/page_indicator_unfocused" />  
46.   
47.         <ImageView  
48.             android:id="@+id/page3"  
49.             android:layout_width="wrap_content"  
50.             android:layout_height="wrap_content"  
51.             android:layout_gravity="center_vertical"  
52.             android:clickable="true"  
53.             android:padding="5dip"  
54.             android:src="@drawable/page_indicator_unfocused" />  
55.   
56.         <ImageView  
57.             android:id="@+id/page4"  
58.             android:layout_width="wrap_content"  
59.             android:layout_height="wrap_content"  
60.             android:layout_gravity="center_vertical"  
61.             android:clickable="true"  
62.             android:padding="5dip"  
63.             android:src="@drawable/page_indicator_unfocused" />  
64.   
65.         <ImageView  
66.             android:id="@+id/page5"  
67.             android:layout_width="wrap_content"  
68.             android:layout_height="wrap_content"  
69.             android:layout_gravity="center_vertical"  
70.             android:clickable="true"  
71.             android:padding="5dip"  
72.             android:src="@drawable/page_indicator_unfocused" />  
73.     </LinearLayout>  
74. </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.   
8.     <TextView  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="wrap_content"  
11.         android:layout_alignParentTop="true"  
12.         android:layout_marginTop="35dp"  
13.         android:gravity="center"  
14.         android:text="@string/guide_text01"  
15.         android:textColor="@color/TextColor"  
16.         android:textSize="22sp" />  
17. </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.   
6.     <ImageView  
7.         android:id="@+id/imageLeft"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:layout_alignParentLeft="true"  
11.         android:scaleType="fitXY"  
12.         android:src="@drawable/w_left" />  
13.   
14.     <ImageView  
15.         android:id="@+id/imageRight"  
16.         android:layout_width="fill_parent"  
17.         android:layout_height="fill_parent"  
18.         android:layout_alignParentRight="true"  
19.         android:scaleType="fitXY"  
20.         android:src="@drawable/w_right"  
21.         android:visibility="visible" />  
22.   
23.     <TextView  
24.         android:id="@+id/anim_text"  
25.         android:layout_width="fill_parent"  
26.         android:layout_height="wrap_content"  
27.         android:layout_alignParentTop="true"  
28.         android:layout_marginTop="35dp"  
29.         android:gravity="center"  
30.         android:text=" \n \n微信，是一个生活方式\n \n "  
31.         android:textColor="#fff"  
32.         android:textSize="22sp" />  
33. </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.   
7.     <TextView  
8.         android:id="@+id/textView1"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:text="亲，可以开始你的微信生活了!" />  
12. </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.           
6.     <item android:state_enabled="true" android:drawable="@drawable/whatsnew_btn_nor" />  <!--正常状态的效果-->   
7. </selector>  

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

[java] view plaincopy

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

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

[java] view plaincopy

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

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

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

[java] view plaincopy

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

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

源码下载地址