底部导航栏中间突出范例

首先先看一下实现的简单布局：

实现这个布局的核心是要在根布局添加该属性

android:clipChildren="false"

这个属性的意思是是否限制子布局在其范围内，默认是true，表示限制

1.xml代码：这里放了五个LinearLayout配合上面的容器进行切换

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    xmlns:tools="http://schemas.android.com/tools">

    <RelativeLayout
        android:id="@+id/rl_vote_container"
        android:layout_marginBottom="50dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </RelativeLayout>

    <LinearLayout
        android:clipChildren="false"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/ll_vote_whole"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/iv_vote_whole"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:src="@mipmap/ic_launcher"
                android:layout_gravity="center_horizontal"
                />
            <TextView
                android:id="@+id/tv_vote_whole"
                android:text="全部"
                android:layout_gravity="center_horizontal"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_height="0dp" />
        </LinearLayout>


        <LinearLayout
            android:id="@+id/ll_vote_sponsor"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/iv_vote_sponsor"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:src="@mipmap/ic_launcher"
                android:layout_gravity="center_horizontal"
                />
            <TextView
                android:id="@+id/tv_vote_sponsor"
                android:text="发起的"
                android:layout_gravity="center_horizontal"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_height="0dp" />
        </LinearLayout>


        <LinearLayout
            android:id="@+id/ll_vote_add"
            android:scaleType="centerCrop"
            android:layout_gravity="bottom"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="75dp">
            <ImageView
                android:id="@+id/iv_vote_add"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:src="@mipmap/ic_launcher"
                android:layout_gravity="center_horizontal"
                />
            <TextView
                android:id="@+id/tv_vote_add"
                android:text="新增"
                android:layout_gravity="center_horizontal"
                android:gravity="bottom"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_height="0dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_vote_participant"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/iv_vote_participant"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:src="@mipmap/ic_launcher"
                android:layout_gravity="center_horizontal"
                />
            <TextView
                android:id="@+id/tv_vote_participant"
                android:text="参与的"
                android:layout_gravity="center_horizontal"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_height="0dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_vote_draft"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/iv_vote_draft"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:src="@mipmap/ic_launcher"
                android:layout_gravity="center_horizontal"
                />
            <TextView
                android:id="@+id/tv_vote_draft"
                android:text="草稿"
                android:layout_gravity="center_horizontal"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_height="0dp" />
        </LinearLayout>

    </LinearLayout>
</RelativeLayout>

2.java代码：这里就贴出展现Fragment操作的代码吧：

 private void showFragment(int index){
        FragmentTransaction transaction = mFragmentManager.beginTransaction();
        setTextViewDefaultColor();
        switch (index){
            case 0:
                mWholeText.setTextColor(getResources().getColor(R.color.colorAccent));
                mWholeImg.setImageResource(R.mipmap.bule_two_circle);
                if(mWholeFragment != null && !mWholeFragment.isAdded()){
                    ActivityUtils.addFragmentToActivityWithTag(mFragmentManager,mWholeFragment,R.id.rl_vote_container,TAG_WHOLE_FRAGMENT);
                }
                hideAllFragment(transaction);
                transaction.show(mWholeFragment);
                break;
            case 1:
                mSponsorText.setTextColor(getResources().getColor(R.color.colorAccent));
                mSponsorImg.setImageResource(R.mipmap.bule_two_circle);
                if(mSponsorFragment != null && !mSponsorFragment.isAdded()){
                    ActivityUtils.addFragmentToActivityWithTag(mFragmentManager,mSponsorFragment,R.id.rl_vote_container,TAG_SPONSOR_FRAGMENT);
                }
                hideAllFragment(transaction);
                transaction.show(mSponsorFragment);
                break;
            case 2:
                mAddText.setTextColor(getResources().getColor(R.color.colorAccent));
                mAddImg.setImageResource(R.mipmap.bule_two_circle);
                if(mNewAddFragment != null && !mNewAddFragment.isAdded()){
                    ActivityUtils.addFragmentToActivityWithTag(mFragmentManager,mNewAddFragment,R.id.rl_vote_container,TAG_ADD_FRAGMENT);
                }
                hideAllFragment(transaction);
                transaction.show(mNewAddFragment);
                break;
            case 3:
                mPartText.setTextColor(getResources().getColor(R.color.colorAccent));
                mPartImg.setImageResource(R.mipmap.bule_two_circle);
                if(mParticipantFragment != null && !mParticipantFragment.isAdded()){
                    ActivityUtils.addFragmentToActivityWithTag(mFragmentManager,mParticipantFragment,R.id.rl_vote_container,TAG_PARTICIPANT_FRAGMENT);
                }
                hideAllFragment(transaction);
                transaction.show(mParticipantFragment);
                break;
            case 4:
                mDraftText.setTextColor(getResources().getColor(R.color.colorAccent));
                mDraftImg.setImageResource(R.mipmap.bule_two_circle);
                if(mDraftFragment != null && !mDraftFragment.isAdded()){
                    ActivityUtils.addFragmentToActivityWithTag(mFragmentManager,mDraftFragment,R.id.rl_vote_container,TAG_DRAFT_FRAGMENT);
                }
                hideAllFragment(transaction);
                transaction.show(mDraftFragment);
                break;
        }

        transaction.commit();
    }

以其中的case 0 为例，当第一个fragment需要展示时，需要对文本的颜色和图片样式进行替换，展现出被选中的效果，而其他四个布局则要展示未被选中的效果。这里注意一点，事务Transaction的提交问题，在我另一篇文章中有提到，这里不再复述，不清楚的小伙伴可以去看看：http://blog.csdn.net/ckwccc/article/details/78789508

3.处理点击事件：

  int id = v.getId();
        mLastItem = mCurrentItem;
        setLastImageViewNormal(mLastItem);
        switch (id){
            case R.id.ll_vote_whole:
                    mCurrentItem = 0;
                    showFragment(mCurrentItem);
                break;
            case R.id.ll_vote_sponsor:
                    mCurrentItem = 1;
                    showFragment(mCurrentItem);
                break;
            case R.id.ll_vote_add:
                    mCurrentItem = 2;
                    showFragment(mCurrentItem);
                break;
            case R.id.ll_vote_participant:
                    mCurrentItem = 3;
                    showFragment(mCurrentItem);
                break;
            case R.id.ll_vote_draft:
                    mCurrentItem = 4;
                    showFragment(mCurrentItem);
                break;
        }

对底部的五个LinearLayout设置点击事件，然后进行处理。其中mLastItem的作用是将上一次被点击的布局中的图片，在下一次点击中替换为没选中状态的标志。
有兴趣的小伙伴可以去我的github上看看：https://github.com/ckwcc/NavigationCenterUpBar