前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >iOS XibKits-- Label内边距设置

iOS XibKits-- Label内边距设置

作者头像
星宇大前端
发布于 2020-01-13 06:50:15
发布于 2020-01-13 06:50:15
1.8K00
代码可运行
举报
文章被收录于专栏:大宇笔记大宇笔记
运行总次数:0
代码可运行

在使用Xib开发的时候,除了设置Label的外边距约束的时候,还会想设置下内边距即前端的padding,但Xib设置Label的padding并不直观,下面添加几个属性让Xib设置更简单。

目的


让XIb开发时更直观的设置Label的padding。

策略


  1. 使用@IBInspectable 暴露属性给Xib设置
  2. 修改Label边距
  3. 使用@IBDesignable 在Xib显示更改边距的Label

行动(代码)


代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@IBDesignable
class RadiusLabel: UILabel{

    private var padding = UIEdgeInsets.zero
    @IBInspectable
    var paddingLeft: CGFloat {
        get { return padding.left }
        set { padding.left = newValue }
    }
   
    @IBInspectable
    var paddingRight: CGFloat {
        get { return padding.right }
        set { padding.right = newValue }
    }
    
    @IBInspectable
    var paddingTop: CGFloat {
        get { return padding.top }
        set { padding.top = newValue }
    }
    
    @IBInspectable
    var paddingBottom: CGFloat {
        get { return padding.bottom }
        set { padding.bottom = newValue }
    }
    
    //重新绘制文本
    override func drawText(in rect: CGRect) {
        super.drawText(in: rect.inset(by: padding))
    }
    
    //重新text文字框大小
    override func textRect(forBounds bounds: CGRect, limitedToNumberOfLines numberOfLines: Int) -> CGRect {
        let insets = self.padding
        var rect = super.textRect(forBounds:bounds.inset(by: insets), limitedToNumberOfLines: numberOfLines)
        rect.origin.x -= insets.left
        rect.origin.y -= insets.top
        rect.size.width += (insets.left + insets.right)
        rect.size.height += (insets.top + insets.bottom)
        return rect
    }
}

使用


在Xib属性看到上下左右padding属性修改即可。

