Android UI-实现底部切换标签之方式三 ──Activity（底部采用FragmentTabHost）添加5个子Fragment

最新推荐文章于 2025-03-30 19:25:44 发布

JK2514091675

最新推荐文章于 2025-03-30 19:25:44 发布

阅读量971

点赞数

分类专栏： DrawerLayout 底部切换标签文章标签：底部切换标签

本文链接：https://blog.youkuaiyun.com/K2514091675/article/details/69054537

版权

DrawerLayout 底部切换标签专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何使用FragmentTabHost实现底部导航栏，并通过枚举和循环提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初步使用FragmentTabHost

步骤一:书写好布局文件

<?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"
    tools:context="com.jhy.myapplication.MainActivity">

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

    </FrameLayout>

    <RelativeLayout android:layout_width="match_parent"
                    android:layout_height="wrap_content">

        <android.support.v4.app.FragmentTabHost
            android:id="@+id/tabhost"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/ic_launcher"/>
    </RelativeLayout>


</LinearLayout>

步骤二:将内容View与FragmentTabHost进行绑定, 在MainActivity文件准备好要传递到另一个界面的数据,此处会自动进行平分左右的内容

	//将内容View与FragTabHost进行绑定
        tabhost.setup(this, getSupportFragmentManager(), R.id.fl_content);

        TabHost.TabSpec tabSpec1 = tabhost.newTabSpec("tag1");
        //定义在底部标签显示的文字
        tabSpec1.setIndicator("label1");
        Bundle args1 = new Bundle();
        //要传递到过去的数据
        args1.putString("args", "我是lable1页面");
        tabhost.addTab(tabSpec1, DefalutFragment.class, args1);


        TabHost.TabSpec tabSpec2 = tabhost.newTabSpec("tag2");
        tabSpec2.setIndicator("label2");
        Bundle args2 = new Bundle();
        args2.putString("args", "我是lable2页面");
        tabhost.addTab(tabSpec2, DefalutFragment.class, args2);

步骤三:定义另外一个Fragment接收MainActivity传递过来的数据并显示

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle arguments = getArguments();
        args = arguments.getString("args");

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView tv=new TextView(getContext());
        tv.setGravity(Gravity.CENTER);
        tv.setText(this.getClass().getSimpleName()+""+args);
        return tv;
    }

好了,经过以上步骤就可以实现以上效果了

不过在实际应用当中,底部的FragmentTabHost不只是两个简单的标签,更多的是以图标加文字的形式进行展示

所以要在刚才的基础上进行进一步的美化

美化之后的效果是这样滴

要实现上述美化的功能,将上述步骤二的代码替换如下:

//        将内容View与FragTabHost进行绑定
        tabhost.setup(this,getSupportFragmentManager(),R.id.fl_content);

        TabHost.TabSpec tabSpec1=tabhost.newTabSpec("tag1");
        indicatorView = View.inflate(this, R.layout.inflate, null);
        //找孩子
        tabTitle = (TextView)indicatorView.findViewById(R.id.tab_title);
        tabMes = (TextView)indicatorView.findViewById(R.id.tab_mes);
        tabTitle.setText("首页");
        //设置左上右下
        tabTitle.setCompoundDrawablesWithIntrinsicBounds(0,R.mipmap.ic_launcher,0,0);
        tabSpec1.setIndicator(indicatorView);
        Bundle args1=new Bundle();
        args1.putString("args","我是lable1页面");
        tabhost.addTab(tabSpec1,DefalutFragment.class,args1);




        TabHost.TabSpec tabSpec2=tabhost.newTabSpec("tag2");
        indicatorView2 = View.inflate(this, R.layout.inflate, null);
        //找孩子
        tabTitle2 = (TextView)indicatorView2.findViewById(R.id.tab_title);
        tabMes2 = (TextView)indicatorView2.findViewById(R.id.tab_mes);
        tabTitle2.setText("新闻");
        //设置左上右下
        tabTitle2.setCompoundDrawablesWithIntrinsicBounds(0,R.mipmap.ic_launcher,0,0);
        tabSpec2.setIndicator(indicatorView2);
        Bundle args2=new Bundle();
        args2.putString("args","我是lable2页面");
        tabhost.addTab(tabSpec2,DefalutFragment.class,args2);

