仿京东商城系列1------fragmentTabHost实现底部导航栏

本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/

项目已经做完，源码地址。https://github.com/15829238397/CN5E-shop

仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车，管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现（Tablayout）
仿京东商城系列12------商品详细信息展示（nativie与html交互）
仿京东商城系列13------商品分享（shareSDK）
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册，SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取（地址选择器）
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章

---

前言

商城的底部导航栏相信大家都见到过，总之千言万语不如一个动态展示。来，上图。

底部状态栏实现

内容

底部导航栏的设计，总共分为几个步骤：

1.建立主页的xml布局文件，没有什么技术含量，直接上代码：

2.设计Tab组件的布局

上代码：

代码设计每个tab的图标和标题布局。

3.注意啦重点来了

 public void initTab (){
        //指定fragmentTabHost中实际的FragmentLayout。
        fragmentTabHost.setup(this , getSupportFragmentManager() , R.id.realTabContent);

        TabIndicator HomeTab = new TabIndicator(R.string.tab_home , R.drawable.tab_home_image, HomeFragment.class) ;
        TabIndicator SearchTab = new TabIndicator(R.string.tab_search , R.drawable.tab_search_image, HotFragment.class) ;
        TabIndicator ClassifyTab = new TabIndicator(R.string.tab_assort , R.drawable.tab_classify_image, AssortFragment.class) ;
        TabIndicator ShoppingBikeTab = new TabIndicator(R.string.tab_cart , R.drawable.tab_shoppingbike_image, CartFragment.class) ;
        TabIndicator MineTab = new TabIndicator(R.string.tab_mine , R.drawable.tab_user_image, MineFragment.class) ;

        tabIndicators.add(HomeTab) ;
        tabIndicators.add(SearchTab) ;
        tabIndicators.add(ClassifyTab) ;
        tabIndicators.add(ShoppingBikeTab) ;
        tabIndicators.add(MineTab) ;

        //将每一个Tab装入fragmentTabHost
        for(TabIndicator tabIndicator : tabIndicators){
            View view = LayoutInflater.from(mContext).inflate(R.layout.tab_indicator_view , null ) ;
            tabPhoto = (ImageView) view.findViewById(R.id.tab_photo);
            tabTitle = (TextView) view.findViewById(R.id.tab_title) ;

            tabPhoto.setBackgroundResource(tabIndicator.getTabPhoto());
            tabTitle.setText(tabIndicator.getTabTitle());

            //向fragmentTableHost中添加一个TabSpec
            fragmentTabHost.addTab(fragmentTabHost.newTabSpec(getString(tabIndicator.getTabTitle())).setIndicator(view) , tabIndicator.getFragment() , null );
            //执行结束
        }

    }

• 其中TabIndicator 是我们自定义的一个类型，用来存储每一个tab的图标，标题，以及绑定的Fragment类。
• 定义一个List 实例，将所有的tab的信息装入TabIndicator 实例后再添加进tabIndicators
• 最后对tabIndicators进行遍历，逐个取出tabIndicator ，对view进行数据填充，最后调用 fragmentTabHost.addTab(fragmentTabHost.newTabSpec(getString(tabIndicator.getTabTitle())).setIndicator(view) , tabIndicator.getFragment() , null ); 添加TabSpec进入fragmentTabHost，完成效果。

4.现在已经实现底部菜单栏了，可是当点击时，fragment虽然会切换，但是被点击的地方却纹丝不动，所以我们需要一种方式来表达反馈。这就用到了自定义Drawable。

代码如下：

代码表达了当控件被点击时，反馈出不同的颜色，android每0.6毫秒重新加载一次界面，所以当被选中时，会立即表达出反馈（本实例则表达为红色的图片）

好了，大功告成！

---

本项目来自菜鸟窝