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

时间:2022-07-27
本文章向大家介绍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), 
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; 
} 
} 
}

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

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

随机文章
java知识点必读
最近更新