Android仿QQ微信開場導航以及登陸界面

    相信大家對於微信等社交應用的UI界面已經都很熟悉了，該UI最值得借鑑的莫過於第一次使用的時候一些列產品介紹的圖片，可以左右滑動瀏覽，最後進入應用，這一效果適用於多種項目中，相信今後開發應用一定會用得到。網路上也有不少這樣的例子可以參考，不過看別人的代碼是一回事，自己實際做起來又是另一回事，今天的這個微信的Demo是研究過多個類似的界面後自己動手去實現的效果，並且都加上了詳細的註釋(雖然有的多餘)，方便以後回顧一看就能看明白，只有真正親自寫一寫，體會纔會更深刻，例子中的圖片都是在微信的APK中提取出來的，涉及到的知識點無外乎是ViewPager和Animation。

 首先是開場閃屏的一個界面，使用handler控制該頁面指定時間後進行跳轉

                                   

package com.example.weichat.UI;

import com.example.weichat.R;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

/** 開場歡迎動畫 */
public class WelcomeA extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.strat);
		//延遲兩秒後執行run方法中的頁面跳轉
		new Handler().postDelayed(new Runnable() {

			@Override
			public void run() {
				Intent intent = new Intent(WelcomeA.this, WhatsnewPagesA.class);
				startActivity(intent);
				WelcomeA.this.finish();
			}
		}, 2000);
	

 

————————————————————————————————————————————————————————————————

          接着是主要的部分，也就是一系列的功能介紹圖片，主要是viewpager來實現，嵌套在上面的小圓點的跟隨導航也是要實現的效果之一

                                                           

 

package com.example.weichat.UI;

import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import com.example.weichat.R;

/** What's new 的導航界面 */
public class WhatsnewPagesA extends Activity {
	/** Viewpager對象 */
	private ViewPager viewPager;
	private ImageView imageView;
	/** 創建一個數組，用來存放每個頁面要顯示的View */
	private ArrayList<View> pageViews;
	/** 創建一個imageview類型的數組，用來表示導航小圓點 */
	private ImageView[] imageViews;
	/** 裝顯示圖片的viewgroup */
	private ViewGroup viewPictures;
	/** 導航小圓點的viewgroup */
	private ViewGroup viewPoints;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		LayoutInflater inflater = getLayoutInflater();
		pageViews = new ArrayList<View>();
		pageViews.add(inflater.inflate(R.layout.viewpager01, null));
		pageViews.add(inflater.inflate(R.layout.viewpager02, null));
		pageViews.add(inflater.inflate(R.layout.viewpager03, null));
		pageViews.add(inflater.inflate(R.layout.viewpager04, null));
		pageViews.add(inflater.inflate(R.layout.viewpager05, null));
		pageViews.add(inflater.inflate(R.layout.viewpager06, null));

		// 小圓點數組，大小是圖片的個數
		imageViews = new ImageView[pageViews.size()];
		// 從指定的XML文件中加載視圖
		viewPictures = (ViewGroup) inflater.inflate(R.layout.viewpagers, null);

		viewPager = (ViewPager) viewPictures.findViewById(R.id.guidePagers);
		viewPoints = (ViewGroup) viewPictures.findViewById(R.id.viewPoints);

