史上最詳細的TabHost菜單欄實現

    衆所周知,ActivityGroup和TabHost已經過時,除了使用FragmentTabHost外,我們可以簡單的來實現一個界面豐富的底端菜單導航欄。

先不廢話,上圖:

其中,圖片是反編譯的淘寶客戶端。手上沒有合適的圖片,湊合看吧。文章最後我會貼出我的源代碼鏈接(因爲我沒有找到可以直接上傳文件),裏面有很多關鍵註釋,文章沒有寫的地方,大家可以在代碼中找到。

一.使用的知識:fragment +TabHost

二.佈局文件:(最主要的文件),上代碼:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.sdf.MainActivity$PlaceholderFragment" >

    <TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:orientation="vertical" >

                <fragment
                    android:id="@+id/content1"
                    android:name="com.lihuan.intelligencehumansocial.fragment.FirstFragment"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <fragment
                    android:id="@+id/content2"
                    android:name="com.lihuan.intelligencehumansocial.fragment.SecondFragment"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <fragment
                    android:id="@+id/content3"
                    android:name="com.lihuan.intelligencehumansocial.fragment.FirstFragment"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent" />

                <fragment
                    android:id="@+id/content4"
                    android:name="com.lihuan.intelligencehumansocial.fragment.SecondFragment"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <fragment
                    android:id="@+id/content5"
                    android:name="com.lihuan.intelligencehumansocial.fragment.FirstFragment"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </FrameLayout>

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>
        </LinearLayout>
    </TabHost>

</LinearLayout>

注意事項:1.fragment作爲內容填充,要在fragment類中實現onCreateVIew方法。

                   2.TabWidget的id不能亂改,只能是那個

3.類文件:

public class TabHostActivity extends FragmentActivity {
    // FragmentActivity和ActivityGroup繼承父類相同。TabActivity繼承ActivityGroup,兩個都已經過期不用
    // 使用FragmentActivity來代替。
    private TabHost tabHost;
    private TabWidget tabWiget;

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);
        this.setContentView(R.layout.activity_main);
        View guideHome = (View) LayoutInflater.from(this).inflate(
                R.layout.guide_home, null);
        View guideWeiTao = (View) LayoutInflater.from(this).inflate(
                R.layout.guide_weitao, null);
        View guideLife = (View) LayoutInflater.from(this).inflate(
                R.layout.guide_nearby, null);
        View guideShop = (View) LayoutInflater.from(this).inflate(
                R.layout.guide_shop, null);
        View guideAccount = (View) LayoutInflater.from(this).inflate(
                R.layout.guide_account, null);

        // 獲取tabHost,tabHost是個容器組件
        tabHost = (TabHost) findViewById(R.id.tabhost);
        // Call setup() before adding tabs if loading TabHost using
        // findViewById() except TabActivity
        tabHost.setup(); // 類似於初始化過程,不調用無法獲取到tabWiget,調用addTab需要tabwiget。TabActivity內部已經調用了

        TabSpec mTabSpec1 = tabHost.newTabSpec("tab1").setIndicator(guideHome)
                .setContent(R.id.content1);
        TabSpec mTabSpec2 = tabHost.newTabSpec("tab2")
                .setIndicator(guideWeiTao).setContent(R.id.content2);
        TabSpec mTabSpec3 = tabHost.newTabSpec("tab3").setIndicator(guideLife)
                .setContent(R.id.content3);
        TabSpec mTabSpec4 = tabHost.newTabSpec("tab4").setIndicator(guideShop)
                .setContent(R.id.content4);
        TabSpec mTabSpec5 = tabHost.newTabSpec("tab5")
                .setIndicator(guideAccount).setContent(R.id.content5);
        
        tabHost.addTab(mTabSpec1);
        tabHost.addTab(mTabSpec2);
        tabHost.addTab(mTabSpec3);
        tabHost.addTab(mTabSpec4);
        tabHost.addTab(mTabSpec5);
        
        // 獲取TabWiget ,佈局文件中一定要注意id=tabs,因爲TabHost類中,tabWeiget獲取是通過id=tabs
        tabWiget = tabHost.getTabWidget(); // tabWiget的作用,設置tabWiget的總體的佈局。
        /**
         * 可以對tabWiget進行佈局設置
         */
}

    注意事項:1.請繼承FragmentActivity;2. tabHost = (TabHost) findViewById(R.id.tabhost);後請立即調用setup()。setup()中,初始化了各種數據,如果不調用,後面的操作將出現異常,大家可以查看setup()源代碼。


希望大家再看完我的文章後,能夠避免很多錯誤,高效率的做出精美的底部菜單導航欄。

附源代碼:http://download.csdn.net/detail/meijian531161724/7527103





















發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章