欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-18 12:49:40
这一篇我将会以人人网的引导界面为实例来展开详细的讲解,人人网的引导界面比较的新颖,不同于其他应用程序千篇一律的靠滑动来引导用户,而是以一个一个比较生动形象的动画效果展示在用...

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

一、实现的效果图

欢迎界面:

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

引导界面1

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

引导界面 2

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

引导界面 3

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

二 、项目的目录结构

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

三、具体的编码实现

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), 
          animationutils.loadanimation(this, 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; 
   } 
 } 
} 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: