仿京东商城系列1------fragmentTabHost实现底

作者: 小庄bb | 来源:发表于2017-08-21 18:08 被阅读870次

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

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

前言

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

底部状态栏实现

内容

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

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毫秒重新加载一次界面，所以当被选中时，会立即表达出反馈（本实例则表达为红色的图片）

好了，大功告成！

本项目来自菜鸟窝

网友评论

本文标题：仿京东商城系列1------fragmentTabHost实现底

本文链接：https://www.haomeiwen.com/subject/xqdhdxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！