Android：实现TabWidget选项卡按钮在屏幕下方

看到很多热门的Android程序（如：新浪微博、腾讯微博、京东商城、淘宝、当当等等）使用选项卡风格作为程序界面的主框架结构，而 Android的选项卡控件默认是按钮在上方的。我在网上看到有多种实现方法，这里提供一种个人觉得比较简单的。由于我对Android开发所知甚少，方法的优劣目前不好评价，欢迎各位提供更好的思路。

主要原理：设置 TabWidget 控件的 android:layout_alignParentBottom="true" 实现。

main.xml

                    <?xmlversion="1.0"encoding="utf-8"?>
            <TabHostandroid:id="@+id/tabhost"xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="vertical"android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <RelativeLayoutandroid:orientation="vertical"
            android:layout_width="fill_parent"android:layout_height="fill_parent">
            <TabWidgetandroid:id="@android:id/tabs"
            android:layout_width="fill_parent"android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"/>
            <FrameLayoutandroid:id="@android:id/tabcontent"
            android:layout_width="fill_parent"android:layout_height="fill_parent">
            <LinearLayoutandroid:id="@+id/tab1"
            android:layout_width="fill_parent"android:layout_height="fill_parent"
            androidrientation="vertical">
            <TextViewandroid:id="@+id/view1"android:layout_width="wrap_content"
            android:layout_height="wrap_content"android:text="@string/textView_1"/>
            </LinearLayout>
            <LinearLayoutandroid:id="@+id/tab2"
            android:layout_width="fill_parent"android:layout_height="fill_parent"
            androidrientation="vertical">
            <TextViewandroid:id="@+id/view2"android:layout_width="wrap_content"
            android:layout_height="wrap_content"android:text="@string/textView_2"/>
            </LinearLayout>
            <LinearLayoutandroid:id="@+id/tab3"
            android:layout_width="fill_parent"android:layout_height="fill_parent"
            androidrientation="vertical">
            <TextViewandroid:id="@+id/view3"android:layout_width="wrap_content"
            android:layout_height="wrap_content"android:text="@string/textView_3"/>
            </LinearLayout>
            <LinearLayoutandroid:id="@+id/tab4"
            android:layout_width="fill_parent"android:layout_height="fill_parent"
            androidrientation="vertical">
            <TextViewandroid:id="@+id/view4"android:layout_width="wrap_content"
            android:layout_height="wrap_content"android:text="@string/textView_4"/>
            </LinearLayout>
            </FrameLayout>
            </RelativeLayout>
            </TabHost>

TabDemo1

                    packagecom.focusmobi.TabDemo1;
            
            importandroid.app.Activity;
            importandroid.os.Bundle;
            importandroid.widget.TabHost;
            
            publicclassTabDemo1extendsActivity{
            /**Calledwhentheactivityisfirstcreated.*/
            @Override
            publicvoidonCreate(Bundleicicle){
            super.onCreate(icicle);
            
            setContentView(R.layout.main);
            setTitle("TabWidgetDemo");
            
            TabHosttabs=(TabHost)findViewById(R.id.tabhost);
            tabs.setup();
            
            TabHost.TabSpecspec=tabs.newTabSpec("tab1");
            spec.setContent(R.id.tab1);
            spec.setIndicator("主页");
            tabs.addTab(spec);
            
            spec=tabs.newTabSpec("tab2");
            spec.setContent(R.id.tab2);
            spec.setIndicator("经济");
            tabs.addTab(spec);
            
            spec=tabs.newTabSpec("tab3");
            spec.setContent(R.id.tab3);
            spec.setIndicator("汽车");
            tabs.addTab(spec);
            
            spec=tabs.newTabSpec("tab4");
            spec.setContent(R.id.tab4);
            spec.setIndicator("科技");
            tabs.addTab(spec);
            
            tabs.setCurrentTab(0);
            }
            }

本文只是解决了将选项卡按钮放在屏幕下方，至于如何美化按钮使程序看起来更加赏心悦目已经超出了本文范围，以后我们再讨论。

源码下载：android_tabwidget1_src.rar

作者：黎波
博客： http://bobli.cnblogs.com/
日期：2011年5月9日

更多相关文章

随机推荐