首页
学习
活动
专区
工具
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

79341

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要大 <!...1.align表格整体相对于周围元素对齐方式 2.border表示边框 3.cellpadding内容距离边框距离 4.cellspacing单元格之间距离,默认为2 <!...-- type属性有disc(实心), square(实心方形), circle(空心) --> 内容1</li

12210

绘图[上](四)

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添加

73730

创建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.4K10

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

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

4K30

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.8K60

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

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.3K20

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

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

58411

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

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

1.7K40
领券