美文网首页iOS分享之路-快速开发电商平台iOS电商开发封装
【iOS分享之路-快速搭建电商平台】十、任意控件添加BagdeV

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

作者: 全栈攻城狮DWQ | 来源:发表于2017-03-09 13:22 被阅读5696次
    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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/rsywgttx.html