使用TabHost实现的导航栏有三种添加页面的方法，分别是直接在布局代码的tab里面添加；通过include标签添加；通过Java代码指定另一个Activity添加。下面是三种方法的示例：



直接在布局代码的tab里面添加标签页

使用拖控件拖出来的TabHost，在它的布局层次上会有三个LinearLayout，id分别为tab1、tab2、tab3，如下图所示： 


然后我们可以新建一个Layout，在这个Layout里设计好界面后，将xml代码直接放入tab（1、2、3）的标签里，如下图所示，将设计好了的文本标签放入了tab1这一标签当中： 


这种方法比较简单、易懂，但这种方法只适合于小型的应用界面，如果应用界面很复杂的话，这个layout布局文件就会变得很大，不利于代码的维护。



使用include标签代替layout

include标签可以装载一个layout文件，嵌入在另一个layout文件里，十分有利于切分大型的布局文件，这是我的一篇关于include标签的使用的博文，http://blog.csdn.net/zgljl2012/article/details/44665643 

到这里，这个方法就应该比较好理解了，就是先设计一个layout布局文件，然后用include标签将其嵌入在某一个标签里即可。在此就不再赘述。



使用addTab(TabSpec tabSpec)方法添加标签页

mTabHost是TabHost控件，然后使用newTabSpec创建了一个TabSpec，并且设置了名字叫做我“页面三”，并且设定了它的内容是Tab3这个Activity：

mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("页面三")
                .setContent(new Intent(this,Tab3.class)));


上述三种方法建议使用第二种和第三种，第二种适合于静态的标签页展示；第三种则适合于需要与用户交互的标签页。

添加图标：

在head标签中添加如下代码：
<link rel="icon" href="./home.ico" type="image/x-icon">  //在标题栏的左侧显示图标 href:图标地址
<link rel="shortcut icon" href="./home.ico" type="image/x-icon">  //在收藏夹里面显示图标 href:图标地址

添加标题：
在head标签中添加如下代码：
<title>主页</title> 

Vue项目中添加 页面 标签页 的 小图标
1.找到 build 文件夹中的  webpack.prod.conf.js文件
// webpack.prod.conf.js
...
//找到 这 一配置项
new HtmlWebpackPlugin({
	...
});

添加 favicon 属性



2.找到 build 文件夹 内的 webpack.dev.conf.js 文件
// webpack.dev.conf.js 文件

...
//找到 这 一配置项
new HtmlWebpackPlugin({
	...
});

同样添加 favicon 属性



3.在 index.html 文件 中 添加 link标签
<link rel="shortcut icon" type="image/x-icon" href="./logo-01.ico" rel="external nofollow">

4.将 图标存放到 主目录 下(与index.html 同级)

注：
貌似CSDN的显示效果不佳，如果有需要的话我可以上传pdf格式的；
另外如果文章中有错误还请给位多多提意见，谢谢。


pdf格式文档：http://download.csdn.net/detail/vesper305/7808837；


主要内容
标签栏多视图和导航栏多视图的区别
用Storyboard构建标签栏多视图应用程序
 
简述
标签栏应用程序是一种多视图应用程序，它在屏幕底端显示一行按钮，称为标签栏（tab bar）。单机某个按钮就会激活一个新的视图控制器（标签页），并显示一个新视图，同时底部任然保留着标签栏。如下图所示的3个标签栏。
 
另一种常见的多视图iPhone应用程序是基于导航的应用程序，这类应用程序拥有一个导航控制器，使用导航栏控制一系列分层的视图。导航控制器跟踪所在的视图深度，并且向你提供控制权，让你可以回到之前的视图。而标签栏用于从两个或更多选项中选择一个选项，而且只能选择一个（标签栏多是用于并列平行的页面间的选择）。
 
参考：该简述主要参考《精通iOS开发》第六章：多视图应用程序
 
Storyboard构建标签栏
这里我们讲述一下用Storyboard构建标签栏多视图应用程序UI的方法。
1选择Tab Bar Controller
首先在Storyboard的对象选择中选择一个Tab Bar Controller：

在Storyboard中我们可以看到如下图所示的UI界面，第一个页面（Tab
 Bar Controller）我们不需要对它进行操作，因为我们对它的标签页（后面两个页面）的操作会自动更新到Tab Bar Controller上面。
 
2添加我们自己的TableView Controller
从上图可以看到Tab Bar Controller拖入Storyboard中的时候就自带了两个标签页，其类型为View
 Controller，我们可以将其删除然后按照我们的需要添加我们自己的视图控制器。
首先我们删除第一个自带的View Controller，然后从右边拖入一个TableView Controller；
如上图所示，添加自己的TableView Controller之后，从Tab Bar Controller到TableViewController建立跳转（按住Control，从Tab
 Bar Controller向TableViewController拖线），从上图我们我们可以看到除了平常的push、modal、custom三种方式之外，多出了一个View
 Controllers，这里我们应该选择这种连接；
 
3修改标签栏中的标签样式
选中我们刚才添加的TableViewController中的标签图标（Tab Bar Item），
在属性检查器中查看属性：

这里我们可以修改上面标出的两个项。第一个是标签图标下面显示的文字，第二个是图标ICON。下面是我们修改后的效果：
这时，我们查看Tab Bar Controller中的标签栏已经自动更新（这就是我们前面提到的不需要修改Tab BarController）：
同样，我们可以删掉其自带的另一个ViewController然后添加我们需要的TableViewController，然后重复我们刚才的操作：
 
4添加一个新的Controller
在前面我们拖入的Tab BarController只有两个View Controller，同时标签栏中也只有两个标签图标。这里我们添加一个新的视图控制器TableViewController

这里我们可以看到，在未连接新添加的TableView Controller课Tab Bar Controller的时候，标签栏只有两个标签，同时新添加的TableView
 Controller中也没有标签栏。然后我们按照刚才的方法连接Tab Bar Controller，操作完全一致。
可以看到当连接Tab Bar Controller和TableView Controller之后Tab
 Bar Controller中的标签栏标签数自动变成了3个。同样我们可以修改新添加的TableViewController中的标签样式。

到此时一个有3个TableView标签页的标签栏多页面UI就做好了，后面的工作就是添加Controller和Model了，这里我们不做介绍。
5运行
为了看出标签页的切换，我们再每个页面中添加了Label，表面页面的切换：
 
6参考
具体的做法也可以参考这个视频，讲的比较详细：
http://teamtreehouse.com/library/build-a-selfdestructing-message-iphone-app-2/designing-and-starting-the-app/a-storyboard-with-a-tab-bar-controller
 
备注
这里的标签栏多页面应用程序只是一个单独的标签栏显示，具体如何进入标签栏页，用什么方式进入，各有什么区别，我们尚未提及，后面《Tab Bar Controller与导航栏》一文中会详述。
 
该Demo源代码可以再这里下载：http://download.csdn.net/detail/vesper305/7808097；
 

Guo Liu

于8/24/2014星期日第三次编辑