Android 仿微信底部菜單

fmms 13年前發布 | 69K 次閱讀 Android Android開發移動開發

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

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 stub
                tabHost.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 stub
                tabHost.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就不能做到單個切換。

本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1334824141468.html

Android Android開發移動開發

Android 仿微信底部菜單

相關經驗

相關資訊

相關文檔

目錄