iOS中类似微信红点显示功能

设计思路：给UIView增加一个分类 所有的视图都可以根据需要来进行红点显示

#import <UIKit/UIKit.h>
@interface UIView (CHRRedDot)
@property (readonly, nonatomic) CALayer * chr_redDotLayer;
/**
 红点圆心的位置，与各个边之间的距离。如果距离<=0，则忽略距离
 */
@property (nonatomic, assign) UIEdgeInsets chr_redDotEdgeInsets;
/**
 红点的半径，默认为4
 */
@property (nonatomic, assign) CGFloat chr_redDotRadius;
/**
 红点的颜色，默认为0xFF5A5A
 */
@property (nonatomic, strong) UIColor * chr_redDotColor;
/**
 红点是否显示
 */
@property (nonatomic, assign) BOOL chr_redDotShow;
@end
#pragma mark - method
- (void)chr_updateRedDot {
  CALayer *redDot = self.chr_redDotLayer;
  if (self.chr_redDotShow) {
    if (redDot == nil) {
      redDot = [CALayer layer];
      self.chr_redDotLayer = redDot;
      [self.layer addSublayer:redDot];
    }
    redDot.backgroundColor = self.chr_redDotColor.CGColor;
    [self chr_layoutRedDot];
  } else {
    [redDot removeFromSuperlayer];
    self.chr_redDotLayer = nil;
  }
}
- (void)chr_layoutRedDot {
  CALayer *redDot = self.chr_redDotLayer;
  if (redDot == nil) return;
  CGFloat radius = self.chr_redDotRadius;
  redDot.cornerRadius = radius;
  UIEdgeInsets edgeInsets = self.chr_redDotEdgeInsets;
  CGFloat originX = edgeInsets.right <= 0 ? edgeInsets.left - radius : self.bounds.size.width - edgeInsets.right + radius;
  CGFloat originY = edgeInsets.bottom <= 0 ? edgeInsets.top - radius : self.bounds.size.height - edgeInsets.bottom + radius;
  CGFloat length = radius * 2;
  redDot.frame = CGRectMake(originX, originY, length, length);
}

