Android 仿微信之（二）–首頁面實現篇

  這一篇將講述如何構建首頁面，先看一下首頁面的

  從中可以看出，它的菜單是在程式的底部，當我們選擇一個按鈕後，它的顏色會發生變化，好像有燈在亮，這個實現起來比較簡單，可以有多種方式供我們選擇，TabActivity或者tabwidget+radiobutton或者activitygroup+radiobutton或者activitygroup+gridview或者activitygroup+grally等都可以，按鈕的變化可以使用selector用兩張圖片來控制。

關於activitygroup，大家可以看一下這個圖片：

先以tabwidget為例，代碼如下：

import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.view.Window;import android.widget.RadioGroup;import android.widget.RadioGroup.OnCheckedChangeListener;import android.widget.TabHost;import android.widget.TextView;public class MainActivity extends TabActivity {    /** Called when the activity is first created. */private TabHost tabHost;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        this.requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.main);                     tabHost=this.getTabHost();        TabHost.TabSpec spec;        Intent intent;        intent=new Intent().setClass(this, AddExamActivity.class);        spec=tabHost.newTabSpec("").setIndicator("").setContent(intent);        tabHost.addTab(spec);                intent=new Intent().setClass(this,MyExamActivity.class);        spec=tabHost.newTabSpec("通訊錄").setIndicator("通訊錄").setContent(intent);        tabHost.addTab(spec);                intent=new Intent().setClass(this, MyMessageActivity.class);        spec=tabHost.newTabSpec("朋友們").setIndicator("朋友們").setContent(intent);        tabHost.addTab(spec);                intent=new Intent().setClass(this, Activity.class);        spec=tabHost.newTabSpec("設定").setIndicator("設定").setContent(intent);        tabHost.addTab(spec);        intent=new Intent().setClass(this, SettingActivity.class);        spec=tabHost.newTabSpec("設定").setIndicator("設定").setContent(intent);        tabHost.addTab(spec);        tabHost.setCurrentTab(1);           }  }

xml布局檔案如下：

<?xml version="1.0" encoding="utf-8"?><TabHost     android:id="@android:id/tabhost" //id必須為：tabhost    android:layout_width="fill_parent"     android:layout_height="fill_parent"    xmlns:android="http://schemas.android.com/apk/res/android">        <LinearLayout         android:orientation="vertical"         android:layout_width="fill_parent"         android:layout_height="fill_parent">                <FrameLayout             android:id="@android:id/tabcontent" //id必須為：tabcontent            android:layout_width="fill_parent"             android:layout_height="0.0dip"             android:layout_weight="1.0" />                <TabWidget             android:id="@android:id/tabs" //id必須為：tabs                android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:layout_weight="0.0" />                </LinearLayout>        這些id都是系統的，只有這樣，系統才會找到他們正確辨認。    </TabHost>

  再就是點擊button的轉場效果了，這裡需要使用selector來實現，如下：

