|
| 1 | +# Android-NavMenu-master |
| 2 | + |
| 3 | +### 一个底部导航栏, 实现了显示未读消息数, 显示红点等效果的封装。 |
| 4 | + |
| 5 | +# 添加依赖 |
| 6 | + |
| 7 | +#### 1. 在项目根目录的 build.gradle 中添加 |
| 8 | + |
| 9 | + allprojects { |
| 10 | + repositories { |
| 11 | + ... |
| 12 | + maven { url 'https://jitpack.io' } |
| 13 | + } |
| 14 | + } |
| 15 | + |
| 16 | +#### 2. 在项目的 build.gradle 中添加 |
| 17 | + |
| 18 | + compile 'com.github.smashinggit:Android-NavMenu-master:v1.0.2' |
| 19 | + |
| 20 | +# 如何使用 |
| 21 | + |
| 22 | + |
| 23 | +## 1. 普通用法 |
| 24 | + |
| 25 | +#### 第一步, 在xml文件中添加控件 |
| 26 | + |
| 27 | + 在xml中的跟布局添加 xmxmlns:app="http://schemas.android.com/apk/res-auto" |
| 28 | + |
| 29 | + |
| 30 | + <com.git.navmenu.NavMenuLayout |
| 31 | + android:id="@+id/nav_layout" |
| 32 | + android:layout_width="match_parent" |
| 33 | + android:layout_height="50dp" |
| 34 | + android:layout_alignParentBottom="true" |
| 35 | + app:menuCount="3" /> |
| 36 | + |
| 37 | + |
| 38 | +注: |
| 39 | + |
| 40 | + app:menuCount="3" 属性是必须要添加的,代表底部菜单的数量,此数值必须要与 Activity 中设置的图片资源,文字资源的数量一致, |
| 41 | + 否则无法正常显示 |
| 42 | + |
| 43 | + |
| 44 | + |
| 45 | + |
| 46 | +#### 第二步, 在Activity中设置数据 |
| 47 | + |
| 48 | + private int[] iconRes = {R.mipmap.ic_home_normal, R.mipmap.ic_managemoney_normal, R.mipmap.ic_me_normal}; |
| 49 | + private int[] iconResSelected = {R.mipmap.ic_home_selected, R.mipmap.ic_managemoney_select, R.mipmap.ic_me_select}; |
| 50 | + private String[] textRes = {"首页", "理财", "个人中心"}; |
| 51 | + |
| 52 | + |
| 53 | + mNavMenuLayout.setIconRes(iconRes)//设置未选中图标 |
| 54 | + .setIconResSelected(iconResSelected)//设置选中图标 |
| 55 | + .setTextRes(textRes)//设置文字 |
| 56 | + .setSelected(0);//设置选中的位置 |
| 57 | + |
| 58 | +注: |
| 59 | + |
| 60 | + setSelected(int position)方法一定要放在最后调用,因为在该方法中实现了刷新页面的功能,其他的几个方法都只是进行了赋值操作, |
| 61 | + 并没有刷新页面; |
| 62 | + |
| 63 | +#### 效果图 |
| 64 | + |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | + |
| 69 | + |
| 70 | +## 2. 带消息提示的用法 |
| 71 | + |
| 72 | +#### 显示消息或红点提示 |
| 73 | + |
| 74 | + mNavMenuLayout.setIconRes(iconRes)//设置未选中图标 |
| 75 | + .setIconResSelected(iconResSelected)//设置选中图标 |
| 76 | + .setTextRes(textRes)//设置文字 |
| 77 | + .setMsg(0, "99+")//设置显示消息 |
| 78 | + .setMsg(1, "NEW")//设置显示消息 |
| 79 | + .showRedPoint(2)//设置显示红点 |
| 80 | + .setSelected(0);//设置选中的位置 |
| 81 | + |
| 82 | +注: |
| 83 | + |
| 84 | + setMsg(int position,String msg) 方法,第一个参数代表底部菜单的位置,第二个参数代表显示的内容 |
| 85 | + showRedPoint(int position)方法,参数代表底部菜单的位置 |
| 86 | + |
| 87 | +#### 取消消息或红点提示 |
| 88 | + |
| 89 | + mNavMenuLayout .hideMsg(0)//隐藏消息 |
| 90 | + .hideMsg(1)//隐藏消息 |
| 91 | + .hideRedPoint(2)//隐藏红点 |
| 92 | + |
| 93 | +注: |
| 94 | + |
| 95 | + hideMsg(int position)参数代表底部菜单位置 |
| 96 | + hideRedPoint(int position)同上 |
| 97 | + |
| 98 | +#### 效果图 |
| 99 | + |
| 100 | + |
| 101 | + |
| 102 | +## 3. 点击事件 |
| 103 | + |
| 104 | + //选中的点击事件 |
| 105 | + mNavMenuLayout.setOnItemSelectedListener(new NavMenuLayout.OnItemSelectedListener() { |
| 106 | + @Override |
| 107 | + public void onItemSelected(int position) { |
| 108 | + mViewPager.setCurrentItem(position);//选中后切换viwepager |
| 109 | + Toast.makeText(MainActivity.this, "选中了-> " + textRes[position], Toast.LENGTH_SHORT).show(); |
| 110 | + } |
| 111 | + }); |
| 112 | + //已选中状态下的点击事件 |
| 113 | + mNavMenuLayout.setOnItemReSelectedListener(new NavMenuLayout.OnItemReSelectedListener() { |
| 114 | + @Override |
| 115 | + public void onItemReSelected(int position) { |
| 116 | + Toast.makeText(MainActivity.this, "重复选中了-> " + textRes[position], Toast.LENGTH_SHORT).show(); |
| 117 | + } |
| 118 | + }); |
| 119 | + |
| 120 | +注: |
| 121 | + |
| 122 | + 点击事件分为2种: |
| 123 | + setOnItemSelectedListener 代表的是当一个 item 由 未选中状态 变成 选中状态 时的回调 |
| 124 | + setOnItemReSelectedListener 代表的是当一个 item 已经是选中状态 并且 又点击该 item 时的回调 |
| 125 | + |
| 126 | +#### 效果图 |
| 127 | + |
| 128 | + |
| 129 | + |
| 130 | + |
| 131 | + |
| 132 | +## 4. 更多个性化定制 |
| 133 | + |
| 134 | + mNavMenuLayout.setIconRes(iconRes)//设置未选中图标 |
| 135 | + .setIconResSelected(iconResSelected)//设置选中图标 |
| 136 | + .setTextRes(textRes)//设置文字 |
| 137 | + .setIconSize(60, 60)//设置图标大小 |
| 138 | + .setIconSize(0, 70,70) |
| 139 | + .setTextSize(20)//设置文字大小 |
| 140 | + .setTextSize(0, 20) |
| 141 | + .setTextColor(Color.GRAY)//未选中状态下文字颜色 |
| 142 | + .setTextColorSelected(Color.RED)//选中状态下文字颜色 |
| 143 | + .setBackColor(Color.WHITE)//设置背景色 |
| 144 | + .setBackColor(2,Color.RED) |
| 145 | + .setMarginTop(PixelUtil.dpToPx(MainActivity.this, 5))//文字和图标直接的距离,默认为5dp |
| 146 | + .setMarginTop(1, PixelUtil.dpToPx(MainActivity.this, 10)) |
| 147 | + .setSelected(0);//设置选中的位置 |
| 148 | + |
| 149 | +注: |
| 150 | + |
| 151 | + 以设置图标大小为例,有两个重载方法, |
| 152 | + setIconSize(60, 60) 表示将图标宽高设为 60 * 60,此效果针对于底部所有的item,即底部所有图标大小都会是 60 * 60 |
| 153 | + .setIconSize(0, 70,70) 第一个参数代表位置,表示针对将底部哪一个item的图标进行设置 |
| 154 | + |
| 155 | +## 报错处理 |
| 156 | + |
| 157 | + 假如在使用过程中出现了无法显示或者是显示效果不正确等问题,请查看Log,里面会有报错提示。 |
| 158 | + |
| 159 | + 例如: |
| 160 | + 如果没有在xml中声明 app:menuCount="" 属性 或者是 属性的值 小于1 ,就会在LogCat中看到这样的提示: |
| 161 | + |
| 162 | + |
| 163 | + 03-18 22:37:58.405 2518-2518/? E/NavMenuLayout: the menuCount mast greater than 0 |
| 164 | + 03-18 22:37:58.405 2518-2518/? E/NavMenuLayout: the iconRes length is not equals count |
| 165 | + 03-18 22:37:58.405 2518-2518/? E/NavMenuLayout: the iconResSelected length is not equals count |
| 166 | + 03-18 22:37:58.405 2518-2518/? E/NavMenuLayout: the textRes length is not equals count |
| 167 | + |
| 168 | +## 联系方式 |
| 169 | + |
| 170 | + 如果在使用过程中有什么问题或者是意见,请联系我。谢谢大家! |
| 171 | + |
| 172 | + qq: 2670469507 |
| 173 | + 邮箱:smashing_chen@163.com |
| 174 | + |
0 commit comments