以上所述是小编给大家介绍的iOS中类似微信红点显示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • IOS开发过程中的消息通知--小红点

    IOS开发过程中的消息通知--小红点

    大致分为两种方法:系统方法和自定义方法 系统方法: 系统自带的方法可以显示具体的消息数量,这个就是苹果设备常见的小红点.实现思路如下: NSArray *tabBarItems = self.navigationController.tabBarController.tabBar.items; UITabBarItem *personCenterTabBarItem = [tabBarItems objectAtIndex:3]; personCenterTabBarItem.badgeValu

  • IOS设置QQ小红点消除的方法(一键退朝)

    IOS设置QQ小红点消除的方法(一键退朝)

    QQ上黏黏的小红点很好玩有木有,于是自己也想实现一番,看到iOS实现的人比较少,Android的比较多,于是这个就用iOS来实现哈~ 效果图: 调试图: 其实从实现来讲,我是先实现第二张图的效果的. 我们小编给大家说下实现思路 1.了解原理,以及如何绘制"黏黏"形状(即绘制两圆加两条贝塞尔曲线). 2.新建UIView(AZMetaBallCanvas),作为单独画布用来绘制"黏黏"形状,用程序实现算法,并绘制出来. 3.给画布(AZMetaBallCanvas)添

  • iOS TabBarItem设置红点（未读消息）

    实现原理: 其实是自定义一个view,将view添加到UITabBar上面,也可以是一个按钮,设置背景图片,和label. 废话少说直接上代码 搞一个UITabBar的分类 #import <UIKit/UIKit.h> @interface UITabBar (Extension) - (void)showBadgeOnItmIndex:(int)index; - (void)hideBadgeOnItemIndex:(int)index; @end #import "UITabB

  • iOS中类似微信红点显示功能

    设计思路:给UIView增加一个分类 所有的视图都可以根据需要来进行红点显示 #import <UIKit/UIKit.h> @interface UIView (CHRRedDot) @property (readonly, nonatomic) CALayer * chr_redDotLayer; /** 红点圆心的位置,与各个边之间的距离.如果距离<=0,则忽略距离 */ @property (nonatomic, assign) UIEdgeInsets chr_redDotEd

  • iOS实现类似微信和支付宝的密码输入框（UIKeyInput协议）

    iOS实现类似微信和支付宝的密码输入框（UIKeyInput协议）

    目前在项目中需要实现发红包的功能,自己就写了一个密码输入框的控件,主要用到了UIKeyInput协议和CoreGraphics框架,效果类似微信支付,感觉还行就把我的思路和制作过程写下来给大家分享一下. 让你的自定义View具备输入的功能(UIKeyInput协议) 通过UIKeyInput协议可以为响应者提供简单的键盘输入的功能,让需要键盘的responder成为第一响应者就行了.UIKeyInput协议必须实现的有三个方法,分别是以下方法: #pragma mark - UIKeyInput

  • iOS中输入框设置指定字符输入的方法

    前言 对于开发者来说,在很多情况下,一般的输入框需要按照要求进行输入,输入内容由开发人员来指定.例如:密码输入框只能输入纯数字或者是拼音与数字结合的文本等,那么我们在开发的时候就需要做一些输入文本的限时.下面话不多说了,来一起看看详细的介绍吧. 一.只能输入纯数字 在这里以UITextField为例:其实现代码如下: - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range re

  • iOS 中Swift仿微信添加提示小红点功能(无数字)

    iOS 中Swift仿微信添加提示小红点功能(无数字)

    具体内容详情如下所示: 以分类的方式实现 代码 UITabBar+Extenstion.swift fileprivate let lxfFlag: Int = 666 extension UITabBar { // MARK:- 显示小红点 func showBadgOn(index itemIndex: Int, tabbarItemNums: CGFloat = 4.0) { // 移除之前的小红点 self.removeBadgeOn(index: itemIndex) // 创建小红点

  • JS如何设置iOS中微信浏览器的title

    说到web前端,浏览器差异是不可回避的问题,这次在项目就遇到下面的问题: 微信导航栏的内容是直接拿的项目中title来设置的.但是现在做的项目是一个单页应用,整个页面只会在第一次完全刷新,后面只会局部刷新,所以只能在页面刷新的时候通过js动态修改title.开始我们使用的做法如下: document.title = "微信导航栏想要显示的内容"; $("title").text("微信导航栏想要显示的内容"); document.getEleme

  • iOS中Swift UISearchController仿微信搜索框

    iOS中Swift UISearchController仿微信搜索框

    创建一个UISearchController 如果传入的searchResultsController为nil,则表示搜索的结果在当前控制器中显示,现在我让它在searchResultVC中显示 // 创建searchResultVC let searchResultVC = UIViewController() // 设置背景颜色为红色 searchResultVC.view.backgroundColor = UIColor.red let searchController = UISear

  • Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果（2）

    Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果（2）

    做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了. 公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开

  • vue单应用在ios系统中实现微信分享功能操作

    表示是第一次使用vue做单应用显目,也是在逐渐的摸索中~更是各种踩坑,各种填坑,打算写博客么?是因为不想写笔记了,嗯嗯 就是这么简单 进入正题. 刚开始做微信分享的这个功能的时候,脑补了官方文档微信JS-SDK说明文档 基础的知识不多说了,反正多看文档总是没错的~在安卓系统上面分享是没出错的,但是在ios上面问题就来了,表示无限吐槽ios,但是吐槽归吐槽,问题总是该解决的-在网上百度了很多vue单应用在ios系统中实现微信分享失败的原因以及解决方案 原因 单页面应用通过什么入口进去的 url保持

  • vue中解决微信html5原生ios虚拟键返回不刷新问题

    问题描述: 做微信h5页面时,经过了微信授权才跳转到一级默认路由home.vue中,因此在home页面时在IOS中底部会出现虚拟的返回键,安卓上不会出现.且在IOS点击返回时会跳转到home空白页面不重新加载,但是在安卓机上点击返回键会重新加载. 实现功能: 解决IOS问题(在home页面点返回时路由还是在home页面,并完成重新加载) 分析: 需要在进入页面时加入监听,并在页面离开时移除监听.因为home页面是个滚动列表,所以我采用了keep-alive路由缓存,所以不能在created()和

  • iOS高仿微信表情输入功能代码分享

    iOS高仿微信表情输入功能代码分享

    最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实现的过程中遇到了很多小问题,接下来会一一介绍遇到过的坑.先上一张效果图: 一.实现表情选择View(WKExpressionView) 具体的实现就不细说了,主要功能就是点击表情时,将对应表情的图片名称通知给delegate. 二.实现表情textView(WKExpressionTextView)

随机推荐