Fragmentation 之底部栏（中间凸起）实现

【传送门】https://github.com/YoKeyword/Fragmentation
【需求】

图片.png

【三方依赖库】 compile 'me.yokeyword:fragmentation:1.3.4'
【xml布局】

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/fl_main_root"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical">

<RelativeLayout
    android:id="@+id/fl_main"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@color/background"/>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/ll_main_tab"
        android:layout_width="match_parent"
        android:layout_height="@dimen/height_main_bottom"
        android:layout_gravity="bottom"
        android:background="@color/white"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/ll_main_tab_bill"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_horizontal|bottom"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_main_tab_bill"
                android:layout_width="@dimen/dist_20"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:src="@drawable/ic_tab_bill_selector"/>

            <TextView
                android:id="@+id/tv_main_tab_bill"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:lines="1"
                android:paddingBottom="@dimen/dist_5"
                android:paddingTop="@dimen/dist_3"
                android:singleLine="true"
                android:text="@string/text_main_tab_bill"
                android:textColor="@drawable/textcolor_main_tab_selector"
                android:textSize="@dimen/textSize_10"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_main_tab_chart"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_horizontal|bottom"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_main_tab_chart"
                android:layout_width="@dimen/dist_20"
                android:layout_height="@dimen/dist_20"
                android:background="@color/white"
                android:src="@drawable/ic_tab_chart_selector"/>

            <TextView
                android:id="@+id/tv_main_tab_chart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:lines="1"
                android:paddingBottom="@dimen/dist_5"
                android:paddingTop="@dimen/dist_3"
                android:singleLine="true"
                android:text="@string/text_main_tab_chart"
                android:textColor="@drawable/textcolor_main_tab_selector"
                android:textSize="@dimen/textSize_10"/>
        </LinearLayout>

        <View
            android:id="@+id/space_main_tab_center"
            android:layout_width="@dimen/dist_0"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/dist_10"
            android:layout_marginRight="@dimen/dist_10"
            android:layout_weight="1"/>

        <LinearLayout
            android:id="@+id/ll_main_tab_discovery"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/white"
            android:gravity="center_horizontal|bottom"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_main_tab_discovery"
                android:layout_width="@dimen/dist_20"
                android:layout_height="@dimen/dist_20"
                android:background="@color/white"
                android:src="@drawable/ic_tab_discovery_selector"/>

            <TextView
                android:id="@+id/tv_main_tab_discovery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:lines="1"
                android:paddingBottom="@dimen/dist_5"
                android:paddingTop="@dimen/dist_3"
                android:singleLine="true"
                android:text="预算"
                android:textColor="@drawable/textcolor_main_tab_selector"
                android:textSize="@dimen/textSize_10"/>
        </LinearLayout>

        <RelativeLayout
            android:id="@+id/rl_main_tab_mine"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_main_tab_mine"
                android:layout_width="@dimen/dist_20"
                android:layout_height="@dimen/dist_20"
                android:layout_above="@+id/tv_main_tab_mine"
                android:layout_centerHorizontal="true"
                android:background="@color/white"
                android:src="@drawable/ic_tab_mine_selector"/>

            <TextView
                android:id="@+id/tv_main_tab_mine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:lines="1"
                android:paddingBottom="@dimen/dist_5"
                android:paddingTop="@dimen/dist_3"
                android:singleLine="true"
                android:text="@string/text_main_tab_mine"
                android:textColor="@drawable/textcolor_main_tab_selector"
                android:textSize="@dimen/textSize_10"/>

        </RelativeLayout>
       </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_main_tab_tally"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/height_main_pencil"
        android:layout_gravity="bottom|center_horizontal"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_main_tab_tally"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom"
            android:drawableTop="@drawable/ic_tab_pencil_selector"
            android:gravity="center_horizontal"
            android:lines="1"
            android:onClick="onTallyClick"
            android:paddingBottom="@dimen/dist_5"
            android:singleLine="true"
            android:text="@string/text_main_tab_tally"
            android:textColor="@drawable/textcolor_main_tally_selector"
            android:textSize="@dimen/textSize_10"/>
    </LinearLayout>

   </FrameLayout>
</LinearLayout>

【图片选择器】drawable--> ic_tab_bill_selector.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/ic_tab_bill_sel"/>
<item android:state_selected="false" android:drawable="@drawable/ic_tab_bill_nor"/>
</selector>

【字体选择器】drawable--> textcolor_main_tab_selector.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="@color/textColor_22" />
<item android:state_selected="false" android:color="@color/textColor_88" />
</selector>

【代码】

public static final int FRAGMENT_BILL = 0;
public static final int FRAGMENT_CHART = 1;
public static final int FRAGMENT_DISCOVERY = 2;
public static final int FRAGMENT_MINE = 3;

 // 保存当前选中的Fragment
