Android UI设计与开发之仿人人网V5.9.2最新版引导界面

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

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

一、实现的效果图

欢迎界面：

引导界面1

引导界面 2

引导界面 3

二 、项目的目录结构

三、具体的编码实现

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

<?xml version="1.0" enCoding="utf-8"?> <linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="fill_parent"  androID:layout_height="fill_parent"  androID:background="@drawable/v5_6_2_welcome"  androID:orIEntation="vertical" /> 

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

<?xml version="1.0" enCoding="utf-8"?> <relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="fill_parent"  androID:layout_height="fill_parent"  androID:orIEntation="vertical" >   <ImageVIEw   androID:ID="@+ID/iv_guIDe_picture"   androID:layout_wIDth="fill_parent"   androID:layout_height="fill_parent"   androID:layout_weight="1.0"   androID:scaleType="fitXY" />   <linearLayout   androID:ID="@+ID/ll_bottom_action_bar"   androID:layout_wIDth="fill_parent"   androID:layout_height="wrap_content"   androID:layout_alignParentBottom="true"   androID:orIEntation="horizontal"   androID:padding="7dip" >    <button    androID:ID="@+ID/btn_register"    androID:layout_wIDth="fill_parent"    androID:layout_height="45dip"    androID:layout_weight="1.5"    androID:background="@drawable/guIDe_btn_blue"    androID:gravity="center"    androID:singleline="true"    androID:text="注 册"    androID:textcolor="#FFFFFF"    androID:textSize="15.0sp" />    <button    androID:ID="@+ID/btn_look_at_the_people_i_kNow"    androID:layout_wIDth="fill_parent"    androID:layout_height="45dip"    androID:layout_marginleft="8dip"    androID:layout_marginRight="8dip"    androID:layout_weight="1.0"    androID:background="@drawable/guIDe_btn_white"    androID:gravity="center"    androID:singleline="true"    androID:text="看看我认识的人"    androID:textcolor="#000000"    androID:textSize="15.0sp" />    <button    androID:ID="@+ID/btn_login"    androID:layout_wIDth="fill_parent"    androID:layout_height="45dip"    androID:layout_weight="1.5"    androID:background="@drawable/guIDe_btn_blue"    androID:gravity="center"    androID:singleline="true"    androID:text="登 录"    androID:textcolor="#FFFFFF"    androID:textSize="15.0sp" />  </linearLayout> </relativeLayout> 

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

<?xml version="1.0" enCoding="utf-8"?> <selector xmlns:androID="http://schemas.androID.com/apk/res/androID">   <item androID:drawable="@drawable/v5_0_1_guIDe_blue_default" androID:state_focused="true" androID:state_pressed="false"/>  <item androID:drawable="@drawable/v5_0_1_guIDe_blue_press" androID:state_pressed="true"/>  <item androID:drawable="@drawable/v5_0_1_guIDe_blue_default"/>  </selector> 

guIDe_btn_white：

<?xml version="1.0" enCoding="utf-8"?> <selector xmlns:androID="http://schemas.androID.com/apk/res/androID">   <item androID:drawable="@drawable/v5_0_1_guIDe_black_default" androID:state_focused="true" androID:state_pressed="false"/>  <item androID:drawable="@drawable/v5_0_1_guIDe_black_press" androID:state_pressed="true"/>  <item androID:drawable="@drawable/v5_0_1_guIDe_black_default"/>  </selector>

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

<?xml version="1.0" enCoding="utf-8"?> <set xmlns:androID="http://schemas.androID.com/apk/res/androID" >    <Alpha androID:fromAlpha="0.0"    androID:toAlpha="1.0" />  </set>

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

<?xml version="1.0" enCoding="utf-8"?> <set xmlns:androID="http://schemas.androID.com/apk/res/androID" >   <scale   androID:fillAfter="false"   androID:fromXScale="1.1"   androID:fromYScale="1.1"   androID:interpolator="@androID:anim/decelerate_interpolator"   androID:pivotX="50.0%"   androID:pivotY="50.0%"   androID:toXScale="1.1"   androID:toYScale="1.1" />   <Alpha   xmlns:androID="http://schemas.androID.com/apk/res/androID"   androID:fromAlpha="1.0"   androID:toAlpha="0.0" />  </set> 

放大动画资源文件,guIDe_fade_in_scale：

<?xml version="1.0" enCoding="utf-8"?> <set xmlns:androID="http://schemas.androID.com/apk/res/androID" >   <scale   androID:fillAfter="false"   androID:fromXScale="1.0"   androID:fromYScale="1.0"   androID:interpolator="@androID:anim/decelerate_interpolator"   androID:pivotX="50.0%"   androID:pivotY="50.0%"   androID:toXScale="1.1"   androID:toYScale="1.1"/>  </set> 

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

package com.yangyu.myguIDevIEw03;  import androID.app.Activity; import androID.content.Intent; import androID.os.Bundle; import androID.os.CountDownTimer;  /**  * @author yangyu  * 功能描述：欢迎界面Activity（logo）  */ public class WelcomeActivity extends Activity {   @OverrIDe  public voID onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentVIEw(R.layout.activity_welcome);    /**    * millisInFuture:从开始调用start()到倒计时完成并onFinish()方法被调用的毫秒数    * countDownInterval:接收onTick(long)回调的间隔时间    */   new CountDownTimer(5000,1000) {    @OverrIDe    public voID onTick(long millisUntilFinished) {    }     @OverrIDe    public voID onFinish() {     Intent intent = new Intent(WelcomeActivity.this,GuIDeActivity.class);     startActivity(intent);     WelcomeActivity.this.finish();    }   }.start();  } }

