利用FragmentTabHost完成底部菜单

来源:互联网 发布:港澳台电视直播软件下载 编辑:程序博客网 时间:2024/05/17 08:30

这里写图片描述

  • 利用FragmentTabHost完成底部菜单
    • activity_mainxml
    • tab_indicatorxml每个tab对应的布局视图
    • 4个fragment
      • CartFragmentclass
      • HomeFragmentclass
      • MineFragmentclass
      • TataFragmentclass
    • TabItemclass
    • 初始化tab数据
    • 初始化tabHost

利用FragmentTabHost完成底部菜单

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><!--注意id是系统内部的tabhost--><android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@android:color/white">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <!--注意id是系统内部的tabcontent-->        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="match_parent"            android:layout_height="0dp"            android:layout_weight="1"            android:background="@color/tabbar_content_bg" />        <View            android:layout_width="match_parent"            android:layout_height="@dimen/margin_1_dp"            android:background="@color/tabbar_line_color" />        <!--注意id是系统内部的tabs-->        <TabWidget            android:id="@android:id/tabs"            android:layout_width="match_parent"            android:layout_height="@dimen/tabbar_height"            android:layout_gravity="bottom" />    </LinearLayout></android.support.v4.app.FragmentTabHost>

tab_indicator.xml(每个tab对应的布局视图)

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:orientation="vertical"    android:gravity="center"    android:background="@android:color/white">    <ImageView        android:id="@+id/iv_tab"        android:layout_width="24dp"        android:layout_height="24dp"        android:contentDescription="@null"        android:src="@mipmap/apk_bottom_ic_first"/>    <TextView        android:id="@+id/tv_tab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/tabbar_home_text"        android:textColor="@color/tabbar_text_normal_color"        android:layout_marginTop="@dimen/margin_2_dp"        android:textSize="10sp"/></LinearLayout>

4个fragment

fragment中大家可能会发现没onCreare()、onCreateView()这些方法,是因为我是基于自己定义的BaseFragment,省去了大部分的写法,大家可以不用太在意

CartFragment.class

package com.tc.mobileshop.project.cart.view;import android.view.View;import com.tc.mobileshop.R;import com.tc.mobileshop.mvp.presenter.MvpPresenter;import com.tc.mobileshop.mvp.view.MvpView;import com.tc.mobileshop.project.base.view.BaseFrament;/** * 购物车 * Created by 辉神 on 2016/8/8. */public class CartFragment extends BaseFrament {    @Override    protected void initContentView(View contentView) {    }    @Override    public int bindeLayoutId() {        return R.layout.fragment_cart;    }}

HomeFragment.class

package com.tc.mobileshop.project.home.view;import android.view.View;import com.tc.mobileshop.R;import com.tc.mobileshop.project.base.view.BaseFrament;/** * 主页 * Created by 辉神 on 2016/8/8. */public class HomeFragment extends BaseFrament {    @Override    protected void initContentView(View contentView) {    }    @Override    public int bindeLayoutId() {        return R.layout.fragment_home;    }}

MineFragment.class

package com.tc.mobileshop.project.mine.view;import android.view.View;import com.tc.mobileshop.R;import com.tc.mobileshop.project.base.view.BaseFrament;/** * 我的 * Created by 辉神 on 2016/8/8. */public class MineFragment extends BaseFrament {    @Override    protected void initContentView(View contentView) {    }    @Override    public int bindeLayoutId() {        return R.layout.fragment_mine;    }}

TataFragment.class

package com.tc.mobileshop.project.tata.view;import android.view.View;import com.tc.mobileshop.R;import com.tc.mobileshop.project.base.view.BaseFrament;/** * 她她圈 * Created by 辉神 on 2016/8/8. */public class TataFragment extends BaseFrament {    @Override    protected void initContentView(View contentView) {    }    @Override    public int bindeLayoutId() {        return R.layout.fragment_tata;    }}