		// 添加小圓點導航的圖片
		for (int i = 0; i < pageViews.size(); i++) {
			imageView = new ImageView(WhatsnewPagesA.this);
			imageView.setLayoutParams(new LayoutParams(20, 20));
			imageView.setPadding(5, 0, 5, 0);
			// 吧小圓點放進數組中
			imageViews[i] = imageView;
			// 默認選中的是第一張圖片，此時第一個小圓點是選中狀態，其他不是
			if (i == 0)
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_focused));
			else
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_unfocused));
			// 將imageviews添加到小圓點視圖組
			viewPoints.addView(imageViews[i]);
		}

		setContentView(viewPictures);

		viewPager.setAdapter(new NavigationPageAdapter());
		// 爲viewpager添加監聽，當view發生變化時的響應
		viewPager.setOnPageChangeListener(new NavigationPageChangeListener());
	}

	// 導航圖片view的適配器，必須要實現的是下面四個方法
	class NavigationPageAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return pageViews.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		// 初始化每個Item
		@Override
		public Object instantiateItem(View container, int position) {
			((ViewPager) container).addView(pageViews.get(position));
			return pageViews.get(position);
		}

		// 銷燬每個Item
		@Override
		public void destroyItem(View container, int position, Object object) {
			((ViewPager) container).removeView(pageViews.get(position));
		}

	}

	// viewpager的監聽器，主要是onPageSelected要實現
	class NavigationPageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {

		}

		@Override
		public void onPageSelected(int position) {
			// 循環主要是控制導航中每個小圓點的狀態
			for (int i = 0; i < imageViews.length; i++) {
				// 當前view下設置小圓點爲選中狀態
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_focused));
				// 其餘設置爲飛選中狀態
				if (position != i)
					imageViews[i].setImageDrawable(getResources().getDrawable(
							R.drawable.page_indicator_unfocused));
			}
		}

	}

	// 開始按鈕方法，開始按鈕在XML文件中onClick屬性設置；
	// 我試圖把按鈕在本activity中實例化並設置點擊監聽，但總是報錯，使用這個方法後沒有報錯，原因沒找到
	public void startbutton(View v) {
		Intent intent = new Intent(WhatsnewPagesA.this, WhatsnewAnimationA.class);
		startActivity(intent);
		WhatsnewPagesA.this.finish();
	}

}

—————————————————————————————————————————————————————————————————

 

     而後的便是開門的動畫效果了，這一塊還是比較簡單的，分別控制兩幅圖片的移動動畫就可以實現

                        

package com.example.weichat.UI;

import com.example.weichat.R;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

/**導航過後的動畫效果界面*/
public class WhatsnewAnimationA extends Activity {

	private ImageView img_left, img_right;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.whatnew_animation);
		img_left = (ImageView) findViewById(R.id.doorpage_left);
		img_right = (ImageView) findViewById(R.id.doorpage_right);

		//創建一個AnimationSet對象
		AnimationSet animLeft = new AnimationSet(true);
		TranslateAnimation transLeft = new TranslateAnimation(
				Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
				-1f, Animation.RELATIVE_TO_SELF, 0f,
				Animation.RELATIVE_TO_SELF, 0f);
		//設置動畫效果持續的時間
		transLeft.setDuration(2000);
		//將anim對象添加到AnimationSet對象中
		animLeft.addAnimation(transLeft);
		animLeft.setFillAfter(true);
		img_left.startAnimation(transLeft);
		transLeft.startNow();
		
		
		
		//創建一個AnimationSet對象
		AnimationSet animRight = new AnimationSet(true);
		TranslateAnimation transRight = new TranslateAnimation(
				Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
				1f, Animation.RELATIVE_TO_SELF, 0f,
				Animation.RELATIVE_TO_SELF, 0f);
		//設置動畫效果持續的時間
		transRight.setDuration(2000);
		//將anim對象添加到AnimationSet對象中
		animRight.addAnimation(transRight);
		animRight.setFillAfter(true);
		img_right.startAnimation(transRight);
		transRight.startNow();
		
		new Handler().postDelayed(new Runnable() {
			
			@Override
			public void run() {
				// TODO Auto-generated method stub
				Intent intent = new Intent(WhatsnewAnimationA.this, FirstPageA.class);
				startActivity(intent);
				WhatsnewAnimationA.this.finish();
			}
		}, 1000);
	}
	

}

最後進入到我們的登陸界面，就是一個簡單的微信登陸佈局，代碼就不貼了

                                       

 

    OK了，以上就是微信第一次使用的時候開場功能介紹和動畫，比較使用，適用於爲自己發佈新產品的時候作爲導航簡介，大家可以根據具體要求具體設計，不過大致思路都是這樣的。

 

額，代碼連接如下，大家自行下載吧

http://download.csdn.net/detail/eyu8874521/5503755