用FragmentTabHost 实现底部菜单

FagmentTabHost 类似于 TabHost，但TabHost是为Activity服务的，过于重量级，已经被淘汰；而FragmentTabHost则是为 Fragment 专门服务的。

使用：

①将FragmentTabHost.java文件放在项目中

②布局文件activity_main.xml

<FrameLayout
    android:id="@+id/realtabcontent"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:background="@color/bg_color"
    />


<com.example.administrator.shopdemo.widget.FragmentTabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    >

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="0" />
</com.example.administrator.shopdemo.widget.FragmentTabHost>

③MainActivity继承FragmentActivity，因为AppCompatActivity继承了FragmentActivity，所以可直接继承AppCompatActivity。

public class MainActivity extends AppCompatActivity {

    private FragmentTabHost mTabHost;

    private LayoutInflater mInflater;

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

        mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
        mInflater = LayoutInflater.from(this);
        //setup方法
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
        //init TabSpec
        initTab();
    }
    private void initTab(){
        Tab tab_home = new Tab(HomeFragment.class,R.string.home,R.drawable.selector_icon_home);
        Tab tab_hot = new Tab(HotFragment.class,R.string.hot,R.drawable.selector_icon_hot);
        Tab tab_category = new Tab(CategoryFragment.class,R.string.catagory,R.drawable.selector_icon_category);
        Tab tab_cart = new Tab(CartFragment.class,R.string.cart,R.drawable.selector_icon_cart);
        Tab tab_mine = new Tab(MineFragment.class,R.string.mine,R.drawable.selector_icon_mine);


        TabHost.TabSpec tabSpec1 = mTabHost.newTabSpec(getString(tab_home.getTitle()));
        tabSpec1.setIndicator(buildIndicator(tab_home));
        mTabHost.addTab(tabSpec1,tab_home.getFragment(),null);

        TabHost.TabSpec tabSpec2 = mTabHost.newTabSpec(getString(tab_hot.getTitle()));
        tabSpec2.setIndicator(buildIndicator(tab_hot));
        mTabHost.addTab(tabSpec2,tab_hot.getFragment(),null);

        TabHost.TabSpec tabSpec3 = mTabHost.newTabSpec(getString(tab_category.getTitle()));
        tabSpec3.setIndicator(buildIndicator(tab_category));
        mTabHost.addTab(tabSpec3,tab_category.getFragment(),null);

        TabHost.TabSpec tabSpec4 = mTabHost.newTabSpec(getString(tab_cart.getTitle()));
        tabSpec4.setIndicator(buildIndicator(tab_cart));
        mTabHost.addTab(tabSpec4,tab_cart.getFragment(),null);

        TabHost.TabSpec tabSpec5 = mTabHost.newTabSpec(getString(tab_mine.getTitle()));
        tabSpec5.setIndicator(buildIndicator(tab_mine));
        mTabHost.addTab(tabSpec5,tab_mine.getFragment(),null);


        mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
        mTabHost.setCurrentTab(0);
    }

    private View buildIndicator(Tab tab){

        View view =mInflater.inflate(R.layout.tab_indicator,null);
        ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
        TextView text = (TextView) view.findViewById(R.id.txt_indicator);

        img.setBackgroundResource(tab.getIcon());
        text.setText(tab.getTitle());

        return  view;
    }

}

④首先找到FragmentActivity：

mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);

⑤然后调用FragmentActivity的setUp方法，将FragmentTabHost上面的FrameLayout布局id传入：

mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

⑥新建一个bean类Tab，用来封装每个Tab所需的参数

public class Tab {

    private  int title;
    private  int icon;
    private Class fragment;
。。。
}

 

⑦初始化Tab

首先，实例化一个Tab bean，将所需的参数传入

然后为此Tab设置TabSpec，，

TabHost.TabSpec tabSpec1 = mTabHost.newTabSpec(getString(tab_home.getTitle()));

和Indicator来设置它的布局
tabSpec1.setIndicator(buildIndicator(tab_home));

最后将Tab 传入 TabHost 中
mTabHost.addTab(tabSpec1,tab_home.getFragment(),null);

⑧如何为TabSpec设置布局？

->首先，写一个布局tab_indicator.xml

<ImageView
    android:id="@+id/icon_tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

<TextView
    android:id="@+id/txt_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/selector_tab_text"
    android:layout_marginTop="2dp" />

 

->为布局设置选择器 selector ，在当前控件处于不同状态时，分别改变背景图片

->在代码中，将Tab的布局文件填充，分别设置后，传入到TabSpec的Indicator中

private View buildIndicator(Tab tab){
    View view =mInflater.inflate(R.layout.tab_indicator,null);
    ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
    TextView text = (TextView) view.findViewById(R.id.txt_indicator);
    img.setBackgroundResource(tab.getIcon());
    text.setText(tab.getTitle());
    return  view;
}

 

到目前为止，APP的底部菜单就已经实现了。