Android 导航条效果实现(二) FragmentTabHost

原创 2016年09月18日 16:53:10

(一)与TabActivity中实现选项卡的不同之处:

  1. TabHost对象的创建方式不同;
  2. TabSpec对象的创建方式不同;
  3. 布局文件不同。

(二)、FragmentTabHost实现选项卡效果的步骤:

  1. 写选型卡页面特殊的布局文件:
    根节点必须是<android.support.v4.app.FragmentTabHost>
    必须有一个布局节点,用来放置选项卡内容。

  2. 继承FragmentActivity:(以前学习的过程中都是继承android.app.Activity类,但是这里需要继承android.support.v4.app.FragmentActivity)

  3. 创建TabHost对象:通过(FragmentTabHost) findViewById(R.id.tabhost)方法来实现。

  4. TabHost执行setup()方法:
    如果使用 findViewById() 加载 TabHost,那么在新增一个选项卡之前, 需要调用 setup()方法。而在 TabActivity 中调用了 getTabHost() 方法后,你就不再需要调用setup()了。

例如:

tabHost.setup(this, getSupportFragmentManager(), R.id.layout_container_tabcontent);

5、分别创建TabSpec对象:
通过TabHost对象的newTabSpec()方法创建TabSpec对象;
通过setIndicator()设置标签和图标;

6、TabHost对象添加TabSpec对象。通过TabHost对象的addTab()方法实现添加选项卡。
调用TabHost对象的有三个参数的addTab()方法。第一个参数是TabSpec对象,第二个参数是Fragment类的class文件,第三个参数的往Fragment对象中传递的Bundle数据。

示例代码:
MainActivity.java

package com.noonecode.fragmenttabhost;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;

public class MainActivity extends FragmentActivity {

    private FragmentTabHost mTabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);

        mTabHost.addTab(mTabHost.newTabSpec("record").setIndicator("记录")//
                , FragmentRecord.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("contacts").setIndicator("联系人")//
                , FragmentContacts.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("collections").setIndicator("收藏夹")//
                , FragmentCollections.class, null);
    }
}



activity_main.xml

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.noonecode.fragmenttabhost.MainActivity" >

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

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

</android.support.v4.app.FragmentTabHost>



每个Fragment选项的页面的布局都很简单,只有一个TextView。

如下:
fragment_record.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.noonecode.fragmenttabhost.RecordActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FragmentRecord"
        android:textSize="22sp" />

</RelativeLayout>



效果演示:
FragmnetTabHost


注意:

  • 通过findViewById找到TabHost,这时FragmentTabHostid可以不必为默认值(@android.R.id.tabhost),如果设置为了默认值,那么必须有一个默认id的FrameLayout内容布局。
    这种情况下,如果想设置自定义的id,可以使用如下的方法实现:
<android.support.v4.app.FragmentTabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <TabWidget
            android:id="@android:id/tabs"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"/>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"/>

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    </LinearLayout>
</android.support.v4.app.FragmentTabHost>

代码中:

mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);//这里设置的自定义的id
  • 当前Demo在FragmentActivity中使用FragmentTabHost实现了选项卡。如果想在Fragment中实现这种效果:
public class FragmentTabs extends Fragment {
    private FragmentTabHost mTabHost;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mTabHost = new FragmentTabHost(getActivity());
        mTabHost.setup(getActivity(), getChildFragmentManager(), R.id.fragment1);

        mTabHost.addTab(mTabHost.newTabSpec("record").setIndicator("记录")//
                , FragmentRecord.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("contacts").setIndicator("联系人")//
                , FragmentContacts.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("collections").setIndicator("收藏夹")//
                , FragmentCollections.class, null);
        }
        return mTabHost;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        mTabHost = null;
    }
}



(完毕)

导航:
Android 导航条效果实现(一) TabActivity+TabHost
http://blog.csdn.net/qq_33425116/article/details/52573967

Android 导航条效果实现(二) FragmentTabHost
http://blog.csdn.net/qq_33425116/article/details/52575811

Android 导航条效果实现(三) ViewPager+PagerTabStrip
http://blog.csdn.net/qq_33425116/article/details/52577570

