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

来源：互联网发布：stc89c52单片机资料编辑：程序博客网时间：2024/04/24 19:24

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

参考：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;

完整代码

@Overridepublic 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 底部导航栏

0 0