Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> 實戰Android仿人人客戶端之歡迎和導引界面的編碼實現

實戰Android仿人人客戶端之歡迎和導引界面的編碼實現

編輯：Android開發實例

基於 實戰Android仿人人客戶端之主流程（活動）圖及類圖  這篇的分析，這篇開始搭建項目初步框架，編碼實現歡迎和導引界面。

一、自定義類繼承Application，用於存放全局變量和公用的資源等，代碼如下：

  1. package com.copyeveryone.android;  
  2.  
  3. import java.util.LinkedList;  
  4. import java.util.List;  
  5.  
  6. import android.app.Activity;  
  7. import android.app.Application;  
  8.  
  9. /**  
  10.  * 功能描述：用於存放全局變量和公用的資源等  
  11.  * @author android_ls  
  12.  */ 
  13. public class CopyEveryoneApplication extends Application {  
  14.  
  15.     private List<Activity> activitys = new LinkedList<Activity>();  
  16.  
  17.     // 應用程序的入口  
  18.     @Override 
  19.     public void onCreate() {  
  20.  
  21.     }  
  22.  
  23.     public void addActivity(Activity activity) {  
  24.         activitys.add(activity);  
  25.     }  
  26.  
  27.     @Override 
  28.     public void onTerminate() {  
  29.         for (Activity activity : activitys) {  
  30.             activity.finish();  
  31.         }  
  32.         System.exit(0);  
  33.     }  
  34.  
  35. } 

二、應用中界面（Activity）的基類，代碼如下：

  1. package com.copyeveryone.android;  
  2.  
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.widget.Toast;  
  6.  
  7. /**  
  8.  * 功能描述：應用中界面（Activity）的基類  
  9.  * 對原有的Activity類進行擴展  
  10.  * @author android_ls  
  11.  */ 
  12. public abstract class AppBaseActivity extends Activity {  
  13.  
  14.     @Override 
  15.     protected void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         ((CopyEveryoneApplication) this.getApplication()).addActivity(this);  
  18.         setContentView(getLayoutId());  
  19.  
  20.         // 初始化組件  
  21.         setupView();  
  22.         // 初始化數據  
  23.         initializedData();  
  24.     }  
  25.  
  26.     /**  
  27.      * 布局文件ID  
  28.      * @return  
  29.      */ 
  30.     protected abstract int getLayoutId();  
  31.  
  32.     /**  
  33.      * 初始化組件  
  34.      */ 
  35.     protected abstract void setupView();  
  36.  
  37.     /**  
  38.      * 初始化數據  
  39.      */ 
  40.     protected abstract void initializedData();  
  41.  
  42.     /**  
  43.      * 顯示Toast形式的提示信息  
  44.      * @param message  
  45.      */ 
  46.     protected void show(String message) {  
  47.         Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();  
  48.     }  
  49.  
  50. }  


