使用FragmentTabHost实现底部导航栏

最新推荐文章于 2022-12-27 16:41:47 发布

原创最新推荐文章于 2022-12-27 16:41:47 发布 · 置顶 · 476 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android studio

本文详细介绍使用FragmentTabHost实现底部导航栏的过程，包括XML布局配置、Java代码解析及Fragment切换机制，探讨提高应用效率的方法。

前言：本文记录实现毕设过程中所学习的功能，以新手的视角学习其他优秀博客的内容并进行整理，并尽可能地对其中的内容进行详细的解释。

一、效果图

二、大致项目结构

三、activity_main.xml代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--id必须为@android:id/tabhost -->

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#00ff00"
            android:visibility="visible"/>
        <!-- FrameLayout用来显示fragment -->
        <!-- id必须为@android:id/tabcontent -->

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

        <!-- id必须为@android:id/tabs -->
        <!-- FrameLayout和TabWidget的顺序对布局会有什么影响 -->
        <!-- 经过测试TabWidget在前导航栏会显示在上方 -->

    </LinearLayout>

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

四、fragment_home.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">

    <TextView
        android:id="@+id/tab_tv_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:textSize="40sp"
        android:text="home"/>

</LinearLayout>

五、FragmentHome.java

package com.example.administrator.fragmenttabhost;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentHome extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, null);
        //inflate(）将res/layout下的文件实例化
    }
}

六、MainActivity.java(重点)

package com.example.administrator.fragmenttabhost;

import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import static com.example.administrator.fragmenttabhost.R.id.tab_iv_image;
import static com.example.administrator.fragmenttabhost.R.id.tab_tv_text;

public class MainActivity extends AppCompatActivity {

    FragmentTabHost fragmentTabHost;
    //说一下自己对fragmentTabHost的理解
    //fragment即碎片 tab即标签 host即容器
    //这是一个通过在容器中通过点击不同标签tag切换到不同碎片的容器host

    private int[] mImages = {
            R.drawable.home_selector,
            R.drawable.calendar_selector,
            R.drawable.me_selector
    };

    private String[] mFragmentTags={
            "主页",
            "日历",
            "我"
    };

    private Class[] mClass={
            FragmentHome.class,
            FragmentCalendar.class,
            FragmentMe.class
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);//初始化
        fragmentTabHost.setup(this,getSupportFragmentManager(),android.R.id.tabcontent);
        //public void setup(Context context, FragmentManager manager, int containerId)
        //第一个参数为上下文，第二个参数获取一个碎片管理器，第三个参数为fragment的显示区域
        //该方法给fragmentTabHost设置父容器，设置标签对应的内容
        //其中android.R.id.tabcontent为activity_main.xml中frameLayout的ID（与R.id.tabcontent有区别！！！）

        for(int i=0;i<mImages.length;i++){
            TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(mFragmentTags[i]);
            //新建一个分页tabSpec，其中参数为tabSpec的名字，但整个实现步骤都没有用到
            tabSpec.setIndicator(getImageView(i));
            //为分页添加对应的view
            //设置对应的分页按钮对象
            fragmentTabHost.addTab(tabSpec,mClass[i],null);
            //将分页对象和fragment对应起来
            //fragmentTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.me_selector);
            //很多博客都用以上这个方法，该方法可以设置单个tab的背景，可以设置为一个selector来
            //实现例如未选中时为白色，选中为绿色的效果
            //fragmentTabHost.getTabWidget().getChildAt(i)为底部按钮
        }
    }

    //给单个Tab图标设置文字和图片
    private View getImageView(int index){
        View view = getLayoutInflater().inflate(R.layout.view_tab_indicator,null);
        //LayoutInflater的inflate(）方法用来找res/layout下的xml布局文件并且实例化
        //其中的R.layout.view_tab_indicator中需要设置你想要的分页的格式
        //比如说纯图片或者是图片+文字的格式
        ImageView imageView = (ImageView) view.findViewById(tab_iv_image);
        imageView.setImageResource(mImages[index]);
        //其中的图片资源我直接使用了selector控制其点击后切换的效果
        TextView textView = (TextView) view.findViewById(tab_tv_text);
        textView.setText(mFragmentTags[index]);
        //文字的切换效果则在R.layout.view_tab_indicator中的textView同样设置了selector
        return view;
    }
}

七、view_tab_indicator.xml

该文件用来定义单个tab的格式，我在这里采用的时图片+文字的形式

<?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="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_iv_image"
        android:padding="12dp"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:contentDescription="@null"
        android:layout_gravity="center"
        tools:src="@drawable/home"/>

    <TextView
        android:id="@+id/tab_tv_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@drawable/color_selector"
        />
    <!--注意这里的颜色我使用了selector-->
</LinearLayout>

八、color_selector.xml

该文件用来控制选中tab时的文字颜色更换

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:color="#0055bb"/>
    <item android:state_selected="true"
        android:color="#0055bb"/>
    <item android:color="#000000"/>
</selector>

九、home_selector.xml

该文件用来控制选中tab时的图片更换

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
        android:drawable="@drawable/home_selected"/>
    <item
        android:drawable="@drawable/home"/>
</selector>

十、预计后续

①使用ViewPager实现滑动更改界面的功能

②提高效率：据很多博客说此种方法重复加载了fragment效率低

（有什么不会的可以留言嘻嘻，哪里不对混乱的也欢迎指出）

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