6、引导界面，GuIDeActivity.java：

package com.yangyu.myguIDevIEw03;  import androID.app.Activity; import androID.graphics.drawable.Drawable; import androID.os.Bundle; import androID.vIEw.VIEw; import androID.vIEw.VIEw.OnClickListener; import androID.vIEw.animation.Animation; import androID.vIEw.animation.Animation.AnimationListener; import androID.vIEw.animation.AnimationUtils; import androID.Widget.button; import androID.Widget.ImageVIEw; import androID.Widget.Toast;  /**  * @author yangyu  * 功能描述：导引界面(每张图片都执行的动画顺序，渐现、放大和渐隐，结束后切换图片和文字  * 又开始执行 渐现、放大和渐隐,当最后一张执行完渐隐，切换到第一张，从而达到循环效果)  */ public class GuIDeActivity extends Activity implements OnClickListener{  //定义注册、登录和看看我认识的人按钮  private button btnRegister,btnLogin,btnIKNowPeople;    //显示图片的ImageVIEw组件  private ImageVIEw ivGuIDePicture;    //要展示的一组图片资源  private Drawable[] pictures;    //每张展示图片要执行的一组动画效果  private Animation[] animations;    //当前执行的是第几张图片（资源索引）  private int currentItem = 0;    @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentVIEw(R.layout.activity_guIDe);      initVIEw();      initData();  }   /**   * 初始化组件   */  private voID initVIEw(){   //实例化ImageVIEw引导图片   ivGuIDePicture = (ImageVIEw) findVIEwByID(R.ID.iv_guIDe_picture);      //实例化按钮   btnRegister = (button) findVIEwByID(R.ID.btn_register);   btnIKNowPeople = (button) findVIEwByID(R.ID.btn_look_at_the_people_i_kNow);   btnLogin = (button) findVIEwByID(R.ID.btn_login);    //实例化引导图片数组   pictures = new Drawable[] { getResources().getDrawable(R.drawable.v5_3_0_guIDe_pic1),getResources().getDrawable(R.drawable.v5_3_0_guIDe_pic2),getResources().getDrawable(R.drawable.v5_3_0_guIDe_pic3)};    //实例化动画效果数组   animations = new Animation[] { AnimationUtils.loadAnimation(this,R.anim.guIDe_fade_in),AnimationUtils.loadAnimation(this,R.anim.guIDe_fade_in_scale),R.anim.guIDe_fade_out) };  }   /**   * 初始化数据   */  private voID initData(){   //给按钮设置监听   btnRegister.setonClickListener(this);   btnIKNowPeople.setonClickListener(this);   btnLogin.setonClickListener(this);         //给每个动画效果设置播放时间   animations[0].setDuration(1500);   animations[1].setDuration(3000);   animations[2].setDuration(1500);    //给每个动画效果设置监听事件   animations[0].setAnimationListener(new GuIDeAnimationListener(0));   animations[1].setAnimationListener(new GuIDeAnimationListener(1));   animations[2].setAnimationListener(new GuIDeAnimationListener(2));      //设置图片动画初始化默认值为0   ivGuIDePicture.setimageDrawable(pictures[currentItem]);   ivGuIDePicture.startAnimation(animations[0]);  }   /**   * 实现了动画监听接口，重写里面的方法   */  class GuIDeAnimationListener implements AnimationListener {      private int index;    public GuIDeAnimationListener(int index) {    this.index = index;   }    @OverrIDe   public voID onAnimationStart(Animation animation) {   }      //重写动画结束时的监听事件，实现了动画循环播放的效果   @OverrIDe   public voID onAnimationEnd(Animation animation) {    if (index < (animations.length - 1)) {     ivGuIDePicture.startAnimation(animations[index + 1]);    } else {     currentItem++;     if (currentItem > (pictures.length - 1)) {      currentItem = 0;     }     ivGuIDePicture.setimageDrawable(pictures[currentItem]);     ivGuIDePicture.startAnimation(animations[0]);    }   }    @OverrIDe   public voID onAnimationRepeat(Animation animation) {    }   }    @OverrIDe  public voID onClick(VIEw v) {    switch (v.getID()) {    case R.ID.btn_register:     Toast.makeText(this,"点击了注册按钮",Toast.LENGTH_SHORT).show();     break;    case R.ID.btn_look_at_the_people_i_kNow:     Toast.makeText(this,"点击了我认识的人按钮",Toast.LENGTH_SHORT).show();     break;    case R.ID.btn_login:      Toast.makeText(this,"点击了登录按钮",Toast.LENGTH_SHORT).show();     break;    default:     break;    }  } } 

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android UI设计与开发之仿人人网V5.9.2最新版引导界面全部内容，希望文章能够帮你解决Android UI设计与开发之仿人人网V5.9.2最新版引导界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。