简单实现Android底部工具栏

实现底部工具栏有很多种方法：可以用android的Tab控件，也可以自定义布局实现，还可以用ActionBar实现，或者直接用ViewPager+Fragment实现

Android Tab使用总结

TabHost是整个Tab的容器，包括TabWidget和FrameLayout两部分。TabWidget用于展示标签页，FrameLayout用于展示隶属于各个标签页的具体内容。如果我们的Activity是继承自TabAcitivty，那么TabHost的id必须设置为@android:id/tabhost，TabWidget必须设置为@android:id/tabs，FrameLayout需要设置为@android:id/tabcontent。

1、创建一个简单的Tab应用
废话不多说，直接上代码：

// main.xml
<? 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:orientation = "vertical"
        android:layout_width = "fill_parent"
        android:layout_height = "fill_parent" >
        < TabWidget
            android:id = "@android:id/tabs"
            android:layout_width = "fill_parent"
            android:layout_height = "wrap_content" />
        < FrameLayout
            android:id = "@android:id/tabcontent"
            android:layout_width = "fill_parent"
            android:layout_height = "fill_parent" >
            < include android:id = "@+id/left" layout = "@layout/tab_left" />
            < include android:id = "@+id/right" layout = "@layout/tab_right" />
        </ FrameLayout >
    </ LinearLayout >
</ TabHost >

左边标签页的内容：

// tab_left.xml
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent" >
    < TextView
        android:text = "left"
        android:layout_width = "fill_parent"
        android:layout_height = "fill_parent" />
</ LinearLayout >

右边标签页的内容：

// tab_right.xml
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent" >
    < TextView
        android:text = "right"
        android:layout_width = "fill_parent"
        android:layout_height = "fill_parent" />
</ LinearLayout >

修改MainActivity，改成从TabActivity继承：

public class MainActivity extends TabActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super .onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tabHost = getTabHost();
        tabHost.addTab(tabHost.newTabSpec( "left" )
                .setIndicator( "Left" )
                .setContent(R.id.left));
        tabHost.addTab(tabHost.newTabSpec( "right" )
                .setIndicator( "Right" )
                .setContent(R.id.right));
        tabHost.setCurrentTab( 0 );
    }
}

到这里，一个简单至极的Tab应用已经完成了。不过在实际情况中，每个Tab页会有多个控件，并且有很多业务逻辑在其中。如果使用上述代码，将所有控件和逻辑放在一个类中，那么这个类将变的极度臃肿，以后维护也会变的非常困难。需要找个简单且优雅的方案解决这个问题。

2、简单优雅且容易维护的Tab应用
删除main.xml中的include语句：

<? 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:orientation = "vertical"
        android:layout_width = "fill_parent"
        android:layout_height = "fill_parent" >
        < TabWidget
            android:id = "@android:id/tabs"
            android:layout_width = "fill_parent"
            android:layout_height = "wrap_content" />
        < FrameLayout
            android:id = "@android:id/tabcontent"
            android:layout_width = "fill_parent"
            android:layout_height = "fill_parent" />
    </ LinearLayout >
</ TabHost >

新建TabLeftActivity和TabRightActivity类：

public class TabLeftActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super .onCreate(savedInstanceState);
        setContentView(R.layout.tab_left);

        // do something
    }
}

public class TabRightActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super .onCreate(savedInstanceState);
        setContentView(R.layout.tab_right);

        // do something
    }
}

修改MainAcvitity为如下代码：

public class MainActivity extends TabActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super .onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tabHost = getTabHost();
        tabHost.addTab(tabHost.newTabSpec( "left" )
                .setIndicator( "Left" )
                .setContent( new Intent( this , TabLeftActivity. class )));
        tabHost.addTab(tabHost.newTabSpec( "right" )
                .setIndicator( "Right" )
                .setContent( new Intent( this , TabRightActivity. class )));
        tabHost.setCurrentTab( 0 );
    }
}

最后，不要忘记在AndroidManifest.xml中注册TabLeftActivity和TabRightAcvitity这两个Activity。

3、如何将Tab显示在下方
这个非常简单，只要将main.xml中的LinearLayout改成RelativeLayout，然后给TagWidget添加android:layout_alignParentBottom=”true”属性。当然也可以在main.xml中把TabWidget放在FrameLayout下面。

简单实现Android底部工具栏

在网上大部分教程中，底部工具栏通常由TabHost和RadioGroup结合完成，每个工具栏项对应一个独立的Activity。不过，我们要实现的是多个工具栏项在单独的一个Activity上起作用。

http://www.cnblogs.com/figoyu/archive/2010/11/20/1882691.html就是这个。不过该教程对每个工具栏项设置了固定宽度80dip，导致工具栏项或屏幕大小不定时代码布局会有问题。

这里对该教程做了些改进，使之能做到适应不定的工具栏项或屏幕大小。改进后的布局代码如下：

// main.xml
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:orientation = "vertical"
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent" >
    < LinearLayout
        android:layout_width = "fill_parent"
        android:layout_height = "0dip"
        android:layout_weight = "1.0" >
        < ScrollView
            android:layout_width = "fill_parent"
            android:layout_height = "fill_parent"
            android:scrollbars = "vertical"
            android:fadingEdge = "vertical" >
            < TextView
                android:id = "@+id/content"
                android:layout_width = "fill_parent"
                android:layout_height = "wrap_content"
                android:textSize = "17dip" />
        </ ScrollView >
    </ LinearLayout >

    < include layout = "@layout/toolbar" />
</ LinearLayout >

以下是工具栏的布局代码：

// toolbar.xml
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:orientation = "horizontal"
    android:layout_width = "fill_parent"
    android:layout_height = "wrap_content"
    android:background = "@drawable/toolbar_bg" >
    < ImageButton
        android:id = "@+id/btn_index"
        android:src = "@drawable/index"
        android:text = "@string/index"
        style = "@style/toolbar" />
    < ImageButton
        android:id = "@+id/btn_prev"
        android:src = "@drawable/btn_prev_bg"
        android:text = "@string/prev"
        style = "@style/toolbar" />
    < ImageButton
        android:id = "@+id/btn_next"
        android:src = "@drawable/btn_next_bg"
        android:text = "@string/next"
        style = "@style/toolbar" />
    < ImageButton
        android:id = "@+id/btn_zoomin"
        android:src = "@drawable/zoomin"
        android:text = "@string/zoomin"
        style = "@style/toolbar" />
    < ImageButton
        android:id = "@+id/btn_zoomout"
        android:src = "@drawable/zoomout"
        android:text = "@string/zoomout"
        style = "@style/toolbar" />
</ LinearLayout >
Android 用户界面---操作栏（Action Bar 一）
http://blog.csdn.net/think_soft/article/details/7358393