XibKits 源码地址

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/11/14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
(八十)c#Winform自定义控件-分割线标签
GitHub:https://github.com/kwwwvagaa/NetWinformControl
冰封一夏
2019/10/09
1K0
(八十)c#Winform自定义控件-分割线标签
知识图谱可视化前奏之d3.js
0.说在前面1.d3.js初识2.绘制完整的柱形图3.让图表动起来4.浅析Update、Enter、Exit5.交互式操作6.作者的话
公众号guangcity
2019/09/20
13.5K0
知识图谱可视化前奏之d3.js
Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局
简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 最新示例: 点击下载 项目简议: 如果再看到关于纯代码,xib或storyboa
ios122
2018/01/02
2.2K0
iOS从Xib中设置样式
iOS在写视图的有的人喜欢纯代码去写,从之前的绝对定位方式(Frame),到现在的自动布局(Autolayout),但这种方式的好处是便于复制修改和装X,但是缺点是代码不容易看,不便于修改
码客说
2019/10/22
2.5K0
JointJS 根据内容调整画布尺寸
用法 paper.fitToContent({ padding: 20, // 内容周围留白大小 allowNewOrigin: 'any' // 注意此配置如果不填,padding的top和left属性不会生效 }) 源码 fitToContent: function(gridWidth, gridHeight, padding, opt) { // alternatively function(opt) if (isObject$1(gridWidth)) { /
路过君
2021/12/07
4770
iOS 关于Interface Building 的一些小技巧
## 1. UIStackView StackView 是iOS9以后才有的,主要解决了组件排列布局复杂的问题,高效快速。
星宇大前端
2020/02/13
1.9K0
D3.js-柱形图
data()的工作过程: data()能将数组各项分别绑定到选择集的各元素上,并且能指定绑定的规则。当数组长度与元素数量不一致时,data()也能够处理。当数组长度大于元素数量时,为多余数据预留元素位置,以便将来插入新元素;当数组长度小于元素数量时,能够获取多余元素的位置,以便将来删除。 在D3中,根据数组长度和元素数量的关系,分别把各种情况归纳如下:
奋飛
2019/08/15
1.5K0
win10 uwp 气泡 WPF 气泡
假设尖头宽度 10 高度 5 ,那么可以看到第一个点是 (0,5) 第二个点是 (5,0) 第三个点是 (10,5)
林德熙
2018/09/18
1.5K0
win10 uwp 气泡
            WPF 气泡
UIImageView 使用 padding 为图片设置内边距的 2 种方案
一、前言 不像 Flutter / swiftUI 那样,UIimageView 并没有现成的 这里介绍两种为 UIImageView 内图片设置边距的方法均为自定义方法 二、方案 包括两种方案 第一种:借鉴 stackoverflow 上大佬提出的 第二种:我自己优化的 2.1 设置 UIImage 大小 先设置 UIImage 的大小,再将其放入 UIImageView 内 设置 contentMode 为 center 居中便可有 padding 效果 func imageWithImage(
圆号本昊
2021/09/24
2.4K0
UIImageView 使用 padding 为图片设置内边距的 2 种方案
《iOS UI 开发捷径 利用 Interface Builder 高效、优雅地开发 UI》 读书笔记第1章 Interface Bundle 概要第2章 使用 Interface Builder第3
第1章 Interface Bundle 概要 ---- Bundle 一种标准化的层次结构,保存了可执行代码及代码所需要的资源。 nib Next Interface Builder Interface Builder 的优点 开发和维护效率高 减少大量的 UI 代码和“胶水代码” 适配变得十分简单 IB 也可以做一些非 UI 的事情 利用 IB 学习控件可以达到事半功倍的效果 Interface Builder 的缺点 IB 的执行效率没有纯代码高 使用 IB 开发的过程中容易出现一些小问题 有一定的学
iOSDevLog
2018/05/17
2.6K0
教你玩转 Android RecyclerView:深入解析 RecyclerView.ItemDecoration类(含实例讲解)
注意点1:Itemdecoration的onDraw()绘制会先于ItemView的onDraw()绘制,所以如果在Itemdecoration的onDraw()中绘制的内容在ItemView边界内,就会被ItemView遮挡住。如下图:
Carson.Ho
2019/02/22
2K0
New UWP Community Toolkit - Staggered panel
概述 前面 New UWP Community Toolkit 文章中,我们对 2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 Staggered panel,本篇我们结合代码详细讲解  St
Shao Meng
2018/04/28
1.1K0
New UWP Community Toolkit - Staggered panel
RecyclerView源码解析(二)LinearLayoutManager绘制篇
上一篇介绍了RecyclerView的绘制框架,了解到RecyclerView及其子view的具体绘制工作是通过具体的LayoutManager中的onLayoutChildren和setMeasuredDimension实现的。
好好学习吧
2021/11/25
1.3K0
【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
下图中 , 中心 100 x 100 像素 的 是内容 , 内容外侧 , 边框内侧 , 就是 内边距 范围 ;
韩曙亮
2023/03/30
9380
【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
编码篇-iOS开发中的奇巧小伎
最近搜集了自己以前的笔记中的一些小知识点,归为这篇文章,都是亲测有效的奇巧小伎,当你使用到时,你会大呼过瘾的。
進无尽
2018/09/12
5.5K0
编码篇-iOS开发中的奇巧小伎
【IOS开发基础系列】UIButton专题
//需要导入框架QuartzCore.framework,并且在当前类中引用#import
江中散人_Jun
2023/10/16
3630
【IOS开发基础系列】UIButton专题
RecyclerView定制:通用ItemDecoration及全展开RecyclerView的实现不同场景RecyclerView实现
Android L面世之后,Google就推荐在开发项目中使用RecyclerView来取代ListView,因为RecyclerView的灵活性跟性能都要比ListView更强,但是,带来的问题也不少,比如:列表分割线都要开发者自己控制,再者,RecyclerView的测量与布局的逻辑都委托给了自己LayoutManager来处理,如果需要对RecyclerView进行改造,相应的也要对其LayoutManager进行定制。本文主要就以以下场景给出RecyclerView使用参考: RecyclerVie
看书的小蜗牛
2018/06/29
2.7K0
【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡
SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形,除了 IE8 之前的版本外,绝大部分浏览器都支持 SVG,可将 SVG 文本直接嵌入 HTML 中显示。
前端修罗场
2023/10/07
9340
【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡
D3比例尺与坐标轴
例如[0, 1]对应到[0, 300],当输入0.5时,输出150。或者将[0, 1, 2]对应到["red", "green", "blue"],当输入2时,输出blue。
前端_AWhile
2020/05/18
3.1K0
android gridview几个重要属性(android:listSelector自带内部padding分析)
该文章讲述了android GridView中列表项被点击后,列表项中图片的缩放和居中显示问题。介绍了三种设置图片缩放和居中显示的方式,以及自定义列表项中图片的Uri的来源。同时介绍了如何设置列表项的按下效果,以及如何解决系统默认的listSelector导致的padding问题。
用户1155943
2018/01/04
1.2K0
推荐阅读
相关推荐
(八十)c#Winform自定义控件-分割线标签
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验