是男人就下100層【第一層】——高仿微信介面（5）

前面《 是男人就下100層【第一層】——高仿介面（4）》中我們已經完成了基本的引導介面和登入介面，這一篇中我們來看看登入後的主介面的布局和內容，來一步一步的完成該介面。

我們先來看看主介面如何布局，如所示，下部分的導覽列單獨做成一個主布局，然後在上部分放入ViewPager組件，這個前面的引導介面有點類似。這種導覽列有多種實現方式，用TabHost也可以實現，用Fragement也可以實現，我們就用ViewPager先實現一下。

主布局介面布局檔案如下：

<?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        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>

最外面我們使用了一個相對布局，其實線性布局也可以，任何介面都可以用多種方式來實現，有時候我們要考慮到效能的最佳化就需要合理的選擇所需的實現方式。

相對布局中最下面是一個線性布局，在該布局中我們又放置了四個線性布局，每個線性布局就是下面導覽功能表中的一個功能表項目。相對布局的最上面是一個線性布局中放置了一個ViewPage組件，這樣的設計完全符合上面我們所畫的結構。

然後在Activity中我們將四個菜單所對應的布局檔案通過載入器Inflate載入到View對象中並存入數組然後通過PageAdapter適配器填充介面。

// 將要分頁顯示的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);}

現在我們要做的就是通過四個功能表按鈕的監聽函數來切換ViewPager中的內容

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));

/** * 頭標點擊監聽 */public class MyOnClickListener implements View.OnClickListener {private int index = 0;public MyOnClickListener(int i) {index = i;}@Overridepublic void onClick(View v) {mTabPager.setCurrentItem(index);}};

接下來還要解決一個問題，如何在選擇菜單後，比如選擇“通訊錄”菜單後該菜單的背景顏色改變，有一種方法是將菜單中的ImageView換成CheckBox，或者用ViewPager的監聽函數OnPageChangeListener來改變背景。

/* * 頁卡切換監聽(原作者:D.Winter) */public class MyOnPageChangeListener implements OnPageChangeListener {@Overridepublic 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);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}}

上面的currIndex是為了記住上次的狀態，將上次的按鈕背景還原。

布局效果如下：

效果是不是很酷？呵呵，如果有什麼更好的實現方式或不對之處請大家拍磚，相互交流，共同進步。如果你喜歡陽光小強（大碗幹拌）的部落格，想共同學習，可以加入左側邊欄的交流群，該群中有來自全國各地的技術愛好者，歡迎~~

下一篇我們來詳細看一下四個菜單所對應的介面實現，並貼出原始碼。