溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
微信是現(xiàn)在比較流行的應(yīng)用了，在各大安卓市場幾乎都是名列前茅了。
說實(shí)話不得不羨慕騰訊龐大的用戶群體，只要騰訊敢做，就會有很多人去用。
廢話不多說，下面就開始說一下如何實(shí)現(xiàn)微信的第一次啟動程序的用戶導(dǎo)航，ViewPager相信大家都不陌生了，是google放出的一個安卓低版本的兼容包android-support-v4.jar，里面有很多類我們可以去使用。那這個導(dǎo)航就是使用這個類來輔助完成的，在每一個View里放置一個圖片，當(dāng)我們使用ViewPager滑動界面的時候，就會看到一張張圖片，從而實(shí)現(xiàn)這個效果，我們來看一下官方的：
其實(shí)使用過微信的用戶都知道，每次啟動程序都會有這個啟動畫面，如果是第一次使用當(dāng)然還會出現(xiàn)后面的導(dǎo)航界面。下面以第一次使用為例，來說明如何實(shí)現(xiàn)。當(dāng)啟動出現(xiàn)進(jìn)入第一個Activity，其實(shí)就是那個啟動畫面，有地球那個，之后會在這個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一秒后會進(jìn)入到引導(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);
}
}
之后就進(jìn)入前面說的導(dǎo)航頁面了，其實(shí)就是多個View，每一個View就是一張圖片，非常簡單，而且就是基于ViewPager實(shí)現(xiàn)的，唯一有一些難度的就是當(dāng)我們滑動圖片的時候，下面那些移動的小圓點(diǎ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;//聲明動畫標(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。這樣就實(shí)現(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));//進(jìn)入第一個導(dǎo)航頁面，小圓點(diǎn)為選中狀態(tài)，下一個頁面的小圓點(diǎn)是未選中狀態(tài)。
mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));
if (currIndex == arg0+1) {
animation = new TranslateAnimation(arg0+1, arg0, 0, 0);//圓點(diǎn)移動效果動畫，從當(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); //圓點(diǎn)移動效果動畫，從當(dāng)前View移動到下一個View
} else if (currIndex == arg0+1) {//圓點(diǎn)移動效果動畫，從當(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);//進(jìn)入到開門效果的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布局，因?yàn)檫@樣就可以把開啟我的維新生活Button以及下面的圓點(diǎn)一同顯示在同一個頁面上。這是一個小技巧，非常實(shí)用。導(dǎo)航頁面完畢我們點(diǎn)擊開啟我的微信生活就會進(jìn)入到一個大門效果的Activity，這也是一個動畫效果。原理就是兩張圖片，分別朝不同的方向移動就實(shí)現(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); //進(jìn)入到主頁面
startActivity(intent);
Viewdoor.this.finish();//結(jié)束本Activity
}
}, 1500);
}
}
至此，關(guān)于微信的導(dǎo)航功能就介紹到這，比較重要的地方有，ViewPager的使用，小圓點(diǎn)動畫效果的設(shè)置，也就是Tween動畫要熟練掌握。下一篇將講述微信主頁面的實(shí)現(xiàn)，歡迎大家關(guān)注！
效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