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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33425116/article/details/52575811

Android中自定义tabhost的TAB页面被选中时TAB底部的颜色

系统的tabhost的tab底部是蓝色,
  • syc751255354
  • syc751255354
  • 2014-06-27 12:10:38
  • 3328

使用Fragment+Tabhost实现切换

  • 2013年10月09日 11:55
  • 597KB
  • 下载

带自定义title的tabhost

Step1:搭架子 tab_ayout.xml-----------容器
  • HUSTERma
  • HUSTERma
  • 2015-05-22 08:09:39
  • 361

ViewPager实现页面切换

先贴出来效果图(切换每个Tab键,页面跟随变化,效果图蓝条增加用户体验) 首先看整体效果图的布局文件吧(很简单,就三部分,分别是Tab栏目、定位蓝条、各个页面(是V4包下的ViewPager...
  • u013210620
  • u013210620
  • 2015-06-02 22:39:10
  • 739

【读书笔记《Android游戏编程之从零开始》】6.Android 游戏开发常用的系统控件(TabHost、ListView)

3.9 TabSpec与TabHost TabHost类官方文档地址:http://developer.android.com/reference/android/widget/TabHost.ht...
  • dddxxxx
  • dddxxxx
  • 2016-09-09 10:07:06
  • 775

仿微信例子,使用<em>TabHost</em>实现底部tab,显示未读信息条数

仿微信例子,使用<em>TabHost</em>实现底部tab,可以显示未读信息条数。适合初学者学习研究。综合评分:4 收藏(3)评论(46)举报 所需: 3积分/C币 下载个数: 267 开通VIP ...
  • 2018年04月17日 00:00

Android零基础入门第70节:ViewPager轻松完成TabHost效果

使用ViewPager轻松替代TabHost,开放性和灵活性更大。
  • cqkxzsxy
  • cqkxzsxy
  • 2017-09-28 10:30:13
  • 501

FragmentTabHost实现中间按钮凸出效果

  • 2017年05月23日 14:43
  • 2.88MB
  • 下载

FragmentTabHost+Fragment实现选项卡页面

FragmentTabHost+Fragment简单实现选项卡切换。
  • yanwenmuc
  • yanwenmuc
  • 2016-09-13 17:31:08
  • 1454

Android 探索Bottom sheets的使用

在Android Support Library 23.2版本推出之后,我们可以看到一些新的特性,例如AppCompat DayNight主题,BottomSheet等,其中BottomSheet控件...
  • qq_20785431
  • qq_20785431
  • 2016-09-08 15:26:08
  • 1371
收藏助手
不良信息举报
您举报文章:Android 导航条效果实现(二) FragmentTabHost
举报原因:
原因补充:

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