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

转载请注明出处：/yangyu1224/article/details/8985457

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

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

一、实现的效果图

有图才有真相，上图先：

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

二、程序的目录结构

三、具体的编码实现

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

[html]view plaincopy<RelativeLayoutxmlns:android="/apk/res/android" xmlns:tools="/tools" 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：[html]view plaincopy<?xmlversion="1.0"encoding="UTF-8"?> <RelativeLayoutxmlns:android="/apk/res/android" 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：[html]view plaincopy<?xmlversion="1.0"encoding="UTF-8"?> <RelativeLayoutxmlns:android="/apk/res/android" 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="\n\n微信，是一个生活方式\n\n" android:textColor="#fff" android:textSize="22sp"/> </RelativeLayout> 4、最后是完成动画效果之后进入的布局界面，activity_other.xml：[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <LinearLayoutxmlns:android="/apk/res/android" 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：[html]view plaincopy<?xmlversion="1.0"encoding="utf-8"?> <selectorxmlns:android="/apk/res/android"> <itemandroid:state_enabled="true"android:state_pressed="true" android:drawable="@drawable/whatsnew_btn_pressed"/> <itemandroid:state_enabled="true"android:drawable="@drawable/whatsnew_btn_nor"/> </selector> 6、布局界面已经讲解完毕，接下来让我们进行详细的代码讲解，ViewPager适配器代码，ViewPagerAdapter.java：[java]view plaincopypackagecom.yangyu.myguideview02; importjava.util.ArrayList; importandroid.support.v4.view.PagerAdapter; importandroid.support.v4.view.ViewPager; importandroid.view.View; /** *@authoryangyu *功能描述：ViewPager适配器，用来绑定数据和view */ publicclassViewPagerAdapterextendsPagerAdapter{ //界面列表 privateArrayList<View>views; publicViewPagerAdapter(ArrayList<View>views){ this.views=views; } /** *获得当前界面数 */ @Override publicintgetCount(){ if(views!=null){ returnviews.size(); } return0; } /** *初始化position位置的界面 */ @Override publicObjectinstantiateItem(Viewview,intposition){ ((ViewPager)view).addView(views.get(position),0); returnviews.get(position); } /** *判断是否由对象生成界面 */ @Override publicbooleanisViewFromObject(Viewview,Objectarg1){ return(view==arg1); } /** *销毁position位置的界面 */ @Override publicvoiddestroyItem(Viewview,intposition,Objectarg2){ ((ViewPager)view).removeView(views.get(position)); } } 7、主程序入口activity类，MainActivity.java：

[java]view plaincopypackagecom.yangyu.myguideview02; importjava.util.ArrayList; importandroid.app.Activity; importandroid.content.Intent; importandroid.os.Bundle; importandroid.support.v4.view.ViewPager; importandroid.support.v4.view.ViewPager.OnPageChangeListener; importandroid.view.LayoutInflater; importandroid.view.View; importandroid.view.View.OnClickListener; importandroid.widget.Button; importandroid.widget.ImageView; /** *@authoryangyu *功能描述：主程序入口activity */ publicclassMainActivityextendsActivity{ //定义ViewPager对象 privateViewPagerviewPager; //定义ViewPager适配器 privateViewPagerAdaptervpAdapter; //定义一个ArrayList来存放View privateArrayList<View>views; //定义各个界面View对象 privateViewview1,view2,view3,view4,view5,view6; //定义底部小点图片 privateImageViewpointImage0,pointImage1,pointImage2,pointImage3,pointImage4,pointImage5; //定义开始按钮对象 privateButtonstartBt; //当前的位置索引值 privateintcurrIndex=0; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); } /** *初始化组件 */ privatevoidinitView(){ //实例化各个界面的布局对象 LayoutInflatermLi=LayoutInflater.from(this); view1=mLi.inflate(R.layout.guide_view01,null); view2=mLi.inflate(R.layout.guide_view02,null); view3=mLi.inflate(R.layout.guide_view03,null); view4=mLi.inflate(R.layout.guide_view04,null); view5=mLi.inflate(R.layout.guide_view05,null); view6=mLi.inflate(R.layout.guide_view06,null); //实例化ViewPager viewPager=(ViewPager)findViewById(R.id.viewpager); //实例化ArrayList对象 views=newArrayList<View>(); //实例化ViewPager适配器 vpAdapter=newViewPagerAdapter(views); //实例化底部小点图片对象 pointImage0=(ImageView)findViewById(R.id.page0); pointImage1=(ImageView)findViewById(R.id.page1); pointImage2=(ImageView)findViewById(R.id.page2); pointImage3=(ImageView)findViewById(R.id.page3); pointImage4=(ImageView)findViewById(R.id.page4); pointImage5=(ImageView)findViewById(R.id.page5); //实例化开始按钮 startBt=(Button)view6.findViewById(R.id.startBtn); } /** *初始化数据 */ privatevoidinitData(){ //设置监听 viewPager.setOnPageChangeListener(newMyOnPageChangeListener()); //设置适配器数据 viewPager.setAdapter(vpAdapter); //将要分页显示的View装入数组中 views.add(view1); views.add(view2); views.add(view3); views.add(view4); views.add(view5); views.add(view6); //给开始按钮设置监听 startBt.setOnClickListener(newOnClickListener(){ @Override publicvoidonClick(Viewv){ startbutton(); } }); } publicclassMyOnPageChangeListenerimplementsOnPageChangeListener{ @Override publicvoidonPageSelected(intposition){ switch(position){ case0: pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); break; case1: 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; case2: 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; case3: 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; case4: 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; case5: pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); break; } currIndex=position; //animation.setFillAfter(true);//True:图片停在动画结束位置 //animation.setDuration(300); //mPageImg.startAnimation(animation); } @Override publicvoidonPageScrollStateChanged(intarg0){ } @Override publicvoidonPageScrolled(intarg0,floatarg1,intarg2){ } } /** *相应按钮点击事件 */ privatevoidstartbutton(){ Intentintent=newIntent(); intent.setClass(MainActivity.this,GuideViewDoor.class); startActivity(intent); this.finish(); } } PS：在这段代码中，有个地方需要注意，尽管我们写代码的时候一直很小心，但还是避免不了会犯一些低级的错误，以至于调试耽误了时间[java]view plaincopy//实例化开始按钮 startBt=(Button)view6.findViewById(R.id.startBtn); 这是最后一个布局界面中的一个开始按钮，由于在findvViewById()方法前面忘记使用了view6来调用该方法，以至于模拟器报出空指针异常。

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

[java]view plaincopypackagecom.yangyu.myguideview02; importandroid.app.Activity; importandroid.content.Intent; importandroid.os.Bundle; importandroid.os.Handler; importandroid.view.animation.AlphaAnimation; importandroid.view.animation.Animation; importandroid.view.animation.AnimationSet; importandroid.view.animation.ScaleAnimation; importandroid.view.animation.TranslateAnimation; importandroid.widget.ImageView; importandroid.widget.TextView; /** *@authoryangyu *功能描述：实现动画效果的入口activity */ publicclassGuideViewDoorextendsActivity{ //定义左右两张图片对象 privateImageViewmLeft,mRight; //定义一个文本对象 privateTextViewmText; @Override publicvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.guide_door); //实例化对象 mLeft=(ImageView)findViewById(R.id.imageLeft); mRight=(ImageView)findViewById(R.id.imageRight); mText=(TextView)findViewById(R.id.anim_text); //实例化动画对象 AnimationSetanim=newAnimationSet(true); //实例化位移动画对象 TranslateAnimationmytranslateanim=newTranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); //设置动画持续时间 mytranslateanim.setDuration(2000); //设置启动时间 anim.setStartOffset(800); //将位移动画添加进动画效果中 anim.addAnimation(mytranslateanim); //动画结束后，保留在终止位 anim.setFillAfter(true); //左边图启动该动画效果 mLeft.startAnimation(anim); AnimationSetanim1=newAnimationSet(true); TranslateAnimationmytranslateanim1=newTranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); mytranslateanim1.setDuration(1500); anim1.addAnimation(mytranslateanim1); anim1.setStartOffset(800); anim1.setFillAfter(true); mRight.startAnimation(anim1); AnimationSetanim2=newAnimationSet(true); ScaleAnimationmyscaleanim=newScaleAnimation(1f,3f,1f,3f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); myscaleanim.setDuration(1000); AlphaAnimationmyalphaanim=newAlphaAnimation(1,0.0001f); myalphaanim.setDuration(1500); anim2.addAnimation(myscaleanim); anim2.addAnimation(myalphaanim); anim2.setFillAfter(true); mText.startAnimation(anim2); newHandler().postDelayed(newRunnable(){ @Override publicvoidrun(){ Intentintent=newIntent(GuideViewDoor.this,OtherActivity.class); startActivity(intent); GuideViewDoor.this.finish(); } },2300); } } 9、最后是另一个activity类，我为了只是达到进入到另一个界面的这种效果，所以代码比较简单，就是调用了一个layout布局页面，OtherActivity.java：[java]view plaincopypackagecom.yangyu.myguideview02; importandroid.app.Activity; importandroid.os.Bundle; /** *@authoryangyu *功能描述：另一个activity */ publicclassOtherActivityextendsActivity{ @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_other); } } 10、最后大家别忘了在AndroidManifest.xml清单文件中为程序添加GuideViewDoor、OtherActivity这两个activity，否则会报出异常。代码下载地址