duwenquan-方形LOGO.png

引述：

《快速搭建電商平臺》系列九：我的訂單中我們又看到在效果圖中，待付款，待發貨，待評價等右上角會有紅色數字提醒小標。這就是本文要推出的分享控件--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