private SupportFragment mCurFragment;
mCurFragment = findFragment(BillFragment.class);

    if (mCurFragment == null) {
        mFragments[FRAGMENT_BILL] = BillFragment.newInstance();
        mFragments[FRAGMENT_CHART] = ChartFragment.newInstance();
        mFragments[FRAGMENT_DISCOVERY] = BudgetFragment.newInstance();
        mFragments[FRAGMENT_MINE] = MineFragment.newInstance();
        mCurFragment = mFragments[FRAGMENT_BILL];

        loadMultipleRootFragment(R.id.fl_main, FRAGMENT_BILL,
                mFragments[FRAGMENT_BILL],
                mFragments[FRAGMENT_CHART],
                mFragments[FRAGMENT_DISCOVERY],
                mFragments[FRAGMENT_MINE]);
    } else {
        // 这里库已经做了Fragment恢复,所有不需要额外的处理了, 不会出现重叠问题
        mFragments[FRAGMENT_BILL] = mCurFragment;
        mFragments[FRAGMENT_CHART] = findFragment(ChartFragment.class);
        mFragments[FRAGMENT_DISCOVERY] = findFragment(BudgetFragment.class);
        mFragments[FRAGMENT_MINE] = findFragment(MineFragment.class);
        showHideFragment(mCurFragment);
    }
    //设置默认选择的标签，标签的图片和文字被选中
    ivMainTabBill.setSelected(true);
    tvMainTabBill.setSelected(true);

【处理每个tab】

@OnClick({R.id.ll_main_tab_bill, R.id.ll_main_tab_chart, R.id.ll_main_tab_discovery, R.id.rl_main_tab_mine, R.id.ll_main_tab_tally})
public void onViewClicked(View view) {
   /* if (!mTabClickable) {
        //底部Tab栏隐藏时，不可点击切换fragment
        return;
    }*/

    //切换到不同的fragment，并且显示点击动画
    int id = view.getId();
    switch (id) {
        case R.id.ll_main_tab_bill:
            switchFragment(FRAGMENT_BILL);
            changeTab(id, true);
            break;
        case R.id.ll_main_tab_chart:
            switchFragment(FRAGMENT_CHART);
            changeTab(id, true);
            break;
        case R.id.ll_main_tab_discovery:
            switchFragment(FRAGMENT_DISCOVERY);
            changeTab(id, true);
            break;
        case R.id.rl_main_tab_mine:
            switchFragment(FRAGMENT_MINE);
            changeTab(id, true);
            break;
        default:
            break;
    }
}

【方法】

 /**
 * 切换Fragment
 *
 * @param position 索引
 */
public void switchFragment(int position) {
    if (position < 0 || position > mFragments.length - 1) {
        return;
    }

    SupportFragment oldFragment = mFragments[mSelectedPosition];
    SupportFragment newFragment = mFragments[position];
    showHideFragment(newFragment, oldFragment);
    mSelectedPosition = position;
    mCurFragment = newFragment;
    //改变状态栏颜色
    changeStatusColor();
}

 /**
 * 改变基本的颜色值
 */
public void changeStatusColor() {
    int statusColor;
    if (mSelectedPosition == 3) {  // 个人信息页面
        statusColor = Color.WHITE;
    } else {
        statusColor = ContextCompat.getColor(this, R.color.colorPrimary);

    }
    //statusBar.setBackgroundColor(statusColor);
    //statusBar.setBackgroundColor(statusColor);
    resetStatusBarColor(statusColor);
}


/**
 * 重置颜色
 *
 * @param statusBarColor 颜色
 */
public void resetStatusBarColor(@ColorInt int statusBarColor) {
    /*Sofia.with(activity)
            .statusBarDarkFont()
            .statusBarBackground(statusBarColor);*/

    StatusBar.setStatusBarLightMode(this, statusBarColor);

}


/**
 * 切换标签，判断是否启用动画
 *
 * @param id   切换的标签id（父LL）
 * @param anim 是否启用动画
 */

private void changeTab(int id, boolean anim) {

    ivMainTabBill.setSelected(false);
    tvMainTabBill.setSelected(false);
    ivMainTabChart.setSelected(false);
    tvMainTabChart.setSelected(false);
    ivMainTabDiscovery.setSelected(false);
    tvMainTabDiscovery.setSelected(false);
    ivMainTabMine.setSelected(false);
    tvMainTabMine.setSelected(false);


    switch (id) {
        case R.id.ll_main_tab_bill:
            //账单
            ivMainTabBill.setSelected(true);
            tvMainTabBill.setSelected(true);
            break;

        case R.id.ll_main_tab_chart:
            //图表
            ivMainTabChart.setSelected(true);
            tvMainTabChart.setSelected(true);
            break;

        case R.id.ll_main_tab_discovery:
            // 发现
            ivMainTabDiscovery.setSelected(true);
            tvMainTabDiscovery.setSelected(true);
            break;

        case R.id.rl_main_tab_mine:
            //我的
            ivMainTabMine.setSelected(true);
            tvMainTabMine.setSelected(true);
            break;

        default:
            break;
    }
}