Android仿微信之界面導航篇（1）

更新時間：2018年04月14日 14:49:01 作者：張亞波

這篇文章主要為大家詳細介紹了Android仿微信之界面導航篇，教大家實現(xiàn)滑動界面效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信是現(xiàn)在比較流行的應用了，在各大安卓市場幾乎都是名列前茅了。

說實話不得不羨慕騰訊龐大的用戶群體，只要騰訊敢做，就會有很多人去用。

廢話不多說，下面就開始說一下如何實現(xiàn)微信的第一次啟動程序的用戶導航，ViewPager相信大家都不陌生了，是google放出的一個安卓低版本的兼容包android-support-v4.jar，里面有很多類我們可以去使用。那這個導航就是使用這個類來輔助完成的，在每一個View里放置一個圖片，當我們使用ViewPager滑動界面的時候，就會看到一張張圖片，從而實現(xiàn)這個效果，我們來看一下官方的：

其實使用過微信的用戶都知道，每次啟動程序都會有這個啟動畫面，如果是第一次使用當然還會出現(xiàn)后面的導航界面。下面以第一次使用為例，來說明如何實現(xiàn)。當啟動出現(xiàn)進入第一個Activity，其實就是那個啟動畫面，有地球那個，之后會在這個Activity里面設置一個Handler去延遲（1秒，數(shù)值可以自己設定）執(zhí)行啟動導航界面的Activity，代碼如下：

import android.os.Bundle; 
import android.os.Handler; 
import android.app.Activity; 
import android.content.Intent; 
import android.view.Window; 
import android.view.WindowManager; 
 
public class Appstart extends Activity{ 
 
 /* 
 * 2012.11.1 
 * @author:wangjinyu501 
 * 這個Activiyt是程序啟動畫面，也就是一個圖片。在這個Activity里使用了Handler一秒后會進入到引導Activity里面。 
 */ 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
 
 super.onCreate(savedInstanceState); 
 requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉標題欄，注意一定要在繪制view之前調用這個方法，不然會出現(xiàn) 
 //AndroidRuntimeException: requestFeature() must be called before adding content 這個錯誤。 
 setContentView(R.layout.appstart); 
 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN); //全屏顯示 
 
 new Handler().postDelayed(new Runnable(){ 
 public void run(){ 
 Intent intent = new Intent (Appstart.this,Viewpager.class); 
 startActivity(intent); 
 this.finish();//結束本Activity 
 } 
 }, 1000); 
 } 
}

之后就進入前面說的導航頁面了，其實就是多個View，每一個View就是一張圖片，非常簡單，而且就是基于ViewPager實現(xiàn)的，唯一有一些難度的就是當我們滑動圖片的時候，下面那些移動的小圓點會隨著改變。這種效果在其他程序的導航界面中也是很常見的。代碼如下：

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.PagerTitleStrip; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.animation.Animation; 
import android.view.animation.TranslateAnimation; 
import android.widget.ImageView; 
 
 
public class Viewpager extends Activity { 
 
