Android app内角标解决方案 BadgeUtil
2017-08-20 本文已影响225人
我的小白大人
前言
在我们的app中可能会遇到各种各样的需求，其中一个还算是比较常见的需求就是给一个需要通知的地方加上角标。
在最近正好需要做这么个东西，所以我本着人人为我我为人人的思想把我的思路拿出来跟大家分享
思路
在自己实现角标功能之前也有同事集成过其他的第三方角标库，但是大部分三方的角标库对我的项目来说并不适用。因为目前大部分的三方角标解决方案都是使用别人写好的View，大部分是实现的FrameLayout。然而当你需要在底部的tab上来实现该功能时就会出现问题，比如说你用的RadioGroup + RadioButton组合来实现的Tab那么你必须将你的tab方案改成LinearLayout + FrameLayout来实现。这样的话可能又会对你的程序结构产生影响，比如你的程序构架与底部的结构有关。。。那么使用起来将会非常麻烦...既然这样.......那不如自己来造个轮子。
如何在使用角标的情况下来保持良好的可拓展性呢？如果费很大劲将工程改成适应某个View的样子，那么一旦项目经理要改需求。。。那心中肯定是一万头草泥马奔腾而过啊。
接下来说说我的实现方案吧
我的实现方案是通过使用时进行自定义View，并重写相应的绘制方法。这听上去比较复杂，但是其实很简单，因为所有的 View实现方法几乎都一样，所以使用起来并不复杂。而且保留了良好的可拓展性，也不破坏原有的程序结构。 详细的使用方法见下一节
预览
Paste_Image.png
gif图片加载比较慢
GIF_20170820_111700.gif
使用方法
- 1.新建一个自定义View类，并继承你想继承的类，比如RadioButton
- 2.实现BadgeUtil.Badge 接口并重写接口中的方法
- 3.实例化一个BadgeUtil.BadgeDrawer 实例并调用实例的draw(canvas)方法。具体的调用分2种情况：
1)当继承的View类仅仅是普通的View，那么需要在onDraw(canvas)方法中来调用draw(canvas);
2)当继承的View类是ViewGroup时，那么需要在dispatchDraw(canvas)方法中来调用draw(canvas);示例代码如下：
//普通View，比如RadioButton public class BadgeRadioButton extends AppCompatRadioButton implements BadgeUtil.Badge { ...... private BadgeUtil.BadgeDrawer drawer; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (drawer == null){ drawer = drawer(); } drawer.draw(canvas); } @Override public BadgeUtil.BadgeDrawer drawer() { if (drawer == null) drawer = new BadgeUtil.BadgeDrawer(this); return drawer; } ...... } //ViewGroup，比如FrameLayout public class BadgeFrameLayout extends FrameLayout implements BadgeUtil.Badge { ...... private BadgeUtil.BadgeDrawer drawer; @Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); if (drawer == null){ drawer = drawer(); } drawer.draw(canvas); } @Override public BadgeUtil.BadgeDrawer drawer() { if (drawer == null) drawer = new BadgeUtil.BadgeDrawer(this); return drawer; } ...... }
- 4.将xml文件中的View替换成新自定义的BadgeView
以BadgeRadioButton 为例
示例代码如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/layout_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="24dp" android:textSize="14sp" android:lineSpacingMultiplier="1.2" android:textColor="#333333" android:text="click single view to update themselves \nand click UpdateNumbers button to update all"/> <Button android:id="@+id/btn_update" android:layout_width="wrap_content" android:layout_height="40dp" android:layout_gravity="center_horizontal|bottom" android:layout_marginBottom="60dp" android:text="updateNumbers" android:paddingLeft="8dp" android:paddingRight="8dp" android:background="@color/colorPrimary" android:textColor="#ffffff"/> <com.leobai.library.view.BadgeFrameLayout android:id="@+id/frame_badge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher_round"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Frame" android:textColor="#333333" android:layout_marginTop="4dp" /> </LinearLayout> </com.leobai.library.view.BadgeFrameLayout> </FrameLayout> <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <com.leobai.library.view.BadgeRadioButton android:id="@+id/tab0" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="Tab0" android:drawableTop="@mipmap/ic_launcher" android:button="@null" android:gravity="center"/> <com.leobai.library.view.BadgeRadioButton android:id="@+id/tab1" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="Tab1" android:drawableTop="@mipmap/ic_launcher" android:button="@null" android:gravity="center"/> <com.leobai.library.view.BadgeRadioButton android:id="@+id/tab2" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="Tab2" android:drawableTop="@mipmap/ic_launcher" android:button="@null" android:gravity="center"/> <com.leobai.library.view.BadgeRadioButton android:id="@+id/tab3" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="Tab3" android:drawableTop="@mipmap/ic_launcher" android:button="@null" android:gravity="center"/> </RadioGroup> </LinearLayout>
- 5.调用Badge 的update(number)方法进行更新，或者如果你需要一个统一的管理工具的话可以使用Notifier类：创建一个新的notifer实例，并且把要更新的Badge注册到notifier实例上去并且给Badge设置唯一Id。这时你可以将所有的Badge进行统一升级。
示例代码：
//对单个Badge进行更新
private View.OnClickListener badgeOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
if (v instanceof BadgeUtil.Badge){
((BadgeUtil.Badge) v).update((int) (Math.random() * 200));
}
}
};
//注册Badge到Notifier对象
private void registerBadges(){
badgeNotifier = new BadgeUtil.Notifier();
badgeNotifier.register(tab0);
badgeNotifier.register(tab1);
badgeNotifier.register(tab2);
badgeNotifier.register(tab3);
badgeNotifier.register(frameBadge);
tab0.setBadgeId("tab0");
tab1.setBadgeId("tab1");
tab2.setBadgeId("tab2");
tab3.setBadgeId("tab3");
frameBadge.setBadgeId("frame");
}
//使用Notifier对已注册的Badge进行升级
private View.OnClickListener updateAllOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
List<BadgeUtil.BadgeNumber> list = new ArrayList<>();
list.add(new BadgeUtil.BadgeNumber((int) (Math.random() * 200),"tab0"));
list.add(new BadgeUtil.BadgeNumber((int) (Math.random() * 200),"tab1"));
list.add(new BadgeUtil.BadgeNumber((int) (Math.random() * 200),"tab2"));
list.add(new BadgeUtil.BadgeNumber((int) (Math.random() * 200),"tab3"));
list.add(new BadgeUtil.BadgeNumber((int) (Math.random() * 200),"frame"));
badgeNotifier.notifyUpdate(list);
}
};
- 6.至此你的自定义角标控件以及使用已基本完成了。是不是看起来比较复杂。
不过其实我已经替你做好了。我已经替你自定义好了一个BadgeRadioButton和BadgeFrameLayout类，分别对应一个View和ViewGroup类，所以你在使用时可以直接将需要的类复制一份，比如我想要自定义ImageView类型的Badge，你可以将BadgeRadioButton类复制成BadgeImageView，你现在需要做的只是将BadgeImageView的父类从RadioButton改成ImageView就可以了，除非你需要自己定义新的样式，那么类里面的任何代码都不需要改动你就完成了一个新的自定义BadgeImageView，对于ViewGroup来说也是如此。是不是很简单？
List或者Grid中的使用
由于List比较特殊，限于ListView或者RecyclerView的机制，我们不可以单独去对一个item进行更新，所以我们需要一些更进一步的拓展
我在这里提供一种解决方案，让adapter实现BadgeUtil.UpdateAble接口，具体请看代码示例：
public class BadgeGridAdapter extends RecyclerView.Adapter<ViewHolder> implements BadgeUtil.UpdateAble{
//store your badges to a list on ViewHolder's instantiation.
List<Badges> badges = new ArrayList<>();
//override method void updateBadge(List<BadgeNumber> badgeNumbers)
public void updateBadge(List<BadgeNumber> badgeNumbers){
//update your badges by ids.
...
...
}
public void onBindViewHolder(ViewHolder holder,int position){
//update your badge's unique id.
holder.badge.setId("your unique id,you may store it in Java bean object.");
...
}
}
当然了还有其他的方法来解决这个问题，比如将通知数量信息放在JavaBeen实体类中，在onBindViewHolder中直接更新Badge，这时当你需要更新Badge数量时你需要更新实体类的内容。
其实也还有很多其他方法来做这件事，我在这里不再一一列举，具体选择哪种方式还得看具体项目需求。
结语
总体来说这种方案还是比较方便拓展的，不会遇到使用一种view时一旦改需求非常难办的情况。
博主也是个菜鸟，水平不足，所以有不足之处希望大家可以指出
我已经将完整的代码发布到了Github，如果有需要的同学可以自己移步到github去取，如果大家觉得对自己有用可以star或者fork一下，博主在这里提前谢过大家了：
https://github.com/wjdforever/BadgeUtil
