Android仿微信底部菜單

            今天終於把公司的介面原型做完了，哈哈，提前完成正好趁現在有時間更新下最近學到的一些特殊效果。其中這個仿的底部菜單，真的要感謝家輝兄弟，我才得以解決。首先看一下實現後效果。

    

    就下面的那個底部欄，下面看一下實現代碼吧！

    首先是布局main.xml:

<?xml version="1.0" encoding="UTF-8"?><TabHost android:id="@android: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" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />        <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" />        <LinearLayout android:gravity="bottom" android:layout_gravity="bottom" android:orientation="horizontal" android:id="@+id/main_tab_group" android:background="@drawable/bottom1" android:paddingTop="2.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content">            <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">                <LinearLayout android:id="@+id/main_layout_addExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">                    <RadioButton android:id="@+id/main_tab_addExam" android:checked="true" android:text="添加考試" android:drawableTop="@drawable/label_1" style="@style/MMTabButton" />                </LinearLayout>                <LinearLayout  android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">                    <TextView android:textSize="10.0dip" android:text="1" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_unread_tv" android:background="@drawable/new_icon_2" android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content"  />                </LinearLayout>            </FrameLayout>             <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">                <LinearLayout android:id="@+id/main_layout_myExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">                     <RadioButton android:id="@+id/main_tab_myExam" android:text="我的考試" android:drawableTop="@drawable/label_2" style="@style/MMTabButton" />                </LinearLayout>                <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">                    <TextView android:textSize="10.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_address" android:background="@drawable/new_icon_2" android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" />                </LinearLayout>            </FrameLayout>            <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">                <LinearLayout android:id="@+id/main_layout_message" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">                    <RadioButton android:id="@+id/main_tab_message" android:text="考試資訊" android:drawableTop="@drawable/label_3" style="@style/MMTabButton" />                </LinearLayout>                <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">                    <TextView android:textSize="12.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_new_tv" android:background="@drawable/new_icon_2" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" />                </LinearLayout>            </FrameLayout>            <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">                <LinearLayout android:id="@+id/main_layout_settings" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">                    <RadioButton android:id="@+id/main_tab_settings" android:text="設定" android:drawableTop="@drawable/label4" style="@style/MMTabButton" />                </LinearLayout>                <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">                    <TextView android:textSize="10.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_setting_new_tv" android:background="@drawable/new_icon_2" android:paddingLeft="6.0dip" android:paddingRight="6.0dip" android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" />                </LinearLayout>            </FrameLayout>        </LinearLayout>    </LinearLayout></TabHost>

      其實就是用FrameLayout，也是這樣布局的我反編譯過。這樣就可以靈活的布局那個紅色的表徵圖了。

      下面看一下activity切換代碼：

import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.Window;import android.widget.LinearLayout;import android.widget.RadioButton;import android.widget.TabHost;import android.widget.TextView;public class MainTabActivity extends TabActivity {TabHost tabHost;    private TextView main_tab_unread_tv;private RadioButton main_tab_addExam, main_tab_myExam,main_tab_message,main_tab_settings;private LinearLayout main_layout_addExam,main_layout_myExam,main_layout_message,main_layout_settings;public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);this.requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.main);initTab();init();}private void init() {main_tab_addExam = (RadioButton) findViewById(R.id.main_tab_addExam);main_tab_myExam = (RadioButton) findViewById(R.id.main_tab_myExam);main_tab_message=(RadioButton) findViewById(R.id.main_tab_message);main_tab_settings=(RadioButton) findViewById(R.id.main_tab_settings);main_layout_addExam=(LinearLayout) findViewById(R.id.main_layout_addExam);main_layout_myExam=(LinearLayout) findViewById(R.id.main_layout_myExam);main_layout_message=(LinearLayout) findViewById(R.id.main_layout_message);main_layout_settings=(LinearLayout) findViewById(R.id.main_layout_settings);main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null);main_layout_addExam.setBackgroundResource(R.drawable.labelbg);main_tab_unread_tv=(TextView) findViewById(R.id.main_tab_unread_tv);//main_tab_unread_tv.setVisibility(View.VISIBLE);//main_tab_unread_tv.setText("3");main_tab_addExam.setOnClickListener(new OnClickListener() {public void onClick(View arg0) {tabHost.setCurrentTabByTag("first");/*main_tab_addExam.setBackgroundResource(R.drawable.label_one_one);main_tab_myExam.setBackgroundResource(R.drawable.label_2);main_tab_message.setBackgroundResource(R.drawable.label_3);*///main_tab_addExam.setCompoundDrawables(null, getResources().getDrawable(R.drawable.label_one_one), null, null);main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null);main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);main_layout_addExam.setBackgroundResource(R.drawable.labelbg);main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);main_layout_message.setBackgroundResource(R.drawable.mm_trans);main_layout_settings.setBackgroundResource(R.drawable.mm_trans);}});main_tab_myExam.setOnClickListener(new OnClickListener() {public void onClick(View arg0) {tabHost.setCurrentTabByTag("second");/*main_tab_addExam.setBackgroundResource(R.drawable.label_1);main_tab_myExam.setBackgroundResource(R.drawable.label_two_one);main_tab_message.setBackgroundResource(R.drawable.label_3);*/main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_two_one), null, null);main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);main_layout_myExam.setBackgroundResource(R.drawable.labelbg);main_layout_message.setBackgroundResource(R.drawable.mm_trans);main_layout_settings.setBackgroundResource(R.drawable.mm_trans);}});main_tab_message.setOnClickListener(new OnClickListener() {public void onClick(View v) {// TODO Auto-generated method stubtabHost.setCurrentTabByTag("third");/*main_tab_addExam.setBackgroundResource(R.drawable.label_1);main_tab_myExam.setBackgroundResource(R.drawable.label_2);main_tab_message.setBackgroundResource(R.drawable.label_three_one);*/main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_three_one), null, null);main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);main_layout_message.setBackgroundResource(R.drawable.labelbg);main_layout_settings.setBackgroundResource(R.drawable.mm_trans);}});main_tab_settings.setOnClickListener(new OnClickListener() {public void onClick(View v) {// TODO Auto-generated method stubtabHost.setCurrentTabByTag("four");main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_four_one), null, null);main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);main_layout_message.setBackgroundResource(R.drawable.mm_trans);main_layout_settings.setBackgroundResource(R.drawable.labelbg);}});}private void initTab(){tabHost=getTabHost();tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent(new Intent(this, AddExamActivity.class)));tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent(new Intent(this, MyExamActivity.class)));tabHost.addTab(tabHost.newTabSpec("third").setIndicator("third").setContent(new Intent(this, MessageActivity.class)));tabHost.addTab(tabHost.newTabSpec("four").setIndicator("four").setContent(new Intent(this, SettingActivity.class)));}}

        setCompoundDrawablesWithIntrinsicBounds方法是我用來設定頂部圖片的，用來替換android:drawableTop這個屬性的背景圖，至於為什麼那麼麻煩每次都要設定背景圖片顏色，是因為沒用用RadioGroup包含RadioButton，所以RadioButton就不能做到單個切換。