Android仿微信之界面導(dǎo)航篇（1）
微信是現(xiàn)在比較流行的應(yīng)用了，在各大安卓市場(chǎng)幾乎都是名列前茅了。
創(chuàng)新互聯(lián)自2013年起，先為天津等服務(wù)建站，天津等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為天津企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
說(shuō)實(shí)話不得不羨慕騰訊龐大的用戶群體，只要騰訊敢做，就會(huì)有很多人去用。
廢話不多說(shuō)，下面就開始說(shuō)一下如何實(shí)現(xiàn)微信的第一次啟動(dòng)程序的用戶導(dǎo)航，ViewPager相信大家都不陌生了，是google放出的一個(gè)安卓低版本的兼容包android-support-v4.jar，里面有很多類我們可以去使用。那這個(gè)導(dǎo)航就是使用這個(gè)類來(lái)輔助完成的，在每一個(gè)View里放置一個(gè)圖片，當(dāng)我們使用ViewPager滑動(dòng)界面的時(shí)候，就會(huì)看到一張張圖片，從而實(shí)現(xiàn)這個(gè)效果，我們來(lái)看一下官方的：
其實(shí)使用過(guò)微信的用戶都知道，每次啟動(dòng)程序都會(huì)有這個(gè)啟動(dòng)畫面，如果是第一次使用當(dāng)然還會(huì)出現(xiàn)后面的導(dǎo)航界面。下面以第一次使用為例，來(lái)說(shuō)明如何實(shí)現(xiàn)。當(dāng)啟動(dòng)出現(xiàn)進(jìn)入第一個(gè)Activity，其實(shí)就是那個(gè)啟動(dòng)畫面，有地球那個(gè)，之后會(huì)在這個(gè)Activity里面設(shè)置一個(gè)Handler去延遲（1秒，數(shù)值可以自己設(shè)定）執(zhí)行啟動(dòng)導(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
* 這個(gè)Activiyt是程序啟動(dòng)畫面，也就是一個(gè)圖片。在這個(gè)Activity里使用了Handler一秒后會(huì)進(jìn)入到引導(dǎo)Activity里面。
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉標(biāo)題欄，注意一定要在繪制view之前調(diào)用這個(gè)方法，不然會(huì)出現(xiàn)
//AndroidRuntimeException: requestFeature() must be called before adding content 這個(gè)錯(cuò)誤。
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)入前面說(shuō)的導(dǎo)航頁(yè)面了，其實(shí)就是多個(gè)View，每一個(gè)View就是一張圖片，非常簡(jiǎn)單，而且就是基于ViewPager實(shí)現(xiàn)的，唯一有一些難度的就是當(dāng)我們滑動(dòng)圖片的時(shí)候，下面那些移動(dòng)的小圓點(diǎn)會(huì)隨著改變。這種效果在其他程序的導(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對(duì)象
private PagerTitleStrip mPagerTitleStrip;//聲明動(dòng)畫標(biāo)題
private ImageView mPageImg;// 動(dòng)畫圖片
private int currIndex = 0;//當(dāng)前頁(yè)面
private ImageView mPage0,mPage1,mPage2,mPage3,mPage4,mPage5,mPage6,mPage7,mPage8;//聲明導(dǎo)航圖片對(duì)象
@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);
//將要分頁(yè)顯示的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);
//每個(gè)頁(yè)面的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);
//每一個(gè)也沒(méi)得標(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的滑動(dòng)效果。
}
public class MyOnPageChangeListener implements OnPageChangeListener {
public void onPageSelected(int arg0) {//參數(shù)arg0為選中的View
Animation animation = null;//聲明動(dòng)畫對(duì)象
switch (arg0) {
case 0: //頁(yè)面一
mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));//進(jìn)入第一個(gè)導(dǎo)航頁(yè)面，小圓點(diǎn)為選中狀態(tài)，下一個(gè)頁(yè)面的小圓點(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)效果動(dòng)畫，從當(dāng)前View移動(dòng)到下一個(gè)View
}
break;
case 1: //頁(yè)面二
mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));//當(dāng)前View
mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page));//上一個(gè)View
mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));//下一個(gè)View
if (currIndex == arg0-1) {//如果滑動(dòng)到上一個(gè)View
animation = new TranslateAnimation(arg0-1, arg0, 0, 0); //圓點(diǎn)移動(dòng)效果動(dòng)畫，從當(dāng)前View移動(dòng)到下一個(gè)View
} else if (currIndex == arg0+1) {//圓點(diǎn)移動(dòng)效果動(dòng)畫，從當(dāng)前View移動(dòng)到下一個(gè)View，下同。
animation = new TranslateAnimation(arg0+1, arg0, 0, 0);
}
break;
case 2: //頁(yè)面三
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è)置圖片停在動(dòng)畫結(jié)束位置
animation.setDuration(300);//設(shè)置動(dòng)畫持續(xù)時(shí)間
}
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)一同顯示在同一個(gè)頁(yè)面上。這是一個(gè)小技巧，非常實(shí)用。導(dǎo)航頁(yè)面完畢我們點(diǎn)擊開啟我的微信生活就會(huì)進(jìn)入到一個(gè)大門效果的Activity，這也是一個(gè)動(dòng)畫效果。原理就是兩張圖片，分別朝不同的方向移動(dòng)就實(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;//往左邊移動(dòng)的圖片
private ImageView mRight;//往右邊移動(dòng)的圖片
@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);//動(dòng)畫集，一個(gè)類似于集合的功能
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è)置動(dòng)畫時(shí)間
anim.addAnimation(mytranslateanim);//添加動(dòng)畫
anim.setFillAfter(true);//設(shè)置動(dòng)畫結(jié)束時(shí)停在結(jié)束位置
mLeft.startAnimation(anim);//開始動(dòng)畫，下同。
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)入到主頁(yè)面
startActivity(intent);
Viewdoor.this.finish();//結(jié)束本Activity
}
}, 1500);
}
}
至此，關(guān)于微信的導(dǎo)航功能就介紹到這，比較重要的地方有，ViewPager的使用，小圓點(diǎn)動(dòng)畫效果的設(shè)置，也就是Tween動(dòng)畫要熟練掌握。下一篇將講述微信主頁(yè)面的實(shí)現(xiàn)，歡迎大家關(guān)注！
效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
名稱欄目：Android仿微信之界面導(dǎo)航篇（1）
地址分享：http://www.chinadenli.net/article32/jdhgsc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化、定制開發(fā)、品牌網(wǎng)站制作、企業(yè)建站、網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- Google關(guān)鍵詞排名優(yōu)化的6個(gè)技巧 2016-02-28
- 「關(guān)鍵字排名的規(guī)范」Google評(píng)定關(guān)鍵字排名的規(guī)范 2016-04-20
- Google Ads廣告中的無(wú)效點(diǎn)擊來(lái)源及解決策略 2015-04-24
- 什么是Google優(yōu)化 2014-04-01
- 海外推廣：提升外貿(mào)網(wǎng)站google排名的4個(gè)方向 2016-04-01
- google推廣：這樣的廣告語(yǔ)更有競(jìng)爭(zhēng)力 2016-03-07
- 高質(zhì)量?jī)?nèi)容在Google眼里是怎樣的標(biāo)準(zhǔn)？ 2016-11-07
- GA分析是什么? (Google Analytics- Google分析) 2019-09-30
- 成都網(wǎng)站優(yōu)化：百度權(quán)重、排名和google的PR值之間的關(guān)系 2014-04-11
- 企業(yè)應(yīng)該投放google adwords 還是Google AdSense? 2014-04-02
- 21種技術(shù)和技巧Google Ads投放谷歌規(guī)劃師運(yùn)用 2023-05-05
- 優(yōu)化Google網(wǎng)站優(yōu)化SEO的7個(gè)技巧與關(guān)鍵字工具推薦 2019-12-01