<?xml version="1.0" encoding="utf-8"?><selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_weixin_pressed" />//點擊後的綠色效果    <item android:drawable="@drawable/tab_weixin_normal" />//未點擊的正常效果</selector>

  這樣就利用tabwidget實現了最基礎的菜單布局，但是相信很多人都知道，使用tabwidget需要消耗比較大的記憶體，後來就有人使用activitygroup和其他的組件結合使用，如上舉例。這裡就不再介紹了，感興趣的朋友可以去查閱資料。下面我們使用另外一個方法，這種方法相對來說更加優雅。為什麼這麼說，因為viewpager這個類相信大家都不陌生了，其實官方是不支援滑動頁面的，但是利用viewpager這個類，我們也可以既可以點擊又可以滑動的切換頁面。而且我們也不使用selector來實現button的改變，而是利用一個動畫來實現，這個工程就是綠色圖片來覆蓋各個button，呈現出一個綠色的效果。底部菜單也不是使用耗費資源的tabwidget而是利用布局來自訂的，xml檔案如下，一眼就可以明白：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/mainweixin"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical"    android:background="#eee" >      <RelativeLayout        android:id="@+id/main_bottom"        android:layout_width="match_parent"        android:layout_height="55dp"        android:layout_alignParentBottom="true"        android:orientation="vertical"        android:background="@drawable/bottom_bar"        >                           <ImageView        android:id="@+id/img_tab_now"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                     android:scaleType="matrix"        android:layout_gravity="bottom"                        android:layout_alignParentBottom="true"        android:src="@drawable/tab_bg" />   //動畫所用圖片，綠色的                         <LinearLayout    //底部菜單的父布局            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:paddingBottom="2dp"                    >                    <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"              android:gravity="center_horizontal"              android:orientation="vertical"              android:layout_weight="1">                               <ImageView            android:id="@+id/img_weixin"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                     android:scaleType="matrix"        android:clickable="true"        android:src="@drawable/tab_weixin_pressed" />                <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text=""            android:textColor="#fff"            android:textSize="12sp" />                         </LinearLayout>         <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"              android:gravity="center_horizontal"              android:orientation="vertical"              android:layout_weight="1">                               <ImageView            android:id="@+id/img_address"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                     android:scaleType="matrix"        android:clickable="true"        android:src="@drawable/tab_address_normal" />                <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="通訊錄"            android:textColor="#fff"            android:textSize="12sp" />                         </LinearLayout>         <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"              android:gravity="center_horizontal"              android:orientation="vertical"              android:layout_weight="1">                               <ImageView            android:id="@+id/img_friends"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                     android:scaleType="matrix"        android:clickable="true"        android:src="@drawable/tab_find_frd_normal" />                <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="朋友們"            android:textColor="#fff"            android:textSize="12sp" />                         </LinearLayout>                  <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"              android:gravity="center_horizontal"              android:orientation="vertical"              android:layout_weight="1">                               <ImageView            android:id="@+id/img_settings"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                     android:scaleType="matrix"        android:clickable="true"        android:src="@drawable/tab_settings_normal" />                <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="設定"            android:textColor="#fff"            android:textSize="12sp" />                         </LinearLayout>                          </LinearLayout>                </RelativeLayout>    <LinearLayout  //viewpager類，用來切換頁面        android:layout_width="fill_parent"    android:layout_height="wrap_content"     android:layout_alignParentTop="true"    android:layout_above="@id/main_bottom"               android:orientation="vertical" >                <android.support.v4.view.ViewPager        android:id="@+id/tabpager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center" >         </android.support.v4.view.ViewPager>      </LinearLayout></RelativeLayout>

 

  所以，首頁面的代碼主要是這樣的，一方面要使用viewpager來實現滑動頁面，另一方面要實現自訂菜單改變顏色的動畫效果。代碼如下：

  

