实现底部导航栏

许多的App都使用底部导航栏来实现导航功能,我们可以使用RadioGroup+RadioButton的形式或者直接Button数组的方式实现,而谷歌官方提供了FragmentTabHost来方便快捷实现底部导航栏。

android.support.v4.app.FragmentTabHost

主要代码:

fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.layout_content);

for (int i = 0; i < TAB_NUM; i++){
    TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(mTitles[i]);
    tabSpec.setIndicator(getTabView(i));
    fragmentTabHost.addTab(tabSpec, mFragments[i], null);
}

布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_fragment_tab_host"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.cheng.collection.ui.FragmentTabHostActivity">

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

    </FrameLayout>

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

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

实现代码:

public class FragmentTabHostActivity extends AppCompatActivity {

    private static final int TAB_NUM = 4;

    private Class[] mFragments = new Class[]{//tab对应的Fragment
            AFragment.class,
            BFragment.class,
            CFragment.class,
            DFragment.class
    };

    private int[] mTabDrawables = new int[]{//tab图片
            R.drawable.tab_work,
            R.drawable.tab_im,
            R.drawable.tab_ebook,
            R.drawable.tab_me,
    };

    private String[] mTitles = new String[]{//tab标题文字
            "工作",
            "微信",
            "通信录",
            "我的"
    };

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

        FragmentTabHost fragmentTabHost = (FragmentTabHost) findViewById(R.id.tabhost);
        fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.layout_content);

        for (int i = 0; i < TAB_NUM; i++){
            TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(mTitles[i]);
            tabSpec.setIndicator(getTabView(i));
            fragmentTabHost.addTab(tabSpec, mFragments[i], null);
        }
    }

    private View getTabView(int index) {
        View view = View.inflate(this, R.layout.tab_indicator, null);
        ImageView iv = (ImageView) view.findViewById(R.id.maintab_iv);
        TextView tv = (TextView) view.findViewById(R.id.maintab_tv);

        iv.setImageDrawable(getDrawable(mTabDrawables[index]));
        tv.setText(mTitles[index]);

        return view;
    }
}

备注:

这个实现方式有一个弊端,就是每次切换tab都会重新加载Fragment。实际项目过程种可能并不需要,而是需要在切换过程中保留Fragment状态。

原因:

FragmentTabHost在切换tab的时候使用detach和attach的方法来显示/隐藏Fragment。

解决方法:

修改FragmentTabHost的源代码将doTabChanged方法中的

ft.detach(mLastTab.fragment); 改成  ft.hide(mLastTab.fragment);

ft.attach(newTab.fragment); 改成 ft.show(newTab.fragment);

时间: 2024-10-14 19:39:39

实现底部导航栏的相关文章

Android实习札记(5)---Fragment之底部导航栏的实现

Android实习札记(5)---Fragment之底部导航栏的实现 --转载请注明出处:coder-pig 在Part 4我们回顾了一下Fragment的基本概念,在本节中我们就来学习Fragment应用的简单例子吧! 就是使用Fragment来实现简单的底部导航栏,先贴下效果图: 看上去很简单,实现起来也是很简单的哈!那么接着下来就看下实现的流程图吧: 实现流程图: 看完流程图是不是有大概的思路了,那么接着就开始代码的编写吧: 代码实现: ①先写布局,布局的话很简单,一个FrameLayou

移动端底部导航栏固定——兼容IOS

问题:移动端前端底部导航栏设计 兼容安卓下的各种浏览器和IOS自带的Safari,但是不兼容苹果下的 钉钉. 具体代码格式: <body> <!-- 头部导航栏 --> <div class="header">内容</div> <!-- 内容 --> <div class="content">内容</div> <!-- 底部导航栏 --> <div class=&q

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造

Android Fragment解析及UI底部导航栏实例

import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.view.View; import android.view.View.OnClickListener; import and

Android应用底部导航栏(选项卡)实例

现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: [1]  res/layout目录下的 maintabs.xml 源码: <?xml version="1.0

FragmentTabHost+FrameLayout实现底部导航栏

app经常用到底部导航栏,早前使用过RadioGroup+FrameLayout实现或者RadioGroup+ViewPager实现,现在基本使用FragmentTabHost+FrameLayout来实现,因为使用起来简单易用.下面写一个小例子简要地总结一下这个组合. 首先,看一下例子的最终运行效果图 -> 这5个图标的效果其实都是一样的,只要做出来一个,以此类推就可以写出其他几个 第一步, FragmentTabHost+FrameLayout布局,先看一下代码: <?xml versio

Android底部导航栏

Android UI-仿微信底部导航栏布局 Android基础入门教程——5.2.1 Fragment实例精讲——底部导航栏的实现(方法1)

TabHost实现底部导航栏

源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/tabnavigation.zip          现在很多Android应用界面都采用底部导航栏的设计方式,这样可以使用户灵活的切换不同的页面.采用TabHost控件很容易实现一个底部导航栏的功能,下面以模仿鲁大师客户端底部导航栏为例小试牛刀 1.设计主界面,布局文件tab_ludashi.xml如下: <?xml version="1.0" encoding="u

【AmazeUI】底部导航栏与分享按钮

手机端页面的底部导航栏,仿照安卓.IOS等Apps应用底部导航栏的设计.许许多多的移动端页面前端框架都有这个组件.AmazeUI也不例外.还提供了分享到站外的分享按钮,组件,完全不用自己写.直接提供国内主流网站的分享,没有那些传说中的facebook之流,完全不用自己改,其效果如下: 其代码如下: <!--使用HTML5开发--> <!doctype html> <html class="no-js"> <html> <head&g