三、歡迎界面（LOGO）的實現，代碼如下：

  1. package com.copyeveryone.android.ui;  
  2.  
  3. import android.app.Activity;  
  4. import android.content.Intent;  
  5. import android.os.Bundle;  
  6. import android.os.CountDownTimer;  
  7.  
  8. import com.copyeveryone.android.R;  
  9.  
  10. /**  
  11.  * 功能描述：歡迎界面（LOGO）  
  12.  * @author android_ls  
  13.  */ 
  14. public class WelcomeActivity extends Activity {  
  15.  
  16.     @Override 
  17.     public void onCreate(Bundle savedInstanceState) {  
  18.         super.onCreate(savedInstanceState);  
  19.         setContentView(R.layout.welcome);  
  20.  
  21.         new CountDownTimer(1000, 1000) {  
  22.  
  23.             @Override 
  24.             public void onTick(long millisUntilFinished) {  
  25.                 // TODO Auto-generated method stub  
  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.  
  37. }  


布局文件welcome.xml：

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <FrameLayout 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_0_1_welcome" 
  6.     android:orientation="vertical" /> 

四、導引界面的實現，界面效果動畫原理：每張圖片都執行的動畫順序，漸現、放大和漸隱，結束後切換圖片和文字又開始執行 漸現、放大和漸隱...，當最後一張執行完漸隱，切換到第一張，從而達到循環效果。具體代碼如下：

  1. package com.copyeveryone.android.ui;  
  2.  
  3. import android.graphics.drawable.Drawable;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.view.animation.Animation;  
  7. import android.view.animation.Animation.AnimationListener;  
  8. import android.view.animation.AnimationUtils;  
  9. import android.widget.Button;  
  10. import android.widget.ImageView;  
  11. import android.widget.TextView;  
  12.  
  13. import com.copyeveryone.android.AppBaseActivity;  
  14. import com.copyeveryone.android.R;  
  15.  
  16. /**  
  17.  * 功能描述：導引界面  
  18.  * 界面效果動畫原理：每張圖片都執行的動畫順序，漸現、放大和漸隱，結束後切換圖片和文字  
  19.  * 又開始執行 漸現、放大和漸隱...，當最後一張執行完漸隱，切換到第一張，從而達到循環效果。  
  20.  * @author android_ls  
  21.  */ 
  22. public class GuideActivity extends AppBaseActivity implements View.OnClickListener {  
  23.  
  24.     /**  
  25.      * 注冊按鈕  
  26.      */ 
  27.     private Button btnRegister;  
  28.  
  29.     /**  
  30.      * 看看我認識的人按鈕  
  31.      */ 
  32.     private Button btnLookAtThePeopleIKnow;  
  33.  
  34.     /**  
  35.      * 登錄按鈕  
  36.      */ 
  37.     private Button btnLogin;  
  38.  
  39.     /**  
  40.      * 顯示圖片的ImageView組件  
  41.      */ 
  42.     private ImageView ivGuidePicture;  
  43.  
  44.     /**  
  45.      * 顯示圖片的對應的文字描述文本組件  
  46.      */ 
  47.     private TextView tvGuideContent;  
  48.  
  49.     /**  
  50.      * 要展示的一組圖片資源  
  51.      */ 
  52.     private Drawable[] pictures;  
  53.  
  54.     /**  
  55.      * 每張展示圖片要執行的一組動畫效果  
  56.      */ 
  57.     private Animation[] animations;  
  58.  
  59.     /**  
  60.      * 當前執行的是第幾張圖片（資源索引）  
  61.      */ 
  62.     private int position = 0;  
  63.  
  64.     /**  
  65.      * 要展示的圖片對應的文本描述（圖片與文字一一對應）  
  66.      */ 
  67.     private String[] texts = { "兒時友,莫相忘", "同學情,請珍藏", "共奮斗,同分享", "感謝一路有你", "青春勇敢飛翔", "理想從未遠去" };  
  68.  
  69.     @Override 
  70.     public void onCreate(Bundle savedInstanceState) {  
  71.         super.onCreate(savedInstanceState);  
  72.  
  73.         tvGuideContent.setText(texts[position]);  
  74.         ivGuidePicture.setImageDrawable(pictures[position]);  
  75.         ivGuidePicture.startAnimation(animations[0]);  
  76.     }  
  77.  
  78.     @Override 
  79.     protected int getLayoutId() {  
  80.         return R.layout.guide;  
  81.     }  
  82.  
  83.     @Override 
  84.     protected void setupView() {  
  85.         ivGuidePicture = (ImageView) findViewById(R.id.iv_guide_picture);  
  86.         tvGuideContent = (TextView) findViewById(R.id.tv_guide_content);  
  87.         btnRegister = (Button) findViewById(R.id.btn_register);  
  88.         btnLookAtThePeopleIKnow = (Button) findViewById(R.id.btn_look_at_the_people_i_know);  
  89.         btnLogin = (Button) findViewById(R.id.btn_login);  
  90.  
  91.         btnRegister.setOnClickListener(this);  
  92.         btnLookAtThePeopleIKnow.setOnClickListener(this);  
  93.         btnLogin.setOnClickListener(this);  
  94.  
  95.     }  
  96.  
  97.     @Override 
  98.     protected void initializedData() {  
  99.         pictures = new Drawable[] { getResources().getDrawable(R.drawable.v5_0_1_guide_pic1), getResources().getDrawable(R.drawable.v5_0_1_guide_pic2),  
  100.                 getResources().getDrawable(R.drawable.v5_0_1_guide_pic3), getResources().getDrawable(R.drawable.v5_3_0_guide_pic1),  
  101.                 getResources().getDrawable(R.drawable.v5_3_0_guide_pic2), getResources().getDrawable(R.drawable.v5_3_0_guide_pic3) };  
  102.  
  103.         animations = new Animation[] { AnimationUtils.loadAnimation(this, R.anim.v5_0_1_guide_welcome_fade_in),  
  104.                 AnimationUtils.loadAnimation(this, R.anim.v5_0_1_guide_welcome_fade_in_scale),  
  105.                 AnimationUtils.loadAnimation(this, R.anim.v5_0_1_guide_welcome_fade_out) };  
  106.  
  107.         animations[0].setDuration(1500);  
  108.         animations[1].setDuration(3000);  
  109.         animations[2].setDuration(1500);  
  110.  
  111.         animations[0].setAnimationListener(new GuideAnimationListener(0));  
  112.         animations[1].setAnimationListener(new GuideAnimationListener(1));  
  113.         animations[2].setAnimationListener(new GuideAnimationListener(2));  
  114.     }  
  115.  
  116.     @Override 
  117.     public void onClick(View v) {  
  118.  
  119.         switch (v.getId()) {  
  120.         case R.id.btn_register:  
  121.             show("抱歉，該功能暫未提供！");  
  122.             break;  
  123.         case R.id.btn_look_at_the_people_i_know:  
  124.             show("抱歉，該功能暫未提供！");  
  125.             break;  
  126.         case R.id.btn_login:  
  127.  
  128.             break;  
  129.         default:  
  130.             break;  
  131.         }  
  132.     }  
  133.  
  134.     class GuideAnimationListener implements AnimationListener {  
  135.  
  136.         private int index;  
  137.  
  138.         public GuideAnimationListener(int index) {  
  139.             this.index = index;  
  140.         }  
  141.  
  142.         @Override 
  143.         public void onAnimationStart(Animation animation) {  
  144.             // TODO Auto-generated method stub  
  145.         }  
  146.  
  147.         @Override 
  148.         public void onAnimationEnd(Animation animation) {  
  149.             if (index < (animations.length - 1)) {  
  150.                 ivGuidePicture.startAnimation(animations[index + 1]);  
  151.             } else {  
  152.                 position++;  
  153.                 if (position > (pictures.length - 1)) {  
  154.                     position = 0;  
  155.                 }  
  156.  
  157.                 System.out.println("position = " + position);  
  158.  
  159.                 tvGuideContent.setText(texts[position]);  
  160.                 ivGuidePicture.setImageDrawable(pictures[position]);  
  161.                 ivGuidePicture.startAnimation(animations[0]);  
  162.             }  
  163.         }  
  164.  
  165.         @Override 
  166.         public void onAnimationRepeat(Animation animation) {  
  167.  
  168.         }  
  169.  
  170.     }  
  171.  
  172. }  

布局文件guide.xml：

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <FrameLayout 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.     <RelativeLayout 
  8.         android:layout_width="fill_parent" 
  9.         android:layout_height="fill_parent" 
  10.         android:orientation="vertical" > 
  11.  
  12.         <ImageView 
  13.             android:id="@+id/iv_guide_picture" 
  14.             android:layout_width="fill_parent" 
  15.             android:layout_height="fill_parent" 
  16.             android:layout_weight="1.0" 
  17.             android:scaleType="fitXY" /> 
  18.  
  19.         <LinearLayout 
  20.             android:id="@+id/ll_bottom_action_bar" 
  21.             android:layout_width="fill_parent" 
  22.             android:layout_height="wrap_content" 
  23.             android:layout_alignParentBottom="true" 
  24.             android:orientation="horizontal" 
  25.             android:padding="7dip" > 
  26.  
  27.             <Button 
  28.                 android:id="@+id/btn_register" 
  29.                 android:layout_width="fill_parent" 
  30.                 android:layout_height="45dip" 
  31.                 android:layout_weight="1.5" 
  32.                 android:background="@drawable/guide_btn_blue_selector" 
  33.                 android:gravity="center" 
  34.                 android:singleLine="true" 
  35.                 android:text="注  冊" 
  36.                 android:textColor="#FFFFFF" 
  37.                 android:textSize="15.0sp" /> 
  38.  
  39.             <Button 
  40.                 android:id="@+id/btn_look_at_the_people_i_know" 
  41.                 android:layout_width="fill_parent" 
  42.                 android:layout_height="45dip" 
  43.                 android:layout_marginLeft="8dip" 
  44.                 android:layout_marginRight="8dip" 
  45.                 android:layout_weight="1.0" 
  46.                 android:background="@drawable/guide_btn_white_selector" 
  47.                 android:gravity="center" 
  48.                 android:singleLine="true" 
  49.                 android:text="看看我認識的人" 
  50.                 android:textColor="#000000" 
  51.                 android:textSize="15.0sp" /> 
  52.  
  53.             <Button 
  54.                 android:id="@+id/btn_login" 
  55.                 android:layout_width="fill_parent" 
  56.                 android:layout_height="45dip" 
  57.                 android:layout_weight="1.5" 
  58.                 android:background="@drawable/guide_btn_blue_selector" 
  59.                 android:gravity="center" 
  60.                 android:singleLine="true" 
  61.                 android:text="登  錄" 
  62.                 android:textColor="#FFFFFF" 
  63.                 android:textSize="15.0sp" /> 
  64.         </LinearLayout> 
  65.  
  66.         <LinearLayout 
  67.             android:layout_width="fill_parent" 
  68.             android:layout_height="wrap_content" 
  69.             android:layout_above="@+id/ll_bottom_action_bar" 
  70.             android:layout_marginBottom="40dip" 
  71.             android:orientation="vertical" > 
  72.  
  73.             <TextView 
  74.                 android:id="@+id/tv_guide_content" 
  75.                 android:layout_width="wrap_content" 
  76.                 android:layout_height="wrap_content" 
  77.                 android:layout_gravity="center_horizontal" 
  78.                 android:gravity="center" 
  79.                 android:textColor="#FFFFFF" 
  80.                 android:textSize="25.0sp" 
  81.                 android:textStyle="bold" /> 
  82.         </LinearLayout> 
  83.     </RelativeLayout> 
  84.  
  85. </FrameLayout> 

資源文件guide_btn_blue_selector.xml：

  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_selector.xml：

  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> 

漸入動畫資源文件v5_0_1_guide_welcome_fade_in.xml：

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" > 
  3.  
  4.     <alpha 
  5.         android:fromAlpha="0.0" 
  6.         android:toAlpha="1.0" /> 
  7.  
  8. </set> 

放大動畫資源文件v5_0_1_guide_welcome_fade_in_scale.xml：

  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> 

漸隱動畫資源文件v5_0_1_guide_welcome_fade_out.xml：

  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> 

注：所涉及的圖片在人人官方的android應用中都有。

五、運行效果圖：

 

 

 

 

 

 

 

轉自：http://blog.csdn.net/android_ls/article/details/8711766

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
web app與原生app的區別 Android JSON解析器 Android中文API（136） —— GeoCoder 手把手教你Android來去電通話自動錄音的方法 Android MediaPlayer(多媒體播放) Android開發指南(30) —— Multimedia and Camera
Android

1.盡量使用線性布局（LinearLayout)和相對布局(Re
Android登錄實例

登錄應用程序的屏幕，詢問憑據登錄到一些特定的應用。可能需要登錄到Face
Android登錄實例

登錄應用程序的屏幕，詢問憑據登錄到一些特定的應用。可能需要登錄到Face
Android編程之界面跳動提示動畫效果實現方法

本文實例講述了Android編程之界面跳動提示動畫效果實現方法。
閱讀排行版
Copyright © Android教程網 All Rights Reserved