zoukankan      html  css  js  c++  java
  • 【Android UI设计与开发】第04期:引导界面(四)仿人人网V5.9.2最新版引导界面

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


    一、实现的效果图


    欢迎界面:



    引导界面1



    引导界面 2


    引导界面 3



    二 、项目的目录结构




    三、具体的编码实现


    1、欢迎界面的xml布局,activity_welcome:

    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="fill_parent"  
    4.     android:layout_height="fill_parent"  
    5.     android:background="@drawable/v5_6_2_welcome"  
    6.     android:orientation="vertical" />  
    2、引导界面的xml布局,activity_guide.xml:

    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="fill_parent"  
    4.     android:layout_height="fill_parent"  
    5.     android:orientation="vertical" >  
    6.   
    7.     <ImageView  
    8.         android:id="@+id/iv_guide_picture"  
    9.         android:layout_width="fill_parent"  
    10.         android:layout_height="fill_parent"  
    11.         android:layout_weight="1.0"  
    12.         android:scaleType="fitXY" />  
    13.   
    14.     <LinearLayout  
    15.         android:id="@+id/ll_bottom_action_bar"  
    16.         android:layout_width="fill_parent"  
    17.         android:layout_height="wrap_content"  
    18.         android:layout_alignParentBottom="true"  
    19.         android:orientation="horizontal"  
    20.         android:padding="7dip" >  
    21.   
    22.         <Button  
    23.             android:id="@+id/btn_register"  
    24.             android:layout_width="fill_parent"  
    25.             android:layout_height="45dip"  
    26.             android:layout_weight="1.5"  
    27.             android:background="@drawable/guide_btn_blue"  
    28.             android:gravity="center"  
    29.             android:singleLine="true"  
    30.             android:text="注  册"  
    31.             android:textColor="#FFFFFF"  
    32.             android:textSize="15.0sp" />  
    33.   
    34.         <Button  
    35.             android:id="@+id/btn_look_at_the_people_i_know"  
    36.             android:layout_width="fill_parent"  
    37.             android:layout_height="45dip"  
    38.             android:layout_marginLeft="8dip"  
    39.             android:layout_marginRight="8dip"  
    40.             android:layout_weight="1.0"  
    41.             android:background="@drawable/guide_btn_white"  
    42.             android:gravity="center"  
    43.             android:singleLine="true"  
    44.             android:text="看看我认识的人"  
    45.             android:textColor="#000000"  
    46.             android:textSize="15.0sp" />  
    47.   
    48.         <Button  
    49.             android:id="@+id/btn_login"  
    50.             android:layout_width="fill_parent"  
    51.             android:layout_height="45dip"  
    52.             android:layout_weight="1.5"  
    53.             android:background="@drawable/guide_btn_blue"  
    54.             android:gravity="center"  
    55.             android:singleLine="true"  
    56.             android:text="登  录"  
    57.             android:textColor="#FFFFFF"  
    58.             android:textSize="15.0sp" />  
    59.     </LinearLayout>  
    60. </RelativeLayout>  
    3、在这里还要创建两个xml资源文件文件来实现自定义按钮的效果,关于自定义按钮的效果实现我会在后面的UI专题详细介绍,这里就不在赘述,guide_btn_blue.xml:

    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
    3.   
    4.     <item android:drawable="@drawable/v5_0_1_guide_blue_default" android:state_focused="true" android:state_pressed="false"/>  
    5.     <item android:drawable="@drawable/v5_0_1_guide_blue_press" android:state_pressed="true"/>  
    6.     <item android:drawable="@drawable/v5_0_1_guide_blue_default"/>  
    7.   
    8. </selector>  
    guide_btn_white:

    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
    3.   
    4.     <item android:drawable="@drawable/v5_0_1_guide_black_default" android:state_focused="true" android:state_pressed="false"/>  
    5.     <item android:drawable="@drawable/v5_0_1_guide_black_press" android:state_pressed="true"/>  
    6.     <item android:drawable="@drawable/v5_0_1_guide_black_default"/>  
    7.   
    8. </selector>  
    4、然后是动画效果的xml资源文件,关于自定义动画效果的实现我也会在后面的UI专题中详细介绍,这里也就不再赘述渐入动画资源文件,guide_fade_in.xml:

    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
    3.       
    4.     <alpha android:fromAlpha="0.0"  
    5.            android:toAlpha="1.0" />  
    6.   
    7. </set>  
    渐隐动画资源文件,guide_fade_out.xml:

    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
    3.   
    4.     <scale  
    5.         android:fillAfter="false"  
    6.         android:fromXScale="1.1"  
    7.         android:fromYScale="1.1"  
    8.         android:interpolator="@android:anim/decelerate_interpolator"  
    9.         android:pivotX="50.0%"  
    10.         android:pivotY="50.0%"  
    11.         android:toXScale="1.1"  
    12.         android:toYScale="1.1" />  
    13.   
    14.     <alpha  
    15.         xmlns:android="http://schemas.android.com/apk/res/android"  
    16.         android:fromAlpha="1.0"  
    17.         android:toAlpha="0.0" />  
    18.   
    19. </set>  
    放大动画资源文件,guide_fade_in_scale:
    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
    3.   
    4.     <scale  
    5.         android:fillAfter="false"  
    6.         android:fromXScale="1.0"  
    7.         android:fromYScale="1.0"  
    8.         android:interpolator="@android:anim/decelerate_interpolator"  
    9.         android:pivotX="50.0%"  
    10.         android:pivotY="50.0%"  
    11.         android:toXScale="1.1"  
    12.         android:toYScale="1.1"/>  
    13.   
    14. </set>  
    5、开始启动的欢迎界WelcomeActivity.java:

    [java] view plaincopy
    1. package com.yangyu.myguideview03;  
    2.   
    3. import android.app.Activity;  
    4. import android.content.Intent;  
    5. import android.os.Bundle;  
    6. import android.os.CountDownTimer;  
    7.   
    8. /** 
    9.  * @author yangyu 
    10.  *  功能描述:欢迎界面Activity(Logo) 
    11.  */  
    12. public class WelcomeActivity extends Activity {    
    13.     
    14.     @Override    
    15.     public void onCreate(Bundle savedInstanceState) {    
    16.         super.onCreate(savedInstanceState);    
    17.         setContentView(R.layout.activity_welcome);    
    18.     
    19.         /** 
    20.          * millisInFuture:从开始调用start()到倒计时完成并onFinish()方法被调用的毫秒数 
    21.          * countDownInterval:接收onTick(long)回调的间隔时间 
    22.          */  
    23.         new CountDownTimer(50001000) {    
    24.             @Override    
    25.             public void onTick(long millisUntilFinished) {    
    26.             }    
    27.     
    28.             @Override    
    29.             public void onFinish() {    
    30.                 Intent intent = new Intent(WelcomeActivity.this, GuideActivity.class);    
    31.                 startActivity(intent);    
    32.                 WelcomeActivity.this.finish();    
    33.             }    
    34.         }.start();    
    35.     }    
    36. }    
    6、引导界面,GuideActivity.java:

    [java] view plaincopy
    1. package com.yangyu.myguideview03;  
    2.   
    3. import android.app.Activity;  
    4. import android.graphics.drawable.Drawable;  
    5. import android.os.Bundle;  
    6. import android.view.View;  
    7. import android.view.View.OnClickListener;  
    8. import android.view.animation.Animation;  
    9. import android.view.animation.Animation.AnimationListener;  
    10. import android.view.animation.AnimationUtils;  
    11. import android.widget.Button;  
    12. import android.widget.ImageView;  
    13. import android.widget.Toast;  
    14.   
    15. /**  
    16.  * @author yangyu  
    17.  * 功能描述:导引界面(每张图片都执行的动画顺序,渐现、放大和渐隐,结束后切换图片和文字  
    18.  * 又开始执行 渐现、放大和渐隐,当最后一张执行完渐隐,切换到第一张,从而达到循环效果)  
    19.  */  
    20. public class GuideActivity extends Activity implements OnClickListener{  
    21.     //定义注册、登录和看看我认识的人按钮  
    22.     private Button btnRegister,btnLogin,btnIKnowPeople;  
    23.        
    24.     //显示图片的ImageView组件   
    25.     private ImageView ivGuidePicture;    
    26.       
    27.     //要展示的一组图片资源   
    28.     private Drawable[] pictures;   
    29.       
    30.     //每张展示图片要执行的一组动画效果  
    31.     private Animation[] animations;  
    32.       
    33.     //当前执行的是第几张图片(资源索引)  
    34.     private int currentItem = 0;    
    35.       
    36.     @Override  
    37.     protected void onCreate(Bundle savedInstanceState) {  
    38.         super.onCreate(savedInstanceState);  
    39.         setContentView(R.layout.activity_guide);  
    40.           
    41.         initView();  
    42.           
    43.         initData();  
    44.     }  
    45.   
    46.     /** 
    47.      * 初始化组件 
    48.      */  
    49.     private void initView(){  
    50.         //实例化ImageView引导图片  
    51.         ivGuidePicture = (ImageView) findViewById(R.id.iv_guide_picture);    
    52.           
    53.         //实例化按钮  
    54.         btnRegister = (Button) findViewById(R.id.btn_register);    
    55.         btnIKnowPeople = (Button) findViewById(R.id.btn_look_at_the_people_i_know);    
    56.         btnLogin = (Button) findViewById(R.id.btn_login);    
    57.     
    58.         //实例化引导图片数组  
    59.         pictures = new Drawable[] { getResources().getDrawable(R.drawable.v5_3_0_guide_pic1),getResources().getDrawable(R.drawable.v5_3_0_guide_pic2),  
    60.                                     getResources().getDrawable(R.drawable.v5_3_0_guide_pic3)};    
    61.     
    62.         //实例化动画效果数组  
    63.         animations = new Animation[] { AnimationUtils.loadAnimation(this, R.anim.guide_fade_in),    
    64.                                        AnimationUtils.loadAnimation(this, R.anim.guide_fade_in_scale),    
    65.                                        AnimationUtils.loadAnimation(this, R.anim.guide_fade_out) };    
    66.     }  
    67.   
    68.     /** 
    69.      * 初始化数据 
    70.      */  
    71.     private void initData(){  
    72.         //给按钮设置监听  
    73.         btnRegister.setOnClickListener(this);    
    74.         btnIKnowPeople.setOnClickListener(this);    
    75.         btnLogin.setOnClickListener(this);  
    76.                        
    77.         //给每个动画效果设置播放时间  
    78.         animations[0].setDuration(1500);    
    79.         animations[1].setDuration(3000);    
    80.         animations[2].setDuration(1500);    
    81.     
    82.         //给每个动画效果设置监听事件  
    83.         animations[0].setAnimationListener(new GuideAnimationListener(0));    
    84.         animations[1].setAnimationListener(new GuideAnimationListener(1));    
    85.         animations[2].setAnimationListener(new GuideAnimationListener(2));    
    86.           
    87.         //设置图片动画初始化默认值为0  
    88.         ivGuidePicture.setImageDrawable(pictures[currentItem]);    
    89.         ivGuidePicture.startAnimation(animations[0]);   
    90.     }  
    91.   
    92.     /** 
    93.      * 实现了动画监听接口,重写里面的方法 
    94.      */  
    95.     class GuideAnimationListener implements AnimationListener {             
    96.         private int index;    
    97.     
    98.         public GuideAnimationListener(int index) {    
    99.             this.index = index;    
    100.         }    
    101.     
    102.         @Override    
    103.         public void onAnimationStart(Animation animation) {    
    104.         }    
    105.           
    106.         //重写动画结束时的监听事件,实现了动画循环播放的效果  
    107.         @Override    
    108.         public void onAnimationEnd(Animation animation) {    
    109.             if (index < (animations.length - 1)) {    
    110.                 ivGuidePicture.startAnimation(animations[index + 1]);    
    111.             } else {    
    112.                 currentItem++;    
    113.                 if (currentItem > (pictures.length - 1)) {    
    114.                     currentItem = 0;    
    115.                 }    
    116.                 ivGuidePicture.setImageDrawable(pictures[currentItem]);    
    117.                 ivGuidePicture.startAnimation(animations[0]);    
    118.             }    
    119.         }    
    120.     
    121.         @Override    
    122.         public void onAnimationRepeat(Animation animation) {    
    123.     
    124.         }    
    125.     
    126.     }   
    127.       
    128.     @Override  
    129.     public void onClick(View v) {  
    130.          switch (v.getId()) {    
    131.             case R.id.btn_register:   
    132.                 Toast.makeText(this"点击了注册按钮", Toast.LENGTH_SHORT).show();  
    133.                 break;    
    134.             case R.id.btn_look_at_the_people_i_know:  
    135.                 Toast.makeText(this"点击了我认识的人按钮", Toast.LENGTH_SHORT).show();  
    136.                 break;    
    137.             case R.id.btn_login:        
    138.                 Toast.makeText(this"点击了登录按钮", Toast.LENGTH_SHORT).show();  
    139.                 break;    
    140.             default:    
    141.                 break;    
    142.             }    
    143.     }  
    144. }  
               下一篇将会对整个引导界面的开发专题做一个完结篇,敬请期待。


    源码下载地址

  • 相关阅读:
    进击的UI------------UIToolBar(bottom导航条)
    进击的UI-------------------UIPageControl(滑动控制)
    进击的UI---------------------UIStepper(加减)
    进击的UI--------------UIActionSheet(提示)
    python生成固定格式且不会重复的用户名
    python多判断if,elif语句优化
    python代码出现异常,自动重新运行
    批处理+adb命令实现Android截图小工具
    python爬取百度图片后自动上传
    map和filter函数
  • 原文地址:https://www.cnblogs.com/guoyaohua/p/8502928.html
Copyright © 2011-2022 走看看