【iOS分享之路-快速搭建电商平台】十、任意控件添加BagdeV

DWQ-LOGO.jpeg

引述：

《快速搭建电商平台》系列九：我的订单中我们又看到在效果图中，待付款，待发货，待评价等右上角会有红色数字提醒小标。这就是本文要推出的分享控件--DWQbadgeView。其实，不管是在电商平台还是在其他类型的APP中，消息提醒是不可缺少的，通常会在相应控件的右上角位置红色圆圈⭕️，或者带着数字的提醒。由于此控件经常用到，所以本人也在很久之前就对其进行过封装。

DWQbadegeView

DWQbadegeView只允许在ARC环境下使用，用到的核心技术就是图层绘制技术，需要引入库< QuartzCore/QuartzCore>；通过使用drawRect方法来实现提醒badgeview。更多原理和实现方法不再细说，可查看Demo中的源码。

DWQbadegeView使用方法

• 1、初始化DWQbadgeview,代码示例如下:

//1、在父控件（parentView）上显示，显示的位置TopRight
    self.badgeView = [[DWQBadgeView alloc]initWithParentView:self.btn alignment:DWQBadgeViewAlignmentTopRight];

/*参数：   (UIView *) ：需要添加DWQbadgeView的控件
(DWQBadgeViewAlignment) ：添加在父控件上的位置，此定义为一个枚举，类型主要有：
DWQBadgeViewAlignmentTopLeft = 1,
    DWQBadgeViewAlignmentTopRight,
    DWQBadgeViewAlignmentTopCenter,
    DWQBadgeViewAlignmentCenterLeft,
    DWQBadgeViewAlignmentCenterRight,
    DWQBadgeViewAlignmentBottomLeft,
    DWQBadgeViewAlignmentBottomRight,
    DWQBadgeViewAlignmentBottomCenter,
    DWQBadgeViewAlignmentCenter
*/

• 2、封装控件有个很人性化的设置，就是显示的badgeView位置不是太准确时候可以进行调整,示例代码如下：

self.badgeView.badgePositionAdjustment = CGPointMake(-10, 10);

• 3、然后设置badgeview的一些相关属性，代码示例如下;

   //1、背景色
    self.badgeView.badgeBackgroundColor = [UIColor redColor];
    //2、没有反光面
    self.badgeView.badgeOverlayColor = [UIColor clearColor];
    //3、外圈的颜色，默认是白色
    self.badgeView.badgeStrokeColor = [UIColor redColor];
    
    
    /*****设置数字****/
    //1、用字符
    self.badgeView.badgeText = @"1";
    //2、如果不显示就设置为空
    // self.badgeView.badgeText = nil;

    //当更新数字时，最好刷新，不然由于frame固定的，数字为2位时，红圈变形
    [self.badgeView setNeedsLayout];

• 4、这样，就完美的实现了数字提醒的添加，效果图如下：

DWQbadgeView.png

Demo下载地址【GitHub】

DWQbadgeView

控件好用的话大家关注下简书，在GitHub上给个Star噢~~~~！

效果图.png