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

最新推荐文章于 2021-05-27 15:59:36 发布

蔡蔡动起来

最新推荐文章于 2021-05-27 15:59:36 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： FragmentTabHost 导航类似qq底部的菜单栏

本文链接：https://blog.youkuaiyun.com/weixin_40512519/article/details/80435982

Android 专栏收录该内容

5 篇文章

订阅专栏

第一种：通过FragmentTabHost+Fragment来实现其点击顶部实现切换页面的效果！

页面结构如下：

第一步：编写布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <android.support.v4.app.FragmentTabHost
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@android:id/tabhost"
        >
        <!--
        系统要求，具体原因暂时还未追究，不然就会报错
        这个FrameLayout并不是显示内容的fragment
        且其id必须为tabcontent
        -->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"/>
    </android.support.v4.app.FragmentTabHost>

    <!--
        用来存放标签所对应的内容,用来显示我们的fragment
        若其放置在FragmentTabHost下边，则标签就位于上边，
        反之，标签则位于下边
        -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/fragment"
        >
    </FrameLayout>


</LinearLayout>

第二步：Activity要继承于FragmentActivity

/**
 * 由于AppCompatActivity继承FragmentActivity
 * 所以无需再去继承FragmentActivity
 */
public class MainActivity extends AppCompatActivity {

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

第三步：添加Tab到TabHost中，且让Tab与 Tab所要显示的内容(fragment)绑定在一起

public class MainActivity extends FragmentActivity {
    private FragmentTabHost mTabHost;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //添加Tab到TabHost中，且让Tab与 Tab所要显示的内容(fragment)绑定在一起
        mTabHost=(FragmentTabHost) findViewById(android.R.id.tabhost);
        /**
         * 在setup()里边，其才去获取到TabWidget，所以在此之前，不能直接调用getTabWidget()方法；
         */
        mTabHost.setup(this, getSupportFragmentManager(), R.id.fragment);
        /**
         *addTab:添加标签到TabHost中
         * setIndicator:表示设置标签的logo
         */
        mTabHost.addTab(mTabHost.newTabSpec("message").setIndicator("消息"),
                MessageFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("connect").setIndicator("联系人"),
                WatchFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("watch").setIndicator("看点"),
                ConnectFragment.class, null);
    }
}

第四步：编写XML和fragment。

ConnectFragment.java:

public class ConnectFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.activity_connetion,null);
        return view;
    }
}

activity_connection.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Connetion"
        android:textSize="30dp"
        />

</LinearLayout>

总结：1>
Tab存在于TabWidget内，而TabWidget是存在于TabHost内。与此同时，
在TabHost内无需在写一个TabWidget，系统已经内置了一个TabWidget

2>关于fragment内容的布局，其位置可以放置在FragmentTabHost外面的上边，里边，或者外边的下边都可以；
当放置在上边时，那么标签是位于底部的；

当放置在里边或者外面的下边时，则此时，标签是位于顶部的；

第二种：通过FragmentTabHost+Fragment来实现其点击底部实现切换页面的效果！**

第一步：activity_main.xml（主布局文件）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    >

    <!-- 存放主要页面内容 -->
    <FrameLayout
        android:id="@+id/maincontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
    </FrameLayout>

    <!-- 底层菜单 -->
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <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>

第二步：activity_connection.xml布局（(由于只有文字不同，这里只给出一个)）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Connetion"
        android:textSize="30dp"
        />

</LinearLayout>

第三步：ConnectFragment.java同上，只显示一个

public class ConnectFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.activity_connetion,null);
        return view;
    }
}

第四步：tabcontent.xml（具体底部菜单详细布局）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:gravity="center_horizontal"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="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>

第四步：bt_selector.xml（底部菜单点击背景）

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <item android:drawable="@drawable/icon_setting" android:state_pressed="true" />
    <item android:drawable="@drawable/icon_setting" android:state_selected="true" />

</selector>

第五步：MainActivity.java（主代码)

public class MainActivity extends AppCompatActivity {
    private FragmentTabHost fragmentTabHost;
    private String texts[]={"消息","联系人","看点","动态"};
    private int imageButton[]={R.drawable.icon_setting,R.drawable.icon_setting,R.drawable.icon_setting,R.drawable.icon_setting};
    private  Class fragmentArray[]={MessageFragment.class,ConnectFragment.class, WatchFragment.class, DynamicFragment.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);
            fragmentTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.color.colorAccent);
        }
    }
    private View getView(int i) {
               //取得布局实例
                View view=View.inflate(MainActivity.this, R.layout.tabcontent, 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中背景显示颜色的话，就用

.setBackgroundResource(R.color.colorAccent)

如果想显示背景图片的话，就用
.setBackgroundResource(R.drawable.bt_selector);