TabItem.class

    /**     * tab数据     */    private class TabItem {        //正常的tab图片        private int tabImageNomalRes;        //tab被点击时的图片        private int tabImagePressRes;        //tab标题        private int tabtextRes;        //当前tab所属的fragment        private Class<? extends Fragment> fragmentClass;        //当前tab的视图        private View view;        //当前tab的文字标题        private TextView tabTitle;        //当前tab的图标        private ImageView tabImage;        public TabItem(                int tabImageNomalRes,                int tabImagePressRes,                int tabtext,                Class<? extends Fragment> fragmentClass) {            this.tabImageNomalRes = tabImageNomalRes;            this.tabImagePressRes = tabImagePressRes;            this.tabtextRes = tabtext;            this.fragmentClass = fragmentClass;        }        /***         * 返回tab标题         *         * @return         */        private String getTitleStr() {            return (String) getResources().getText(tabtextRes);        }        /**         * 初始化tab中的View,并返回View         * @return         */        public View getIndicator() {            if (view == null) {                view = getLayoutInflater().inflate(R.layout.tab_indicator, null);                tabTitle = (TextView) view.findViewById(R.id.tv_tab);                tabImage = (ImageView) view.findViewById(R.id.iv_tab);                tabImage.setImageResource(tabImageNomalRes);//默认正常图片                tabTitle.setText(getTitleStr());            }            return view;        }        /**         * 通过判断是否选中,来变更图片         *         * @param checked         */        private void setChecked(boolean checked) {            if (checked) {                tabTitle.setTextColor(getResources().getColor(R.color.tabbar_text_press_color));                tabImage.setImageResource(tabImagePressRes);            } else {                tabTitle.setTextColor(getResources().getColor(R.color.tabbar_text_normal_color));                tabImage.setImageResource(tabImageNomalRes);            }        }    }

初始化tab数据

    /**     * 初始化tab数据     */    private void initTabItemData() {        tabItems = new ArrayList<>();        tabItems.add(                new TabItem(R.mipmap.apk_bottom_ic_first, R.mipmap.apk_bottom_ic_first_up, R.string.tabbar_home_text, HomeFragment.class));        tabItems.add(                new TabItem(R.mipmap.apk_bottom_ic_tata, R.mipmap.apk_bottom_ic_tata_up, R.string.tabbar_tata_text, TataFragment.class));        tabItems.add(                new TabItem(R.mipmap.apk_bottom_ic_buy, R.mipmap.apk_bottom_ic_buy_up, R.string.tabbar_cart_text, CartFragment.class));        tabItems.add(                new TabItem(R.mipmap.apk_bottom_ic_mine, R.mipmap.apk_bottom_ic_mine_up, R.string.tabbar_mine_text, MineFragment.class));    }

初始化tabHost

    /**     * 初始化tabHost     */    private void initTabHost() {        fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);        fragmentTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);        //去掉tab的分隔线        fragmentTabHost.getTabWidget().setDividerDrawable(null);        for (int i = 0; i < tabItems.size(); i++) {            TabItem tabitem = tabItems.get(i);            //创建一个Tab            TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(tabitem.getTitleStr()).setIndicator(tabitem.getIndicator());            //将tab添加到tabHost中            fragmentTabHost.addTab(tabSpec, tabitem.fragmentClass, null);            //指定Tab的北景            fragmentTabHost.getTabWidget().setBackgroundColor(Color.WHITE);            //设置tab改变的监听            fragmentTabHost.setOnTabChangedListener(this);            //首页是默认选中,所以应该设置首页为选中的图片            if (i == 0) {                tabitem.setChecked(true);            }        }    }    /**     * 监听改变,用于点击时改变图标     * @param tabId     */    @Override    public void onTabChanged(String tabId) {        for (int i = 0; i < tabItems.size(); i++) {            TabItem tabItem = tabItems.get(i);            if (tabId.equals(tabItem.getTitleStr())) {                tabItem.setChecked(true);            } else {                tabItem.setChecked(false);            }        }    }
0 0