Android UI設計與開發之仿人人網V5.9.2最新版引導界面

2019-10-22 18:28:54

字體：大中小

來源：轉載

供稿：網友

這一篇我將會以人人網的引導界面為實例來展開詳細的講解，人人網的引導界面比較的新穎，不同于其他應用程序千篇一律的靠滑動來引導用戶，而是以一個一個比較生動形象的動畫效果展示在用戶們的面前，有一種給人眼前一亮的感覺，話不多說，進入正題。

一、實現的效果圖

歡迎界面：

Android,UI,人人網,引導界面

引導界面1

Android,UI,人人網,引導界面

引導界面 2

Android,UI,人人網,引導界面

引導界面 3

Android,UI,人人網,引導界面

二、項目的目錄結構

Android,UI,人人網,引導界面

三、具體的編碼實現

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;    }  } }

下一篇將會對整個引導界面的開發專題做一個完結篇，敬請期待。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：Android ViewPager實現左右滑動的實例

下一篇：Android 逐幀動畫創建實例詳解