本项目来自菜鸟窝，有兴趣者点击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布局文件，没有什么技术含量，直接上代码：
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="@+id/realTabContent"
android:layout_weight="1"
></FrameLayout>
<android.support.v4.app.FragmentTabHost
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:id="@+id/tabHost">
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"
android:id="@android:id/tabcontent"></FrameLayout>
</android.support.v4.app.FragmentTabHost>
2.设计Tab组件的布局
上代码：
<ImageView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tab_photo"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab_title"
android:textColor="@color/black"
android:gravity="center"
/>
代码设计每个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<TabIndicator > 实例，将所有的tab的信息装入TabIndicator 实例后再添加进tabIndicators
- 最后对tabIndicators进行遍历，逐个取出tabIndicator ，对view进行数据填充，最后调用 fragmentTabHost.addTab(fragmentTabHost.newTabSpec(getString(tabIndicator.getTabTitle())).setIndicator(view) , tabIndicator.getFragment() , null ); 添加TabSpec进入fragmentTabHost，完成效果。
4.现在已经实现底部菜单栏了，可是当点击时，fragment虽然会切换，但是被点击的地方却纹丝不动，所以我们需要一种方式来表达反馈。这就用到了自定义Drawable。
代码如下：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@mipmap/icon_discover_press"/>
<item android:state_focused="true" android:drawable="@mipmap/icon_discover_press"/>
<item android:state_selected="false" android:drawable="@mipmap/icon_discover"/>
<item android:state_focused="false" android:drawable="@mipmap/icon_discover"/>
</selector>
代码表达了当控件被点击时，反馈出不同的颜色，android每0.6毫秒重新加载一次界面，所以当被选中时，会立即表达出反馈（本实例则表达为红色的图片）
好了，大功告成！
本项目来自菜鸟窝
