【说明】
1、主界面上添加父容器：FragmentTabHost
属于v4兼容包
需要指定该id为android:id/tabhost,不能修改，表示由android系统来托管这个id。
本身是一个FrameLayout的子类
2、显示内容区域
作为每选一个导航按钮，将显示导航对应的内容。这个内容区域需要使用一个容器来表示。
必须设定这个容器的id为android:id/tabcontent
3、导航区域
需要指定导航元素——TabWidget
【注意】
1、指定id时为android:id/tabhost，绑定时使用android.R.id.tabhost.
2、每一个Tab对应的Fragment的会填充到tabcontext上
【效果】
【项目结构】
【步骤】
①修改activity_main.xml
②创建main_tab_item.xml底部导航的单个布局
1 29 10 19 27 28
?创建四个Fragment的，并在是个页面设置不同的标识
④放入四张相应图片待使用 （）
?MainActivity.class（核心代码）
1 public class MainActivity extends AppCompatActivity { 2 3 4 @BindView(android.R.id.tabs) 5 TabWidget tabs; 6 @BindView(android.R.id.tabhost) 7 FragmentTabHost tabhost; 8 9 int[] ivTabs;10 String[] tvTabs;11 12 @Override13 protected void onCreate(Bundle savedInstanceState) {14 super.onCreate(savedInstanceState);15 setContentView(R.layout.activity_main);16 ButterKnife.bind(this);17 18 List fragmentList = new ArrayList<>();19 fragmentList.add(ChatFragment.class);20 fragmentList.add(ContactFragment.class);21 fragmentList.add(FindFragment.class);22 fragmentList.add(MeFragment.class);23 tabhost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);24 25 ivTabs = new int[]{R.drawable.chat,R.drawable.contact,R.drawable.find,R.drawable.me};26 tvTabs = new String[]{"聊天","通讯录","发现","我的"};27 28 for (int i = 0; i < 4; i++) {29 TabHost.TabSpec tabSpec = tabhost.newTabSpec(i + "").setIndicator(getIndicatorView(i));30 tabhost.addTab(tabSpec,fragmentList.get(i),null);31 }32 33 tabhost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {34 @Override35 public void onTabChanged(String s) {36 TabChange(s);37 }38 });39 40 }41 42 //Tab选择事件，将选中的Tab布局图标显示为绿色43 private void TabChange(String s) {44 int tabIndex = tabhost.getCurrentTab();45 for (int i = 0; i < 4; i++) {46 View view = tabhost.getTabWidget().getChildAt(i);47 ImageView ivTab=view.findViewById(R.id.ivTab);48 TextView tvTab=view.findViewById(R.id.tvTab);49 if (i==tabIndex){50 ivTab.setColorFilter(Color.GREEN);51 tvTab.setTextColor(Color.GREEN);52 }else {53 ivTab.setColorFilter(Color.WHITE);54 tvTab.setTextColor(Color.WHITE);55 }56 57 }58 59 }60 61 //获取当前Tab的布局62 private View getIndicatorView(int i) {63 64 View view = LayoutInflater.from(this).inflate(R.layout.main_tab_item, null, false);65 ImageView ivTab=view.findViewById(R.id.ivTab);66 TextView tvTab=view.findViewById(R.id.tvTab);67 68 ivTab.setImageResource(ivTabs[i]);69 tvTab.setText(tvTabs[i]);70 if (i==0){71 ivTab.setColorFilter(Color.GREEN);72 tvTab.setTextColor(Color.GREEN);73 }74 return view;75 }76 77 }