首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在UICollectionView Swift4+中创建圆周围的实心矩形边框

在UICollectionView中创建圆周围的实心矩形边框,可以通过自定义UICollectionViewCell来实现。以下是实现的步骤:

  1. 创建一个自定义的UICollectionViewCell类,继承自UICollectionViewCell。
  2. 在自定义的UICollectionViewCell类中,重写layoutSubviews()方法,用于设置边框样式。
  3. layoutSubviews()方法中,使用CAShapeLayer创建一个圆周围的实心矩形边框。
  4. 将创建的CAShapeLayer添加到自定义的UICollectionViewCell的layer中。

下面是一个示例代码:

代码语言:txt
复制
import UIKit

class CustomCollectionViewCell: UICollectionViewCell {
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // 创建圆周围的实心矩形边框
        let borderLayer = CAShapeLayer()
        borderLayer.frame = bounds
        borderLayer.fillColor = UIColor.clear.cgColor
        borderLayer.strokeColor = UIColor.red.cgColor
        borderLayer.lineWidth = 2.0
        
        let cornerRadius: CGFloat = 10.0
        let borderPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
        borderLayer.path = borderPath.cgPath
        
        // 添加边框layer
        layer.addSublayer(borderLayer)
    }
}

在使用这个自定义的UICollectionViewCell时,只需要将其注册到UICollectionView中,并在collectionView(_:cellForItemAt:)方法中使用即可。

代码语言:txt
复制
collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: "CustomCell")

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCollectionViewCell
    // 设置其他内容
    return cell
}

这样,你就可以在UICollectionView中创建圆周围的实心矩形边框了。

注意:以上示例代码仅展示了如何在UICollectionView中创建圆周围的实心矩形边框,具体的应用场景和推荐的腾讯云相关产品需要根据实际需求进行选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ConstraintLayout 想说爱你不容易~

控件的居中与对齐方式,约束布局中并没有类似于 LinearLayout/RelativeLatout 可以直接设置居中的属性,需要关联周围的布局,相互约束,例如: <LinearLayout android...,AndroidStudio 会自动在关联控件中添加默认 id,如 app:layout_constraintLeft_toLeftOf="@id/test_left_lay"; 2.2 和尚我对于这种关联方式...第二个:控件四个边框中心的空心圆,鼠标点击拖动即可调整与其他控件的关联关系: ?...第四个:控件为 TextView 时,左下角会出现一个 ab 样式小图标,点击即在文字下出现一个实心长条矩形,用来与其他 TextView 进行文字对齐: ?...控件相对于布局的比例/权重,这个就像第二条中居中对齐的功能,如图,控件左侧距左边框长度 与 控件右侧距右边框长度 即图中 x/y 的比例即为相对于布局的水平权重: app:layout_constraintHorizontal_bias