Android 导航条效果实现(四) ViewPager+自定义导航条
http://blog.csdn.net/qq_33425116/article/details/52584282

Android 导航条效果实现(五) ActionBar+Fragment
http://blog.csdn.net/qq_33425116/article/details/52587635

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment
http://blog.csdn.net/qq_33425116/article/details/52599818

版权声明:本文为博主原创文章,未经博主允许不得转载。

学习笔记之——FragmentTabHost实现中间按钮凸出效果

说起FragmentTabHost,相信小伙伴们用得比较多也比较熟悉的是用其实现类似如下图1所示的效果吧! 但是,新启动的项目老大却突发奇想想要设置一个中间按钮凸出效果的FragmentTabHost...
  • LXLYHM
  • LXLYHM
  • 2016年08月02日 22:52
  • 3452

Android的FragmentTabHost使用(顶部或底部菜单栏)

首先给大家拜个年,祝大伙新年快乐!万事如意! 第一种:通过FragmentTabHost+Fragment来实现其点击顶部实现切换页面的效果!** 第一步:编写布局文件...
  • willba
  • willba
  • 2017年01月30日 20:38
  • 1358

Android 导航条效果实现(四) ViewPager+自定义导航条

ViewPager+自定义导航条实现导航效果 效果说明: 自定义导航条; 导航条固定位置,选项卡按比例显示; 选项卡下方有一个指示器,指示当前页面的位置。...
  • qq_33425116
  • qq_33425116
  • 2016年09月19日 11:31
  • 2461

关于用FragmentTabHost的实现底部导航栏的一些注意的地方~

参考代码出处:http://blog.csdn.net/yangyu20121224/article/details/9016223其中有些地方用的不是太明白,自己在Demo中好好好折腾了下,算是弄白...
  • wfs31415926
  • wfs31415926
  • 2016年08月14日 00:38
  • 1031

FragmentTabHost + pageView 实现可左右滑动的底部菜单 ...

在android版本13以前,实现底部菜单常用的手法是使用TabActivity+TabHost ,但在13版本中TabActivity已经被舍弃。 以下为官方原文: This class was ...
  • yanggz888
  • yanggz888
  • 2014年04月30日 15:08
  • 1454

用FragmentTabHost管理Fragment,实现页面切换

现在大多数的应用的主页面都有点类似新浪微博的主页面,下方是一个导航栏,点击导航栏会进行页面的切换。从技术实现上来说,这并不复杂,可以有很多方法来实现,比如用radiogroup和fragment配合就...
  • u013320868
  • u013320868
  • 2016年05月18日 18:31
  • 3101

主流移动应用开发框架(2)——fragment+fragmenttabhost实现底部选项卡导航(可滑动切换)

Fragment对于我们来说可能并不陌生,在android3.0之后引进开发,对于处理平板大屏幕界面分布,fragment有着activity没有的优势,它“寄生”于activity解决了一个屏幕显示...
  • u010794180
  • u010794180
  • 2014年11月30日 10:55
  • 4632

android FragmentTabHost的使用技巧及注意事项

目前主流的app主页都是由几个tab页组成,因此我们开发app的时候一般都会涉及到主页tab的切换实现。常用的主页tab切换实现有viewpage和FragmentActivity组合,Fragmen...
  • u014763302
  • u014763302
  • 2017年02月24日 11:50
  • 866

底部菜单栏(一)Fragment+FragmentTabHost 来实现底部菜单栏方式

这是一种实现底部导航栏的方法(方便简洁),也可以自定义布局,进行click;因此Fragment在一段时间内被疯狂的使用~源代码下载点:http://download.csdn.net/detail/...
  • CL18652469346
  • CL18652469346
  • 2016年08月20日 16:02
  • 1472

FragmentTabHost简单用法,以及Fragment生命周期

FragmentTabHost简单用法,及fragment生命周期
  • u014620028
  • u014620028
  • 2016年04月26日 18:50
  • 2230
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 导航条效果实现(二) FragmentTabHost
举报原因:
原因补充:

(最多只允许输入30个字)