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

效果图

因为原来的代码底部导航栏使用的是：LinearLayout + ImageView + TextView 组合，所以：在这里用到了一个及其重要的属性：

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);
    }

}