目前我们看微信的底部,有四个导航栏,那我们应该来怎么实现类似的导航栏呢?

在 android 4.0 的时候,推出了一个新的工具,fragmentTabHost 。

fragmentTabHost  可以自己自定义底部的样式,你可以自由添加图标或者文字,都可以。那我们怎么来使用呢?

首先我们来看 MainActivity;

public class MainActivity extends AppCompatActivity {

    private FragmentTabHost fragmentTabHost;
private String texts[] = { "首页", "通讯录", "发现", "我", "更多" };
private int imageButton[] = { R.drawable.bt_home_selector,
R.drawable.bt_home_selector, R.drawable.bt_home_selector,R.drawable.bt_home_selector ,R.drawable.bt_home_selector};
private Class fragmentArray[] = {FragmentPage1.class,FragmentPage2.class,FragmentPage3.class,FragmentPage4.class,FragmentPage5.class}; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); // 实例化tabhost
fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
fragmentTabHost.setup(this, getSupportFragmentManager(),
R.id.maincontent); for (int i = 0; i < texts.length; i++) {
TabHost.TabSpec spec=fragmentTabHost.newTabSpec(texts[i]).setIndicator(getView(i)); fragmentTabHost.addTab(spec, fragmentArray[i], null); //设置背景(必须在addTab之后,由于需要子节点(底部菜单按钮)否则会出现空指针异常)
fragmentTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.bt_selector);
} } private View getView(int i) {
//取得布局实例
View view=View.inflate(MainActivity.this, R.layout.tab_item_view, null); //取得布局对象
ImageView imageView=(ImageView) view.findViewById(R.id.image);
TextView textView=(TextView) view.findViewById(R.id.text); //设置图标
imageView.setImageResource(imageButton[i]);
//设置标题
textView.setText(texts[i]);
return view;
} }
  • 在 fragmentTabHost.setup 函数中,我们需要传入三个参数,一个是上下文内容Context,一个是FragmentManager,第三个是放置fragment的容器的id;

  • 注意容器必须是 FrameLayout 类型,因为内部定义的类型就是这个。内部会根据id来进行初始化。

  • fragmentTabHost.newTabSpec(texts[i]) 是定义 tag 的,方便后续根据 tag 来查找具体的 fragment。tag 就是 texts[i] 中的值;

  • setIndicator(getView(i)) 是为每一个 fragment 指定一个 view 指示器,这个 view 我们可以自己定义,具体引用就是 getView 函数。

  • addtab 函数则将 fragment 和 tag 联系在一起。

  • 在 getView 中,我们可以自己自定义一个 itemView 来作为 tab 的样式,这个就不具体展开了,看看函数就懂。

然后我们再来简单看看 fragment 怎么写:

public class FragmentPage1 extends Fragment {

    @Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_1, null);
}
}

接下去我们看下具体的布局文件:

首先是整体的布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" > <!-- 存放主要页面内容 --> <FrameLayout
android:id="@+id/maincontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout> <!-- 底层菜单 --> <android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/ic_launcher" > <FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" >
</FrameLayout>
</android.support.v4.app.FragmentTabHost> </LinearLayout>

接下去是 tab 的itemview 的布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" > <ImageView
android:id="@+id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<TextView
android:id="@+id/text"
android:padding="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
/> </LinearLayout>

最后就是fragment 的布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
> <TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="我是第一个Fragment"
android:textSize="20dp"
/> </RelativeLayout>

好了,到这里,我们就基本讲完了。

附上源码:https://github.com/huanshen/Learn-Android/tree/master/fragmentTabHost

