引述:
《快速搭建电商平台》系列九:我的订单中我们又看到在效果图中,待付款,待发货,待评价等右上角会有红色数字提醒小标。这就是本文要推出的分享控件--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、这样,就完美的实现了数字提醒的添加,效果图如下:
Demo下载地址【GitHub】
控件好用的话大家关注下简书,在GitHub上给个Star噢~~~~!
效果图.png
网友评论