import java.util.ArrayList;import android.os.Bundle;import android.app.Activity;import android.content.Intent;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.Display;import android.view.Gravity;import android.view.KeyEvent;import android.view.LayoutInflater;import android.view.View;import android.view.WindowManager;import android.view.WindowManager.LayoutParams;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.PopupWindow;public class MainWeixin extends Activity {public static MainWeixin instance = null;private ViewPager mTabPager;//聲明對象private ImageView mTabImg;// 動畫圖片private ImageView mTab1, mTab2, mTab3, mTab4;private int zero = 0;// 動畫圖片位移量private int currIndex = 0;// 當前頁卡編號private int one;// 單個水平動畫位移private int two;private int three;private LinearLayout mClose;private LinearLayout mCloseBtn;private View layout;private boolean menu_display = false;private PopupWindow menuWindow;private LayoutInflater inflater;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main_weixin);getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);// 啟動activity時不自動彈出軟鍵盤instance = this;mTabPager = (ViewPager) findViewById(R.id.tabpager);mTabPager.setOnPageChangeListener(new MyOnPageChangeListener());mTab1 = (ImageView) findViewById(R.id.img_weixin);mTab2 = (ImageView) findViewById(R.id.img_address);mTab3 = (ImageView) findViewById(R.id.img_friends);mTab4 = (ImageView) findViewById(R.id.img_settings);mTabImg = (ImageView) findViewById(R.id.img_tab_now);//動畫圖片mTab1.setOnClickListener(new MyOnClickListener(0));mTab2.setOnClickListener(new MyOnClickListener(1));mTab3.setOnClickListener(new MyOnClickListener(2));mTab4.setOnClickListener(new MyOnClickListener(3));Display currDisplay = getWindowManager().getDefaultDisplay();// 擷取螢幕當前解析度int displayWidth = currDisplay.getWidth();one = displayWidth / 4; // 設定水平動畫平移大小two = one * 2;three = one * 3;// 將要分頁顯示的View裝入數組中LayoutInflater mLi = LayoutInflater.from(this);View view1 = mLi.inflate(R.layout.main_tab_weixin, null);View view2 = mLi.inflate(R.layout.main_tab_address, null);View view3 = mLi.inflate(R.layout.main_tab_friends, null);View view4 = mLi.inflate(R.layout.main_tab_settings, null);// 每個頁面的view資料final ArrayList<View> views = new ArrayList<View>();views.add(view1);views.add(view2);views.add(view3);views.add(view4);// 填充ViewPager的資料配接器PagerAdapter mPagerAdapter = new PagerAdapter() {@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getCount() {return views.size();}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(views.get(position));}// @Override// public CharSequence getPageTitle(int position) {// return titles.get(position);// }@Overridepublic Object instantiateItem(View container, int position) {((ViewPager) container).addView(views.get(position));return views.get(position);}};mTabPager.setAdapter(mPagerAdapter);}/** * 頭標點擊監聽 */public class MyOnClickListener implements View.OnClickListener {private int index = 0;public MyOnClickListener(int i) {index = i;}public void onClick(View v) {mTabPager.setCurrentItem(index);}};/* * 頁卡切換監聽(原作者:D.Winter) */public class MyOnPageChangeListener implements OnPageChangeListener {public void onPageSelected(int arg0) {Animation animation = null;switch (arg0) {case 0:mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_pressed));if (currIndex == 1) {animation = new TranslateAnimation(one, 0, 0, 0);mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_normal));} else if (currIndex == 2) {animation = new TranslateAnimation(two, 0, 0, 0);mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_normal));} else if (currIndex == 3) {animation = new TranslateAnimation(three, 0, 0, 0);mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_normal));}break;case 1:mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_pressed));if (currIndex == 0) {animation = new TranslateAnimation(zero, one, 0, 0);mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_normal));} else if (currIndex == 2) {animation = new TranslateAnimation(two, one, 0, 0);mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_normal));} else if (currIndex == 3) {animation = new TranslateAnimation(three, one, 0, 0);mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_normal));}break;case 2:mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_pressed));if (currIndex == 0) {animation = new TranslateAnimation(zero, two, 0, 0);mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_normal));} else if (currIndex == 1) {animation = new TranslateAnimation(one, two, 0, 0);mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_normal));} else if (currIndex == 3) {animation = new TranslateAnimation(three, two, 0, 0);mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_normal));}break;case 3:mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_pressed));if (currIndex == 0) {animation = new TranslateAnimation(zero, three, 0, 0);mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_normal));} else if (currIndex == 1) {animation = new TranslateAnimation(one, three, 0, 0);mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_normal));} else if (currIndex == 2) {animation = new TranslateAnimation(two, three, 0, 0);mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_normal));}break;}currIndex = arg0;animation.setFillAfter(true);// True:圖片停在動畫結束位置animation.setDuration(150);// 動畫期間mTabImg.startAnimation(animation);// 開始動畫}}

  效果如下：

  
  這樣關於首頁面的實現就完成了，之後會詳細說一下各個Activity的實現。歡迎大家關注！