fragmentTabHost 使用示例的更多相关文章

  1. Tablayout ViewPage 使用示例

    上一篇文章介绍了使用 FragmenttabHost 来使用 tab 导航:到 Android 5.0 的时候,又推出了 TabLayout.因此,有必要对tablayout 进行了解下. 首先我们来 ...

  2. 【Android Widget】FragmentTabHost

    android.support.v4包里面提供了FragmentTabHost用来替代TabHost,FragmentTabHost内容页面支持Fragment,下面我们就通过示例来看他的用法 效果图 ...

  3. Android系统示例之ActionBarCompat

    导入工程ActionBarCompat时,出现错误.从其他工程下拷贝project.propertiest文件过来,问题仍在.拷贝后需要重启Eclipse才解决.问题如下: [2013-07-03 1 ...

  4. Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置(服务端+iOS端)

    本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...

  5. .NET跨平台之旅:将示例站点升级至 ASP.NET Core 1.1

    微软今天在 Connect(); // 2016 上发布了 .NET Core 1.1 ,ASP.NET Core 1.1 以及 Entity Framework Core 1.1.紧跟这次发布,我们 ...

  6. 通过Jexus 部署 dotnetcore版本MusicStore 示例程序

    ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mono等)上使用MVC 和Entity Framework的示例程序,本文将展示 ...

  7. WCF学习之旅—第三个示例之四(三十)

           上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九)   ...

  8. FragmentTabHost的基本用法

    开通博客以来已经约莫1个月了.几次想提笔写写东西,但总是由于各种各样的原因并没有开始.现在,年假刚结束,项目也还没有开始,但最终促使我写这篇博客的是,看了一篇博友写的新年计划,说是要在新的一年中写50 ...

  9. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

随机推荐

  1. 表空间tablespace,数据文件datafiles,和控制文件control files介绍

    https://docs.oracle.com/cd/B19306_01/server.102/b14220/physical.htm#i5919 本文系翻译 表空间tablespace,数据文件da ...

  2. Jmeter脚本录制方法(二)——手工编写脚本(jmeter与fiddler结合使用)

    jmeter脚本录制方法可以分三种,前几天写的一篇文章中,已介绍了前两种,今天来说下第三种,手工编写脚本,建议使用这一种方法,虽然写的过程有点繁琐,但调试脚本比前两者方式都要便捷. 首先来看下三种方式 ...

  3. JS中replace()用法举例

    语法: string.replace(regexp,replacement) 参数: regexp:声明了要替换的模式的RegExp对象.如果该参数是一个字符串,则将它作为要检索的直接量文本模式,而不 ...

  4. mysql多实例-主从复制安装

    安装环境:Centos6.5 mysql版本:mysql-5.5.32.tar.gz 一:安装前准备: 1.安装一些依赖库 yum install cmake gcc gcc-c++ ncurses- ...

  5. mysql单独可连接,php连接mysql失败之 Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

    此种解决方案使用场景: 1,mysql单独可以启动而且远程工具也可以连接 2,php无法连接. 3,find / -name mysql.sock 可以找到文件路径 4,报错 Can't connec ...

  6. 数据抓取分析(python + mongodb)

    分享点干货!!! Python数据抓取分析 编程模块:requests,lxml,pymongo,time,BeautifulSoup 首先获取所有产品的分类网址: def step(): try: ...

  7. USACO2004 Open提交作业(区间DP)

    Description 贝西在哞哞大学选修了C门课,她要把这些课的作业交给老师,然后去车站和同学们一 起回家.老师们在办公室里,办公室要等他们下课后才开,第i门课的办公室在Ti时刻后开放. 所有的办公 ...

  8. Maven Install指令构建时出现找不到符号

    检查引用的JRE编译的版本,可能由于JRE编译版本太低导致的  

  9. [Java第一个游戏]JFrame文本框下贪吃蛇

    刚刚接触java的文本框绘图的知识点,然后就可以按照老师的提醒做一些简单的游戏,对JFrame加深一下,下面就贪吃蛇给出一些源代码,其实正真的实现的代码并不多,只是稍微处理一下就可以明白,下面代码均有 ...

  10. HTML5的Websocket(理论篇 I)

    HTML5的Websocket(理论篇 I) ** 先请来TA的邻居:** http:无状态.基于tcp请求/响应模式的应用层协议 (A:哎呀,上次你请我吃饭了么? B:我想想, 上次请你吃了么) t ...