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 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();

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

　　}

　　}

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