SA001-借助IBInspectable和约束定制1像素宽的线(view)

注意,本文的解决方案假定你:

a.使用storyboard或者xib;

b.使用autolayout自动布局;

c.使用swift而非Objective-C语言。

在进行产品开发的时候,我们经常遇到UI设计师给出1像素宽的间隔线。而这

种1像素宽的线,通常我们可以拖上一个view,将其宽或者高度设置为1。这在非

Retina屏上是没有问题的:1像素刚好对应的就是我们编程中的1个point,但在Retina

一个point则被映射成了2个像素,而在storyboard中设置约束或者frame的时候你是

没法设置小于1的值的,也即系统默认最小单位是1.该怎么办呢?

目前我想到了这样的一个方法:使用autolayout的情况下,在storyboard中,我

们按照一个点位(Point)布局我们的间隔线,这里我们用一个普通UIView将其宽度

或者高度约束设置为1(如果是横线设定高为1;如果竖线则定宽为1)。然后我们将

这个view的类名修改为我们定制的类名:SA01BorderLineView(继承自UIView)。

然后在这个类的重载方法layoutSubviews中,遍历其约束,找到定宽或者定高的约

束,根据屏幕是否是Retina屏来动态的修改约束的高度或者宽度值。

在下面的示例代码中,我们将通过对比普通view来看是否我们达到了预期效果:

首先定制一个SA01BorderLineView,直接继承自UIView,重载UIView的layoutSubviews

方法,遍历其约束,查找到定宽或者定高的约束(根据当前是横线还是竖线)。代

码如下:

@IBDesignable class SA01BorderLineView: UIView {

    @IBInspectable var isHorizontal: Bool = false

    override func layoutSubviews() {
        super.layoutSubviews()
        let layoutAttribute = self.isHorizontal ? NSLayoutAttribute.Height : NSLayoutAttribute.Width
        for item in self.constraints() {
            let constraint = item as NSLayoutConstraint
            if constraint.firstItem as UIView == self && constraint.firstAttribute == layoutAttribute {
                self.removeConstraint(constraint)
                constraint.constant = 1 / UIScreen.mainScreen().scale
                self.addConstraint(constraint)
            }
        }
    }

}

注意代码中使用到了@IBInspectable和@IBDesignable,这两个关键字是swift

新引入的,用于定制的view等视图空间在xib或者storyboard中实现可视化定制新增

变量和实时渲染的功能。这里主要是因为我们引入了一个判断是否是横线的新增变量

:isHorizontal,想再storyboard中使用这个view的时候就能在storyboard中直接修改

它的值。截屏如下:

使用了IBInspectable关键字之后,能够在storyboard中直接修改相关属性值(方法1:通过runtime设置)

使用了IBInspectable关键字之后,能够在storyboard中直接修改相关属性值(方法2:通过类属性表设置)

运行效果图:

示例代码github地址:https://github.com/lihux/iLihuxDailyAccumulates,该仓库包含

两个工程,源码在swift工程的accumulates->A001文件夹下。

时间: 2024-11-07 15:54:22

SA001-借助IBInspectable和约束定制1像素宽的线(view)的相关文章

实现一个在autolayout下有宽度约束后,自动确定高度的view

我曾经遇到过一个问题:需要实现一个自定义的label(类似于UILabel),同时需要兼顾UILabel的大小自适应的特性.这个label通常宽度是固定的,通过autolayout指定其宽度约束,但不指定高度,让其根据内容自适应. 我们知道UIView的方法intrinsicContentSize可以帮助我们确定视图在autolayout下的大小,从而避免我们去设置其宽高的约束.于是我采用了这样的解决方案:将label的宽度作为其属性,使用前我必须指定label的宽度,然后label本身通过其宽

像素、摄像机线数与分辨率关系

700线 976*582 650线 976*582 600线 752*582 540线 752*582 420线 500*582 500万像素 有效4915200 像素2560×1920 400万像素 有效3871488 像素2272×1704 300万像素 有效3145728 像素2048×1536 200万像素 有效1920000 像素1600×1200 130万像素 有效1228800 像素1280×960 80万像素 有效786432  像素1024×768 50万像素 有效480000

Python 获取图片像素宽高信息

# coding: utf8 from PIL import Image img = Image.open("img.jpg") print img.size

iOS 绘制1像素的线

一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮助我们处理Point到Pixel的转换. 这样做的好处隔离变化,即我们在布局的事后不需要关注当前设备是否为Retina,直接按照一套坐标系统来布局即可. 实际使用中我们需要牢记下面这一点: One point does not necessarily correspond to one physical pixel. 1

iOS如何正确绘制1像素的线

一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设备时会帮助我们处理Point到Pixel的转换.这样做的好处隔离变化,即我们在布局的时候不需要关注当前设备是否为Retina,直接按照一套坐标系统来布局即可. 实际使用中我们需要牢记下面这一点: One point does not necessarily correspond to one physical pixel. 1 P

iOS: 如何正确的绘制1像素的线

一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮助我们处理Point到Pixel的转换. 这样做的好处隔离变化,即我们在布局的事后不需要关注当前设备是否为Retina,直接按照一套坐标系统来布局即可. 实际使用中我们需要牢记下面这一点: 1 One point does not necessarily correspond to one physical pixel.

iOS开发>学无止境 - 如何正确的绘制1像素的线

一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮助我们处理Point到Pixel的转换. 这样做的好处隔离变化,即我们在布局的事后不需要关注当前设备是否为Retina,直接按照一套坐标系统来布局即可. 实际使用中我们需要牢记下面这一点: One point does not necessarily correspond to one physical pixel. 1

React-Native 高仿“掘金”客户端

历时3周时间不到的时间,前两周还有考试,利用一些琐碎的时间,终于把这个App基本的界面功能完成了.先来上图一张 采用React-Native 0.36版本开发的,算是踩了不少坑,来简单总结一下吧. 讲真,一款应用的用户忠诚度,UI绝对占有很大的关系,这也是我模仿掘金客户端的一个理由吧,里面涉及到的界面够花哨.就拿首页这张图来说, 要实现这么一个图,需要层层嵌套,还要考虑左右对齐问题,所以基本这个"首页"布局能做出来,大部分布局基本都能搞定了,也基本就是一看就知道应该怎么布,我在做完这个

iPhone 6 屏幕揭秘

几天前,Apple发布了iPhone 6 Plus. 新的iPhone大幅改变了图像在屏幕上渲染的方式.我们做了一个图表进行详细分析. 320 × 480375 × 667414 × 736320 × 480750 × 13341242 × 22081080 × 19203.5″4.7″5.5″iPhone 6 Plus的屏幕像素分辨率比之前步骤渲染的图像分辨率低.在图像显示在屏幕之前,图像必须重新调整大小到更低的像素分辨率.物理像素最初,所有图像的坐标都是用点的方式确定的.点是绝对单位,他们只