底部导航栏实现页面的切换（四）：消息提示

底部导航栏实现页面的切换（四）：消息提示

参考：http://blog.csdn.net/coder_pig/article/details/48104807

知识点

效果图：

是在 底部导航栏实现页面的切换（一）：Fragment + LinearLayout + TextView 基础上加的消息提示数量。

底部消息布局的实现：

每个TAB都是一个RelativeLayout,里面有2个TextView。第一个TextView是图片+文字，tv1；第二个TextView是底部消息tips1，背景是图片，text=“99+”，；让tips1位于tv1的右侧，marginLeft=”-10dp”,实现效果。tips默认是gone，点击button的时候显示出来。

<RelativeLayout
    android:id="@+id/tab1"
    android:background="@drawable/tab_bottom_bg_selector"
    style="@style/layout_tab_style">

    <TextView
        android:id="@+id/tv1"
        android:drawableTop="@drawable/tab1_icon_selector"
        android:text="微信"
        style="@style/text_tab_style"/>

    <TextView
        android:id="@+id/tips1"
        android:layout_toRightOf="@id/tv1"
        android:text="99+"
        style="@style/text_tab_tips_style"/>
</RelativeLayout>

对应的style是：

<style name="layout_tab_style">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_weight">1</item>
</style>

<style name="text_tab_style">
    <item name="android:textColor">@drawable/text_bottom_selector</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_centerInParent">true</item>
    <item name="android:gravity">center</item>
    <item name="android:textSize">15sp</item>
</style>

<style name="text_tab_tips_style">
    <item name="android:layout_width">20dp</item>
    <item name="android:layout_height">20dp</item>
    <item name="android:visibility">gone</item>
    <item name="android:layout_marginLeft">-10dp</item>
    <item name="android:background">@mipmap/msg_tips</item>
    <item name="android:textSize">15sp</item>
</style>

通过点击button显示消息

case R.id.btn1:
    if (isOpen1) {
        tips1.setVisibility(View.GONE);
    } else {
        tips1.setVisibility(View.VISIBLE);
    }
    isOpen1 = !isOpen1;
    break;
case R.id.btn2:
    if (isOpen2) {
        tips2.setVisibility(View.GONE);
    } else {
        tips2.setVisibility(View.VISIBLE);
    }
    isOpen2 = !isOpen2;
    break;
case R.id.btn3:
    if (isOpen3) {
        tips3.setVisibility(View.GONE);

    } else {
        tips3.setVisibility(View.VISIBLE);
    }
    isOpen3 = !isOpen3;
    break;
case R.id.btn4:
    if (isOpen4) {
        tips4.setVisibility(View.GONE);
    } else {
        tips4.setVisibility(View.VISIBLE);
    }
    isOpen4 = !isOpen4;
    break;

完整代码

@Override
public void onClick(View view) {
    transaction = fm.beginTransaction();
    switch (view.getId()) {
        case R.id.tab1:
            hideAllFragment();
            setSelectorAllFalse();//这个最好放在4个tab的每个case中，因为如果还有其他的点击，就会导致tab全变成灰色
            tab1.setSelected(true);
            tv1.setSelected(true);
            if (frag1 == null) {
                frag1 = new Frag1();
                transaction.add(R.id.framgLayout, frag1, "Frag1");
            }
            transaction.show(frag1);
            break;
        case R.id.tab2:
            hideAllFragment();
            setSelectorAllFalse();
            tab2.setSelected(true);
            tv2.setSelected(true);
            if (frag2 == null) {
                frag2 = new Frag2();
                transaction.add(R.id.framgLayout, frag2, "Frag2");
            }
            transaction.show(frag2);
            break;
        case R.id.tab3:
            hideAllFragment();
            setSelectorAllFalse();
            tab3.setSelected(true);
            tv3.setSelected(true);
            if (frag3 == null) {
                frag3 = new Frag3();
                transaction.add(R.id.framgLayout, frag3, "Frag3");
            }
            transaction.show(frag3);
            break;
        case R.id.tab4:
            hideAllFragment();
            setSelectorAllFalse();
            tab4.setSelected(true);
            tv4.setSelected(true);
            if (frag4 == null) {
                frag4 = new Frag4();
                transaction.add(R.id.framgLayout, frag4, "Frag4");
            }
            transaction.show(frag4);
            break;

        case R.id.btn1:
            if (isOpen1) {
                tips1.setVisibility(View.GONE);
            } else {
                tips1.setVisibility(View.VISIBLE);
            }
            isOpen1 = !isOpen1;
            break;
        case R.id.btn2:
            if (isOpen2) {
                tips2.setVisibility(View.GONE);
            } else {
                tips2.setVisibility(View.VISIBLE);
            }
            isOpen2 = !isOpen2;
            break;
        case R.id.btn3:
            if (isOpen3) {
                tips3.setVisibility(View.GONE);

            } else {
                tips3.setVisibility(View.VISIBLE);
            }
            isOpen3 = !isOpen3;
            break;
        case R.id.btn4:
            if (isOpen4) {
                tips4.setVisibility(View.GONE);
            } else {
                tips4.setVisibility(View.VISIBLE);
            }
            isOpen4 = !isOpen4;
            break;
    }
    transaction.commit();
}

源码：https://github.com/s1168805219/FragmentTab
对应的Module是app4

实现底部导航栏功能还有：
第三方开源库：ByeBurger 实现标题栏和底部导航栏的出现与隐藏
Design： Android Design Support Library —》7 BottomNavigationView
第三方开源库：BottomBar 底部导航栏