Android仿微信之界面導(dǎo)航篇（1）
更新時間：2018年04月14日 14:49:01 作者：張亞波
這篇文章主要為大家詳細介紹了Android仿微信之界面導(dǎo)航篇，教大家實現(xiàn)滑動界面效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
微信是現(xiàn)在比較流行的應(yīng)用了，在各大安卓市場幾乎都是名列前茅了。
說實話不得不羨慕騰訊龐大的用戶群體，只要騰訊敢做，就會有很多人去用。
廢話不多說，下面就開始說一下如何實現(xiàn)微信的第一次啟動程序的用戶導(dǎo)航，ViewPager相信大家都不陌生了，是google放出的一個安卓低版本的兼容包android-support-v4.jar，里面有很多類我們可以去使用。那這個導(dǎo)航就是使用這個類來輔助完成的，在每一個View里放置一個圖片，當我們使用ViewPager滑動界面的時候，就會看到一張張圖片，從而實現(xiàn)這個效果，我們來看一下官方的：
其實使用過微信的用戶都知道，每次啟動程序都會有這個啟動畫面，如果是第一次使用當然還會出現(xiàn)后面的導(dǎo)航界面。下面以第一次使用為例，來說明如何實現(xiàn)。當啟動出現(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);//去掉標題欄，注意一定要在繪制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ǎ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;//聲明動畫標題
private ImageView mPageImg;// 動畫圖片
private int currIndex = 0;//當前頁面
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);
//每一個也沒得標題
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);//圓點移動效果動畫，從當前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;//設(shè)置當前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)注！
效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了android UI繪制加減號按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細介紹了Android開源庫自定義相機模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了Android仿斗魚直播的彈幕效果的相關(guān)資料,需要的朋友可以參考下2016-10-10
Android 保存Fragment 切換狀態(tài)實例代碼
本文主要介紹Android Fragment的應(yīng)用,這里給大家用實例代碼詳細介紹了Android Fragment 切換狀態(tài),有需要的小伙伴可以參考下2016-07-07
Android實現(xiàn)類似網(wǎng)易新聞選項卡動態(tài)滑動效果
這篇文章主要介紹了Android實現(xiàn)類似網(wǎng)易新聞選項卡動態(tài)滑動效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Android 拍照并對照片進行裁剪和壓縮實例詳解的相關(guān)資料,這里提供實例代碼，需要的朋友可以參考下2017-07-07
Android?WebView緩存機制優(yōu)化加載慢問題
我知道你一定在煩惱Android?Webview的性能問題，特別突出的是-加載速度慢、消耗流量，針對Android?Webview的性能問題，提出一些有效解決方案2023-02-02
詳解Android獲得系統(tǒng)GPU參數(shù) gl.glGetString
這篇文章主要介紹了詳解Android獲得系統(tǒng)GPU參數(shù) gl.glGetString的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要為大家介紹了Android framework ATMS啟動流程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
android listview實現(xiàn)新聞列表展示效果
這篇文章主要為大家詳細介紹了android listview實現(xiàn)新聞列表展示效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03