 private ViewPager mViewPager;//聲明ViewPager對象 
 private PagerTitleStrip mPagerTitleStrip;//聲明動畫標題 
 private ImageView mPageImg;// 動畫圖片 
 private int currIndex = 0;//當前頁面 
 private ImageView mPage0,mPage1,mPage2,mPage3,mPage4,mPage5,mPage6,mPage7,mPage8;//聲明導航圖片對象 
 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.viewpager); 
 mViewPager = (ViewPager)findViewById(R.id.viewpager); 
 mViewPager.setOnPageChangeListener(new MyOnPageChangeListener()); 
 mPagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertitle); 
 
 mPage0 = (ImageView)findViewById(R.id.page0); 
 mPage1 = (ImageView)findViewById(R.id.page1); 
 mPage2 = (ImageView)findViewById(R.id.page2); 
 mPage3 = (ImageView)findViewById(R.id.page3); 
 mPage4 = (ImageView)findViewById(R.id.page4); 
 mPage5 = (ImageView)findViewById(R.id.page5); 
 mPage6 = (ImageView)findViewById(R.id.page6); 
 mPage7 = (ImageView)findViewById(R.id.page7); 
 mPage8 = (ImageView)findViewById(R.id.page8); 
  
 //將要分頁顯示的View裝入數(shù)組中 
 LayoutInflater mLi = LayoutInflater.from(this); 
 View view1 = mLi.inflate(R.layout.view1, null); 
 View view2 = mLi.inflate(R.layout.view2, null); 
 View view3 = mLi.inflate(R.layout.view3, null); 
 View view4 = mLi.inflate(R.layout.view4, null); 
 View view5 = mLi.inflate(R.layout.view5, null); 
 View view6 = mLi.inflate(R.layout.view6, null); 
 View view7 = mLi.inflate(R.layout.view7, null); 
 View view8 = mLi.inflate(R.layout.view8, null); 
 View view9 = mLi.inflate(R.layout.view9, null); 
  
 //每個頁面的view數(shù)據(jù) 
 final ArrayList<View> views = new ArrayList<View>(); 
 views.add(view1); 
 views.add(view2); 
 views.add(view3); 
 views.add(view4); 
 views.add(view5); 
 views.add(view6); 
 views.add(view7); 
 views.add(view8); 
 views.add(view9); 
 //每一個也沒得標題 
 final ArrayList<String> titles = new ArrayList<String>(); 
 titles.add("①"); 
 titles.add("②"); 
 titles.add("③"); 
 titles.add("④"); 
 titles.add("⑤"); 
 titles.add("⑥"); 
 titles.add("⑦"); 
 titles.add("⑧"); 
 titles.add("⑨"); 
  
 //填充ViewPager的數(shù)據(jù)適配器，我們重寫即可 
 PagerAdapter mPagerAdapter = new PagerAdapter() { 
 
 @Override 
 public boolean isViewFromObject(View arg0, Object arg1) { 
 return arg0 == arg1; 
 } 
 
 @Override 
 public int getCount() { 
 return views.size(); 
 } 
 
 @Override 
 public void destroyItem(View container, int position, Object object) { 
 ((ViewPager)container).removeView(views.get(position)); 
 } 
 
 @Override 
 public CharSequence getPageTitle(int position) { 
 return titles.get(position); 
 } 
 
 @Override 
 public Object instantiateItem(View container, int position) { 
 ((ViewPager)container).addView(views.get(position)); 
 return views.get(position); 
 } 
 }; 
 
 mViewPager.setAdapter(mPagerAdapter);//與ListView用法相同，設置重寫的Adapter。這樣就實現(xiàn)了ViewPager的滑動效果。 
 } 
 
 public class MyOnPageChangeListener implements OnPageChangeListener { 
 
 public void onPageSelected(int arg0) {//參數(shù)arg0為選中的View 
 
 Animation animation = null;//聲明動畫對象 
 switch (arg0) { 
 case 0: //頁面一 
 mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));//進入第一個導航頁面，小圓點為選中狀態(tài)，下一個頁面的小圓點是未選中狀態(tài)。 
 mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 if (currIndex == arg0+1) { 
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);//圓點移動效果動畫，從當前View移動到下一個View 
 } 
 break; 
 case 1: //頁面二 
 mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));//當前View 
 mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page));//上一個View 
 mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));//下一個View 
 if (currIndex == arg0-1) {//如果滑動到上一個View 
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); //圓點移動效果動畫，從當前View移動到下一個View 
 
  
 } else if (currIndex == arg0+1) {//圓點移動效果動畫，從當前View移動到下一個View，下同。 
 
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0); 
 } 
 break; 
 case 2: //頁面三 
 mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); 
 mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 if (currIndex == arg0-1) { 
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); 
 } else if (currIndex == arg0+1) { 
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0); 
 } 
 break; 
 case 3: 
 mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); 
 mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 if (currIndex == arg0-1) { 
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); 
  
 } else if (currIndex == arg0+1) { 
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0); 
 } 
 break; 
 case 4: 
 mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); 
 mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 if (currIndex == arg0-1) { 
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); 
 } else if (currIndex == arg0+1) { 
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0); 
 } 
 break; 
 case 5: 
 mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); 
 mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 if (currIndex == arg0-1) { 
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); 
 } else if (currIndex == arg0+1) { 
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0); 
 } 
 break; 
 case 6: 
 mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); 
 mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 mPage7.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 if (currIndex == arg0-1) { 
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); 
 } else if (currIndex == arg0+1) { 
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0); 
 } 
 break; 
 case 7: 
 mPage7.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); 
 mPage8.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 if (currIndex == arg0-1) { 
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); 
 } else if (currIndex == arg0+1) { 
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0); 
 } 
 break; 
 case 8: 
 mPage8.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); 
 mPage7.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 if (currIndex == arg0-1) { 
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); 
 } 
 break; 
 } 
 currIndex = arg0;//設置當前View 
 animation.setFillAfter(true);// True:設置圖片停在動畫結束位置 
 animation.setDuration(300);//設置動畫持續(xù)時間 
 } 
 
 public void startbutton(View v) { 
 Intent intent = new Intent(); 
 intent.setClass(Viewpager.this,Viewdoor.class);//進入到開門效果的Activity 
 startActivity(intent); 
 this.finish();//結束本Activity 
 } 
 
}

