Android應用主界面底部菜單實現

介紹

如今絕大多數主流的應用主界面，都會包含一個底部菜單，就拿騰訊的QQ與微信來講，看起來是這樣的

 《---我是底部菜單

原理

在好久之前，能夠經過TabActivity實現相關功能，自從Fragment出來後，就被拋棄了。

原理也很簡單

一、底部菜單經過自定義RadioGroup實現，經過setOnCheckedChangeListener監聽切換內容。

二、內容切換，能夠使用ViewPager（能夠實現直接滑動切換），TabHost，FragmentManager來實現。、

 

PS:相似的，這樣也能夠經過HorizontalScrollView+ViewPager+RadioGroup實現相似網易新聞的頂部欄目效果（或者ViewPageIndicator），經過ScrollView.scrollTo((int)RadioButton.getLeft())來自動滑動到當前選擇項，有空再寫篇文章。

實現

在幾種組合搭配來看，我比較喜歡使用Fragment+Tabhost+RadioGroup搭配實現。

首先上首頁佈局代碼activity_main.xml，注意加粗id

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#FFFFFFFF"
        android:orientation="vertical" >

        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="fill_parent" >

                <fragment
                    android:id="@+id/fragment_main"
                    android:name="com.example.tabmenu.MainFragment"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />

                <fragment
                    android:id="@+id/fragment_mycenter"
                    android:name="com.example.tabmenu.MyCenterFragment"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />

                <fragment
                    android:id="@+id/fragment_search"
                    android:name="com.example.tabmenu.SearchFragment"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />
            </FrameLayout>
        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.0"
            android:visibility="gone" />

　　　　 <!-- 我只是一條線 -->
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="3dp"
            android:background="@drawable/fbutton_color_emerald" >
        </LinearLayout>

        <RadioGroup
            android:id="@+id/radiogroup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/fbutton_color_turquoise"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <!-- android:background="@drawable/bk_footer" -->

            <RadioButton
                android:id="@+id/radio_search"
                style="@style/main_tab_bottom"
                android:layout_weight="1"
                android:background="@drawable/footer_itembg_selector"
                android:drawableTop="@drawable/footer_search_selector"
                android:text="搜索" />

            <RadioButton
                android:id="@+id/radio_main"
                style="@style/main_tab_bottom"
                android:layout_weight="1"
                android:background="@drawable/footer_itembg_selector"
                android:button="@null"
                android:checked="true"
                android:drawableTop="@drawable/footer_main_selector"
                android:text="首 頁" />

            <RadioButton
                android:id="@+id/radio_mycenter"
                style="@style/main_tab_bottom"
                android:layout_weight="1"
                android:background="@drawable/footer_itembg_selector"
                android:drawableTop="@drawable/footer_mycenter_selector"
                android:text="我的中心" />
        </RadioGroup>
    </LinearLayout>

</TabHost>

其中RadioButton的樣式按照須要本身定義

    <style name="main_tab_bottom">
        <item name="android:textSize">10sp</item>
        <item name="android:textColor">#ffffffff</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">#00000000</item>
        <item name="android:paddingTop">2dp</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>
        <item name="android:singleLine">true</item>
        <item name="android:drawablePadding">2dp</item>
        <item name="android:layout_weight">1.0</item>
    </style>

MainActivity代碼

package com.example.tabmenu;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;
import android.view.animation.AnimationUtils;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TabHost;

public class MainActivity extends ActionBarActivity {
    // tab用參數
    private TabHost tabHost;
    private RadioGroup radiogroup;
    private int menuid;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        radiogroup = (RadioGroup) findViewById(R.id.radiogroup);
        tabHost = (TabHost) findViewById(android.R.id.tabhost);
        tabHost.setup();
        tabHost.addTab(tabHost.newTabSpec("main").setIndicator("main")
                .setContent(R.id.fragment_main));
        tabHost.addTab(tabHost.newTabSpec("mycenter").setIndicator("mycenter")
                .setContent(R.id.fragment_mycenter));
        tabHost.addTab(tabHost.newTabSpec("search").setIndicator("search")
                .setContent(R.id.fragment_search));
        radiogroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                menuid = checkedId;
                int currentTab = tabHost.getCurrentTab();
                switch (checkedId) {
                case R.id.radio_main:
                    tabHost.setCurrentTabByTag("main");
                    //若是須要動畫效果就使用
                    //setCurrentTabWithAnim(currentTab, 0, "main");
                    getSupportActionBar().setTitle("首頁");
                    break;
                case R.id.radio_mycenter:
                    //tabHost.setCurrentTabByTag("mycenter");
                    setCurrentTabWithAnim(currentTab, 1, "mycenter");
                    getSupportActionBar().setTitle("我的中心");

                    break;
                case R.id.radio_search:
                    tabHost.setCurrentTabByTag("search");
                    getSupportActionBar().setTitle("搜索");
                }
                // 刷新actionbar的menu
                getWindow().invalidatePanelMenu(Window.FEATURE_OPTIONS_PANEL);
            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.

        switch (menuid) {
        case R.id.radio_main:
            getMenuInflater().inflate(R.menu.main, menu);
            break;
        case R.id.radio_mycenter:
            menu.clear();
            break;
        case R.id.radio_search:
            menu.clear();
            break;
        }
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
    
    // 這個方法是關鍵，用來判斷動畫滑動的方向
    private void setCurrentTabWithAnim(int now, int next, String tag) {
        if (now > next) {
            tabHost.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
            tabHost.setCurrentTabByTag(tag);
            tabHost.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
        } else {
            tabHost.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
            tabHost.setCurrentTabByTag(tag);
            tabHost.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
        }
    }
}

最後demo截圖，其餘文件件demo

 

demo下載地址：

 連接：http://pan.baidu.com/s/1dbuKA 密碼：84iw

 

參考：

http://blog.csdn.net/loongggdroid/article/details/9469935

http://blog.csdn.net/eyebrows_cs/article/details/8145913

http://www.cnblogs.com/over140/archive/2011/03/02/1968042.html