81241
  • Android实用View:仿微信支付密码输入框

    : 绘制密码之间的分割线: 绘制实心圆代替输入的字符: 总结 番外篇 1 前言 开始阅读本篇文章之前先来说一下使用场景吧,我们知道如今移动支付已经占据我们日常支付的90%的份额,以微信支付和支付宝支付为主...,设计师要什么我们就给他什么) 绘制密码之间的分割线(竖线) 绘制实心圆代替输入的字符 对输入字符进行监听,便于扩展处理 实现一些常用的外部接口方法调用 5 具体实现 1....绘制外边框: 要想绘制边框我们首先要知道view的宽高,通过onSizeChanged方法去初始化宽高等数据,然后绘制圆角矩形(默认让他矩形显示直接传入圆角半径为0即可) ? ? 2....3、绘制实心圆代替输入的字符: 这里需要监听EditView的输入,重写onTextChanged方法获取输入字符的长度,然后计算每个圆圆心的坐标位置 ?...从图中可以看出是绘制了相应的实心圆,但是自带的底部线、光标、字符还在,要是拿这个去交差绝逼会被产品骂死。 ?

    1.7K20

    前端秘法基础式(HTML)(第一卷)

    二.a标签 超链接标签 1.href属性 也可以跳转到当前页面,也就是不进行跳转 也可以将文本提示转换成图片 在标签中,文本格式包括图片的border颜色都是浏览器自带的demo,在实际开发中,...默认情况性,target的值为_self即在当前页面跳转,我们可以将其修改为_blank,即创建一个新的页面 三.表格/列表标签 1.表格标签 在标签下大致有四种子标签,承担着一个表格的不同部分...tr表示表格中的一行 td表示一个单元格 th表示表格的头部 thead表示表格的头部区域,范围比th要大 周围元素的对齐方式 2.border表示边框 3.cellpadding内容距离边框的距离 4.cellspacing单元格之间的距离,默认为2 的属性有disc(实心圆), square(实心方形), circle(空心圆) --> 内容1</li

    14510

    绘图[上](四)

    setTextSize(); 设置字体的尺寸 setStyle(); 设置画笔的风格(空心或实心) setStrokeWidth(); 设置空心边框的宽度 getColor(); 获取画笔的颜色 Canvas...使用Path不仅可以绘制简单的图形(如圆形,矩形,直线等),也可以绘制复杂一些的图形(如正多边形,五角星等),还有绘制裁剪和绘制文本都会用到Path。...添加椭圆 addCircle 添加圆 addPah 添加路劲 addArc 添加圆弧 arcTo 圆弧 isEmpty 是否为空 isRect 是否为矩形 set 替换路劲 offset 偏移路劲 quadTo...使用Canvas和Paint画圆 首先创建一个新的类,集成于view类: HelloView.java文件: package com.example.user.test11; import android.content.Context...//画圆 canvas.drawCircle(width/2,height/2, raius, mPaint); } } 然后再activity_main.xml中添加

    76530

    创建canvas设置canvas尺寸绘制图形Canvas库

    我在此将常用的canvas使用场景罗列出来希望能帮助到大家。 创建canvas Canvas的创建很简单,只需要一个标签足以,而内部复杂的实现都交给浏览器搞定。...(Rect) 1、实心矩形(fillRect) 绘制实心矩形最简单的是用 fillRect(x, y, width, height) 方法,参数中 x, y 表示矩形左上角的坐标;width、height...2、空心矩形(strokeRect) 与绘制实心矩形类似的是使用 strokeRect(x, y, width, height) 方法绘制空心矩形。...,而是使用更加通用的方法arc(x, y, radius, startAngle, endAngle [, anticlockwise]) 绘制弧线,参数中 x, y 为圆心坐标;radius 为圆的半径...渲染器创建精美的数字内容 Paper.js: 矢量图形脚本中的瑞士军刀 - 使用HTML5 Canvas将Scriptographer移植到JavaScript和浏览器 P5.js: p5.js是一个客户端

    4.5K10

    Python之pygame学习绘制基本图形(3)

    pygame绘制 ✕ 这次来说下怎么绘制基本的图形,如矩形,圆,直线等等 ? 这图片的代码在最最最下面!! ?...width > 0 则表示线条粗细 如果使用width,边框的宽度不是很好控制 返回:一个矩形边界变化的像素,如果没有绘制任何东西,返回宽高为0代码演示: pygame.draw.rect(screen...) (可选)用于线条粗细或表示要填充矩形(不要与rect参数的宽度值混淆) 如果 width == 0 (默认)则填充内部是实心的内部全部填充颜色 如果 width > 0 则表示线条粗细,空心的代表线条宽度...如果使用width,边框的宽度不是很好控制 返回:一个矩形边界变化的像素,如果没有绘制任何东西,返回宽高为0代码演示: # 绘制一个多边形 pygame.draw.polygon(screen...绘制一个园 圆(表面,颜色,中心,半径) - >矩形 圆(表面,颜色,中心,半径,宽度= 0) - >矩形 参数: 表面:与矩形相同 颜色:与矩形相同 中心:元祖或列表指定一个点作为园的中心 半径:

    4.2K30

    web前端基础知识总结

    Center:居中 Class:用一个名称来标记标题,标记名称指向在外部定义的样式表 Id:为段落设置一个标记,将来可以在一个超链接中明确的引用这个标记,以便作为样式表的选择器 Style:创建标题内容的内联样式...,scrolldelay后跟毫秒,vspace和hspace 定义字幕与周围文字的距离 12、其他嵌入 (1)、标签用于往文档中嵌入对象 属性:classid(指定包含对象的位置) archive...>定义内联框架,在文档中定义一个独立的矩形区域,有独立的滚动条和边框 属性:class id style title frameborder name src marginwidth marginheight...media rel rev (4)/样式表语法 (a)、HTML重新定义标签样式表语法: exp: td{color:red;font-size:8pt} (b)、类样式表:能够在文档样式表或外部样式表中为同一个元素创建不同的样式...  决定列表项目所缩进的程度 属性值: List-style-type: disc 在文本行前加实心圆   circle 加空心圆   square 加实心方块  decimal  加阿拉伯数字 Lower-roman

    3.9K60

    Web前端上万字的知识总结

    )          coords(图像对光标敏感区域的坐标)     Shape的属性值:       Rect 矩形区域             circle  椭圆形区域        poly ...(交替进行滚动)       Scrollamount后跟数字越小越慢,scrolldelay后跟毫秒,vspace和hspace 定义字幕与周围文字的距离 12、其他嵌入   (1)、...:yes 出现边框          no 不出现边框   (3)、定义内联框架,在文档中定义一个独立的矩形区域,有独立的滚动条和边框     属性:class     id    style...HTML重新定义标签样式表语法:                 exp:        td{color:red;font-size:8pt}     (b)、类样式表:能够在文档样式表或外部样式表中为同一个元素创建不同的样式...List-style-type: disc 在文本行前加实心圆   circle 加空心圆   square 加实心方块  decimal  加阿拉伯数字       Lower-roman  小写罗马数字

    3.7K100

    【愚公系列】2023年11月 WPF控件专题 Ellipse控件详解

    欢迎 点赞✍评论⭐收藏前言WPF控件是Windows Presentation Foundation(WPF)中的基本用户界面元素。它们是可视化对象,可以用来创建各种用户界面。...原生控件是由Microsoft提供的内置控件,如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。...一、Ellipse控件详解Ellipse是WPF中的一个基本形状控件,用于绘制圆形或椭圆形。使用Ellipse控件可以绘制一个空心或实心的圆 或 椭圆。...,设置了控件的宽度和高度为50,并设置了填充颜色和边框颜色以及边框宽度。...绘制视觉效果,例如在创建鼠标悬停或按下效果时,可以在控件周围绘制一个圆形或椭圆形的边框,并在其中添加阴影或颜色变化等效果。

    80711

    HTML5-Canvas之矩阵和多边形的绘制(2)

    矩形的绘制一共有两个口令,分别是 ctx.fillRect(x, y, width, height) 和 ctx.strokeRect(x, y, width, height) ,参数中的 x 和 y...而 fillRect 表示绘制一个实心矩形,strokeRect 表示绘制一个描边矩形,我们来一个简单的例子: 效果如下 ---- 你也可以使用 Rect( x, y, width, height...) 的方法创建矩形路径,之后再通过 .stroke() 或 .fill() 方法来给矩形上色: 效果如下 ---- 上方我们绘制了两个默认黑色的实心和描边矩形,相信你也联想到上一章我们绘制线段时,...那么我们来给上方绘制了的实心矩形填充一个放射状渐变(黄-蓝-红),将描边矩形的描边设为绿色。...PS/AI中的径向渐变只需要这两个点)。

    1.5K20

    SwiftUI:自定义 Shape 使用 InsettableShape 协议实现向内绘制边框

    如果创建的形状没有特定大小,它将自动扩展以占据所有可用空间。...例如,这将创建一个填充我们视图的圆,并为其提供40点蓝色边框: struct ContentView: View { var body: some View { Circle()...您在这里看到的是SwiftUI在形状周围绘制边框的方式的副作用。如果您递给某人一个圆的铅笔轮廓,并要求他们用粗笔在该圆上画线,他们将绘制出该圆的精确线——大约一半的笔在该线的内部,一半在该线的外部。...:我们的所有边框都是可见的,因为Swift在圆的内部绘制而不是将圆作为绘制的中心。...这将获得插入量(笔画的线宽的一半),并应返回一种新的可插入形状——在我们的实例中,这意味着我们应该创建一个插入弧型。问题是我们不知道圆弧的实际大小,因为尚未调用path(in :)。

    1.8K40

    【OpenCV入门之十五】随心所欲绘制想要形状

    radius:圆形的半径。 color:线条的颜色。 thickness:如果是正数,表示组成圆的线条的粗细程度。否则,表示圆是否被填充。 line_type:线条的类型。...见 cvLine 的描述 shift:圆心坐标点和半径值的小数点位数。 画圆画点都是使用circle()函数来画,点就是圆,我们平常所说的圆只不过是半径大一点而已。...//画空心圆 Point p3(300, 300); circle(img,p3,100,Scalar(0,0,255),3);//第五个参数我们调高点,让线更粗 //画实心圆...rec:表征矩形的位置和长宽。 color:线条颜色 (RGB) 或亮度(灰度图像 )(grayscale image)。 thickness:组成矩形的线条的粗细程度。...取负值时(如CV_FILLED)函数绘制填充了色彩的矩形。 line_type:线条的类型。见cvLine的描述 shift:坐标点的小数点位数。

    1.8K30
    领券