下面再看一下導航Activity的布局文件，

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical" > 
 
 <android.support.v4.view.ViewPager 
 android:id="@+id/viewpager" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="center" > 
 
 <android.support.v4.view.PagerTitleStrip 
 android:id="@+id/pagertitle" 
 android:layout_width="wrap_content" 
 android:layout_height="0dp" 
 android:layout_gravity="bottom" 
 android:background="#0000" 
 android:textColor="#ffff" /> 
 </android.support.v4.view.ViewPager> 
 
 <LinearLayout 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:orientation="horizontal" 
 android:gravity="center_horizontal" > 
 
 <ImageView 
 android:id="@+id/page0" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:layout_marginBottom="30dp" 
 android:scaleType="matrix" 
 android:src="@drawable/page_now" /> 
 <ImageView 
 android:id="@+id/page1" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:layout_marginBottom="30dp" 
 android:layout_marginLeft="10dp" 
 android:scaleType="matrix" 
 android:src="@drawable/page" /> 
 <ImageView 
 android:id="@+id/page2" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:layout_marginBottom="30dp" 
 android:layout_marginLeft="10dp" 
 android:scaleType="matrix" 
 android:src="@drawable/page" /> 
 <ImageView 
 android:id="@+id/page3" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:layout_marginBottom="30dp" 
 android:layout_marginLeft="10dp" 
 android:scaleType="matrix" 
 android:src="@drawable/page" /> 
 <ImageView 
 android:id="@+id/page4" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:layout_marginBottom="30dp" 
 android:layout_marginLeft="10dp" 
 android:scaleType="matrix" 
 android:src="@drawable/page" /> 
 <ImageView 
 android:id="@+id/page5" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:layout_marginBottom="30dp" 
 android:layout_marginLeft="20dp" 
 android:scaleType="matrix" 
 android:src="@drawable/page" /> 
 <ImageView 
 android:id="@+id/page6" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:layout_marginBottom="30dp" 
 android:layout_marginLeft="10dp" 
 android:scaleType="matrix" 
 android:src="@drawable/page" /> 
 <ImageView 
 android:id="@+id/page7" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:layout_marginBottom="30dp" 
 android:layout_marginLeft="10dp" 
 android:scaleType="matrix" 
 android:src="@drawable/page" /> 
 <ImageView 
 android:id="@+id/page8" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:layout_marginBottom="30dp" 
 android:layout_marginLeft="10dp" 
 android:scaleType="matrix" 
 android:src="@drawable/page" /> 
  
 </LinearLayout> 
 
 <LinearLayout 
 android:layout_width="wrap_content" 
 android:layout_height="match_parent" 
 android:orientation="vertical" > 
 
 <Button 
 android:layout_width="wrap_content" 
 android:layout_height="32dp" 
 android:layout_marginTop="8dp" 
 android:layout_marginLeft="8dp" 
 android:text="直接開始我的微信生活" 
 android:textSize="10sp" 
 android:textColor="#fff" 
 android:background="@drawable/button_bg" 
 android:onClick="startbutton" 
 /> 
 </LinearLayout> 
 
</FrameLayout>

在這里采用了Framelayout布局，因為這樣就可以把開啟我的維新生活Button以及下面的圓點一同顯示在同一個頁面上。這是一個小技巧，非常實用。導航頁面完畢我們點擊開啟我的微信生活就會進入到一個大門效果的Activity，這也是一個動畫效果。原理就是兩張圖片，分別朝不同的方向移動就實現(xiàn)了開門的效果。代碼如下：

import android.os.Bundle; 
import android.os.Handler; 
import android.app.Activity; 
import android.content.Intent; 
import android.view.Menu; 
import android.view.animation.Animation; 
import android.view.animation.AnimationSet; 
import android.view.animation.TranslateAnimation; 
import android.widget.ImageView; 
 
public class Viewdoor extends Activity { 
 
 private ImageView mLeft;//往左邊移動的圖片 
 private ImageView mRight;//往右邊移動的圖片 
 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.viewdoor); 
 
 mLeft = (ImageView)findViewById(R.id.imageLeft); 
 mRight = (ImageView)findViewById(R.id.imageRight); 
 
 AnimationSet anim = new AnimationSet(true);//動畫集，一個類似于集合的功能 
 TranslateAnimation mytranslateanim = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); 
 mytranslateanim.setDuration(2000);//設置動畫時間 
 anim.addAnimation(mytranslateanim);//添加動畫 
 anim.setFillAfter(true);//設置動畫結束時停在結束位置 
 mLeft.startAnimation(anim);//開始動畫，下同。 
 
 AnimationSet anim1 = new AnimationSet(true); 
 TranslateAnimation mytranslateanim1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); 
 mytranslateanim1.setDuration(1500); 
 anim1.addAnimation(mytranslateanim1); 
 anim1.setFillAfter(true); 
 mRight.startAnimation(anim1); 
 
 new Handler().postDelayed(new Runnable(){ 
 public void run(){ 
 Intent intent = new Intent (Viewdoor.this,Main.class); //進入到主頁面 
 startActivity(intent); 
 Viewdoor.this.finish();//結束本Activity 
 } 
 }, 1500); 
 
 } 
 
}

至此，關于微信的導航功能就介紹到這，比較重要的地方有，ViewPager的使用，小圓點動畫效果的設置，也就是Tween動畫要熟練掌握。下一篇將講述微信主頁面的實現(xiàn)，歡迎大家關注！
效果如下：