添加一个布局文件:

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

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"

        android:drawableTop="@mipmap/ic_launcher"
        android:gravity="center"
        android:text="资讯"
        android:textSize="12sp"/>

    <TextView
        android:id="@+id/tab_mes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@id/tab_title"
        android:layout_alignTop="@id/tab_title"
        android:textColor="#f00"
        android:layout_marginLeft="1dip"/>

</RelativeLayout>

这样就能实现上述的美化功能了!!!

如果底部有很多个按钮,一一复制上述代码太麻烦所以提供3种方式添加

枚举形式添加底部数据

先来看看效果图吧

步骤一:定义枚举类型数据

 enum  MAINTAB{
        NEW("首页",R.mipmap.ic_launcher,DefalutFragment.class),
        TWEET("新闻",R.mipmap.ic_launcher,DefalutFragment.class),
        QUICKOPTION("",R.mipmap.ic_launcher,DefalutFragment.class),
        EXPLORE("发现",R.mipmap.ic_launcher,DefalutFragment.class),
        ME("我的",R.mipmap.ic_launcher,DefalutFragment.class);
        public String title;
        public int topResId;
        public Class clz;

        MAINTAB(String title, int topResId, Class clz) {
            this.title = title;
            this.topResId = topResId;
            this.clz = clz;
        }
    }

步骤二:for循环添加数据完整代码如下:

/**
 * FragmentTabHos继承-->TabHost-->FrameLayout
 */
public class MainActivity extends AppCompatActivity {

    @Bind(R.id.fl_content)
    FrameLayout flContent;
    @Bind(R.id.tabhost)
    FragmentTabHost tabhost;
    @Bind(R.id.iv)
    ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        initTabHost();
    }

        private void initTabHost() {
            //将内容View与FragTabHost进行绑定
            //参数一:Context  参数二:FragmentManager   参数三:FragTabHost对应的内容容器id
            tabhost.setup(this, getSupportFragmentManager(), R.id.fl_content);
            //枚举:某一种东西,只有几种可能性

         /*---------------------循环形式添加Indicatorview(数据集采用枚举)---------------------------*/
            //去掉FrgmentTabHost中的分割线
            if (Build.VERSION.SDK_INT > 10) {
                tabhost.getTabWidget().setShowDividers(0);
            }
            for (int i = 0; i < MAINTAB.values().length; i++) {
                MAINTAB maintab = MAINTAB.values()[i];
                String title = maintab.title;
                int topResId = maintab.topResId;
                Class clz = maintab.clz;
                //添加tab标签页
                TabHost.TabSpec tabSpec = tabhost.newTabSpec(title);
                View indicatorView = View.inflate(this, R.layout.inflate, null);
                //找孩子
                TextView tabaTitle = (TextView) indicatorView.findViewById(R.id.tab_title);
                //赋值
                tabaTitle.setText(title);
                //位置为左上右下
                tabaTitle.setCompoundDrawablesWithIntrinsicBounds(0, topResId, 0, 0);
                tabSpec.setIndicator(indicatorView);

                Bundle args1 = new Bundle();
                args1.putString("args", "我是参数" + i);
                tabhost.addTab(tabSpec, clz, args1);
                if (i == 2) {
                    indicatorView.setVisibility(View.INVISIBLE);
                }
            }
        }

    @OnClick(R.id.iv)
    public void onClick() {
        Toast.makeText(this, "我是中间按钮", Toast.LENGTH_SHORT).show();
    }

    enum MAINTAB {
        NEW("首页", R.mipmap.ic_launcher, DefalutFragment.class),
        TWEET("新闻", R.mipmap.ic_launcher, DefalutFragment.class),
        QUICKOPTION("", R.mipmap.ic_launcher, DefalutFragment.class),
        EXPLORE("发现", R.mipmap.ic_launcher, DefalutFragment.class),
        ME("我的", R.mipmap.ic_launcher, DefalutFragment.class);
        public String title;
        public int topResId;
        public Class clz;

        MAINTAB(String title, int topResId, Class clz) {
            this.title = title;
            this.topResId = topResId;
            this.clz = clz;
        }
    }
}

完成!!!

Demo下载源码地址:http://download.youkuaiyun.com/detail/k2514091675/9803221