快捷導(dǎo)航

Android仿微信之界面導(dǎo)航篇（1）

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

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

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

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

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

其實使用過微信的用戶都知道，每次啟動程序都會有這個啟動畫面，如果是第一次使用當(dāng)然還會出現(xiàn)后面的導(dǎo)航界面。下面以第一次使用為例，來說明如何實現(xiàn)。當(dāng)啟動出現(xiàn)進入第一個Activity，其實就是那個啟動畫面，有地球那個，之后會在這個Activity里面設(shè)置一個Handler去延遲（1秒，數(shù)值可以自己設(shè)定）執(zhí)行啟動導(dǎo)航界面的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一秒后會進入到引導(dǎo)Activity里面。 
 */ 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
 
 super.onCreate(savedInstanceState); 
 requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉標(biāo)題欄，注意一定要在繪制view之前調(diào)用這個方法，不然會出現(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();//結(jié)束本Activity 
 } 
 }, 1000); 
 } 
}

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

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;//聲明動畫標(biāo)題 
 private ImageView mPageImg;// 動畫圖片 
 private int currIndex = 0;//當(dāng)前頁面 
 private ImageView mPage0,mPage1,mPage2,mPage3,mPage4,mPage5,mPage6,mPage7,mPage8;//聲明導(dǎo)航圖片對象 
 
 @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); 
 //每一個也沒得標(biāo)題 
 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用法相同，設(shè)置重寫的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));//進入第一個導(dǎo)航頁面，小圓點為選中狀態(tài)，下一個頁面的小圓點是未選中狀態(tài)。 
 mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page)); 
 if (currIndex == arg0+1) { 
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);//圓點移動效果動畫，從當(dāng)前View移動到下一個View 
 } 
 break; 
 case 1: //頁面二 
 mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));//當(dāng)前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); //圓點移動效果動畫，從當(dāng)前View移動到下一個View 
 
  
 } else if (currIndex == arg0+1) {//圓點移動效果動畫，從當(dāng)前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;//設(shè)置當(dāng)前View 
 animation.setFillAfter(true);// True:設(shè)置圖片停在動畫結(jié)束位置 
 animation.setDuration(300);//設(shè)置動畫持續(xù)時間 
 } 
 
 public void startbutton(View v) { 
 Intent intent = new Intent(); 
 intent.setClass(Viewpager.this,Viewdoor.class);//進入到開門效果的Activity 
 startActivity(intent); 
 this.finish();//結(jié)束本Activity 
 } 
 
}

下面再看一下導(dǎo)航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以及下面的圓點一同顯示在同一個頁面上。這是一個小技巧，非常實用。導(dǎo)航頁面完畢我們點擊開啟我的微信生活就會進入到一個大門效果的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);//設(shè)置動畫時間 
 anim.addAnimation(mytranslateanim);//添加動畫 
 anim.setFillAfter(true);//設(shè)置動畫結(jié)束時停在結(jié)束位置 
 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();//結(jié)束本Activity 
 } 
 }, 1500); 
 
 } 
 
}

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