仿京东商城系列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毫秒重新加载一次界面,所以当被选中时,会立即表达出反馈(本实例则表达为红色的图片)

好了,大功告成!


本项目来自菜鸟窝

你可能感兴趣的:(仿京东商城系列1------fragmentTabHost实现底部导航栏)