Android实现主页底部菜单中间tab图案凸起 Android实现主页底部菜单中间

文章图片
效果图因为原来的代码底部导航栏使用的是：LinearLayout + ImageView + TextView 组合，所以：在这里用到了一个及其重要的属性： 【Android实现主页底部菜单中间tab图案凸起】android:clipChildren=”false”。（放在其父布局使其生效，达到想要的效果）意为是否允许子View超出父View的范围，Boolean型true 、false ，默认true不允许；
下面整个xml文件：

activity里的tab切换和平时是一样的：private ArrayList fragments; private FragmentTabAdapter tabAdapter; onCreate方法里：fragments = new ArrayList<>(); fragments.add(TabOneFragment.newInstance()); fragments.add(TabTwoFragment.newInstance()); fragments.add(TabThreeFragment.newInstance()); fragments.add(TabFourFragment.newInstance()); fragments.add(TabFiveFragment.newInstance()); tabAdapter = new FragmentTabAdapter(this, fragments, R.id.fl_layout); /** *底部导航栏的点击事件 * @param view */ @OnClick({R.id.ll_tab_one,R.id.ll_tab_two,R.id.ll_tab_three,R.id.ll_tab_four,R.id.ll_tab_five}) public void onClicked(View view) { switch (view.getId()){ case R.id.ll_tab_one: tabAdapter.setCurrentFragment(0); break; case R.id.ll_tab_two: tabAdapter.setCurrentFragment(1); break; case R.id.ll_tab_three: tabAdapter.setCurrentFragment(2); break; case R.id.ll_tab_four: tabAdapter.setCurrentFragment(3); break; case R.id.ll_tab_five: tabAdapter.setCurrentFragment(4); break; } } protected void initListener() { tabAdapter.setOnTabChangeListener(new FragmentTabAdapter.OnTabChangeListener() { @Override public void OnTabChanged(int index) { tvTabOne.setTextColor(getResources().getColor(R.color.col_gray)); tvTabTwo.setTextColor(getResources().getColor(R.color.col_gray)); tvTabThree.setTextColor(getResources().getColor(R.color.col_gray)); tvTabFour.setTextColor(getResources().getColor(R.color.col_gray)); tvTabFive.setTextColor(getResources().getColor(R.color.col_gray)); ivTabOne.setImageResource(R.mipmap.ic_tab_home_normal); ivTabTwo.setImageResource(R.mipmap.ic_tab_friend_normal); ivTabThree.setImageResource(R.mipmap.ic_tab_search_normal); ivTabFour.setImageResource(R.mipmap.ic_tab_rank_normal); ivTabFive.setImageResource(R.mipmap.ic_tab_person_normal); switch (index){ case 0: tvTabOne.setTextColor(getResources().getColor(R.color.colorPrimary)); ivTabOne.setImageResource(R.mipmap.ic_tab_home_selected); break; case 1: tvTabTwo.setTextColor(getResources().getColor(R.color.colorPrimary)); ivTabTwo.setImageResource(R.mipmap.ic_tab_friend_selected); break; case 2: tvTabThree.setTextColor(getResources().getColor(R.color.colorPrimary)); ivTabThree.setImageResource(R.mipmap.ic_tab_search_selected); break; case 3: tvTabFour.setTextColor(getResources().getColor(R.color.colorPrimary)); ivTabFour.setImageResource(R.mipmap.ic_tab_rank_selected); break; case 4: tvTabFive.setTextColor(getResources().getColor(R.color.colorPrimary)); ivTabFive.setImageResource(R.mipmap.ic_tab_person_selected); break; }} }); }

FragmentTabAdapter代码： public class FragmentTabAdapter { private List fragments; // tab页面对应的Fragment private FragmentActivity fragmentActivity; // Fragment所在的Activity private int fragmentContentId; // Activity中所要被替换的区域的id private int currentTab; // 当前Tab页面索引 private OnTabChangeListener onTabChangeListener; public FragmentTabAdapter(FragmentActivity fragmentActivity, List fragments, int fragmentContentId) { this.fragments = fragments; this.fragmentActivity = fragmentActivity; this.fragmentContentId = fragmentContentId; // 默认显示第一页 FragmentTransaction ft = fragmentActivity.getSupportFragmentManager() .beginTransaction(); ft.add(fragmentContentId, fragments.get(0)); try { ft.commitAllowingStateLoss(); }catch (Exception e){ e.printStackTrace(); } if (null != onTabChangeListener) onTabChangeListener.OnTabChanged(0); }/** * 切换tab * @param idx */ private void showTab(int idx) { for (int i = 0; i < fragments.size(); i++) { Fragment fragment = fragments.get(i); FragmentTransaction ft = obtainFragmentTransaction(idx); if (idx == i) { ft.show(fragment); } else { ft.hide(fragment); } ft.commitAllowingStateLoss(); } currentTab = idx; // 更新目标tab为当前tab }/** * 获取带动画的FragmentTransaction * @param index * @return */ private FragmentTransaction obtainFragmentTransaction(int index) { FragmentTransaction ft = fragmentActivity.getSupportFragmentManager() .beginTransaction(); // 设置切换动画 //if (index > currentTab) { //ft.setCustomAnimations(R.anim.slide_left_in, R.anim.slide_left_out); //} else { //ft.setCustomAnimations(R.anim.slide_right_in, //R.anim.slide_right_out); //} return ft; }public int getCurrentTab() { return currentTab; }public Fragment getCurrentFragment() { return fragments.get(currentTab); }public void setCurrentFragment(int idx) { Fragment fragment = fragments.get(idx); FragmentTransaction ft = obtainFragmentTransaction(idx); getCurrentFragment().onPause(); // 暂停当前tab // getCurrentFragment().onStop(); // 暂停当前tab if (fragment.isAdded()) { // fragment.onStart(); // 启动目标tab的onStart() fragment.onResume(); // 启动目标tab的onResume() } else { ft.add(fragmentContentId, fragment); } showTab(idx); // 显示目标tab ft.commitAllowingStateLoss(); // 如果设置了切换tab额外功能功能接口 if (null != onTabChangeListener) { onTabChangeListener.OnTabChanged(idx); } }public void setOnTabChangeListener(OnTabChangeListener onTabChangeListener) { this.onTabChangeListener = onTabChangeListener; }public interface OnTabChangeListener { public void OnTabChanged(int index); }}