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

一、实现的效果图

欢迎界面：

引导界面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), 
          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; 
   } 
 } 
} 

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

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

# Android  # UI  # 人人网  # 引导界面  # Android Studio设置绘制布局时的视图  # Android Studio实现帧动画  # Android Studio实现补间动画  # Android UI设计与开发之实现应用程序只启动一次引导界面  # Android UI设计之AlertDialog弹窗控件  # Android项目开发之UI设计器  # android studio 项目 ：UI设计高精度实现简单计算器  # 的人  # 自定义  # 渐隐  # 详细介绍  # 重写  # 在后面  # 大和  # 的是  # 实现了  # 这一  # 在这里  # 我会  # 也就  # 有一种  # 渐现  # 给人  # 会对  # 做一个  # 我将  # 下一篇 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  图册素材网站设计制作软件,图册的导出方式有几种？  如何用西部建站助手快速创建专业网站？  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  如何在云服务器上快速搭建个人网站？  如何在七牛云存储上搭建网站并设置自定义域名？  bootstrap日历插件datetimepicker使用方法  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  Laravel如何与Inertia.js和Vue/React构建现代单页应用  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  创业网站制作流程,创业网站可靠吗？  如何实现建站之星域名转发设置？  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  Laravel怎么在Blade中安全地输出原始HTML内容  如何快速生成专业多端适配建站电话？  如何将凡科建站内容保存为本地文件？  android nfc常用标签读取总结  如何做网站制作流程,*游戏网站怎么搭建？  如何用AWS免费套餐快速搭建高效网站？  魔方云NAT建站如何实现端口转发？  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  网站制作大概多少钱一个,做一个平台网站大概多少钱？  百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程  Laravel如何实现文件上传和存储？（本地与S3配置）  高性能网站服务器部署指南：稳定运行与安全配置优化方案  Laravel怎么连接多个数据库_Laravel多数据库连接配置  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  网站建设整体流程解析，建站其实很容易！  JavaScript如何实现路由_前端路由原理是什么  Laravel如何使用查询构建器？（Query Builder高级用法）  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  Laravel API资源类怎么用_Laravel API Resource数据转换  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  Python进程池调度策略_任务分发说明【指导】  JavaScript如何操作视频_媒体API怎么控制播放  html5的keygen标签为什么废弃_替代方案说明【解答】  如何快速生成可下载的建站源码工具？  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  如何在服务器上配置二级域名建站？  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  Laravel如何处理文件下载请求？（Response示例）  Laravel如何实现一对一模型关联？（Eloquent示例）  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  Laravel怎么使用artisan命令缓存配置和视图  java ZXing生成二维码及条码实例分享