让 xib / StoryBoard 的约束和字体大小自适应屏幕

2018-07-23 本文已影响155人大青虫Insect

概述

关于纯代码和 xib / StoryBoard 构建UI 的争论在 iOS 开发中似乎从未停止过。本篇文章我们不讨论二者孰优孰劣，只简单的为 xib / StoryBoard 扩展一些实用属性，让我们的 IB 更加顺手。

xib / Storyboard 的局限性

使用 xib / Storyboard 这类可视化工具开发，最大的优点来自于构建 UI 方便、快捷、直观。但是同样的开发时也会有很多的局限性，这里我们先不谈继承和复用，试想有这样两个场景。

需要在不同尺寸的屏幕上显示不同大小的字体。这点用纯代码很容易实现，或者是把 IB 中的视图拖线出去再用代码设置也能实现。
那么有没有方法可以直接就在 IB 中设置，自动按屏幕比例去放大和缩小字体呢?

有一个控件，假如为它设置了一个相对于左边30，顶部60，宽高100的约束。能不能让他在不同尺寸的屏幕上，按屏幕比例去自适应控件的大小和间距呢。
同样的用纯代码布局或者把控件的约束拖线出去用代码设置也能实现，那么有没有方法可以直接就在 IB 中设置呢？

其实要想实现以上效果都非常简单，本篇将提供 OC + Swift 双版本的代码。

让 IB 拥有自适应的属性

日常开发中， UI 通常只会为我们标注一种屏幕尺寸的图，具体对于不同屏幕大小的适配得自己去处理。

比如刚刚的第二个例子，在5.5寸屏幕下，UI 告诉你一个控件，相对于左边30，顶部60，宽高100。当然你也可以直接使用这个约束让所有尺寸设备都显示这个约束，但大多数时候，这种固定约束的显示效果都是不尽人意的。

这时候我们就需要按比例去动态计算实际的约束大小了，由于水平向和竖直方向的缩放比例是不同的，我们把约束计算区分成横向和纵向，算法就是非常简单的比例转换。

横向：当前的屏幕宽度 / UI 给你标注图的设备宽度(比如说5.5寸设备的414) * 你需要缩放的值(比如说30)
纵向：当前的屏幕高度 / UI 给你标注图的设备高度(比如说5.5寸设备的736) * 你需要缩放的值(比如说60)

转换成代码，实际的屏幕尺寸按 UI 给你的图来修改，这里用5.5寸的。

#define KScaleH(c) [[UIScreen mainScreen] bounds].size.width / 414 * c
#define KScaleV(c) [[UIScreen mainScreen] bounds].size.width / 736 * c

Swift

private func KScaleH(_ c: CGFloat) -> CGFloat {
    return UIScreen.main.bounds.width / 414 * c
}

private func KScaleV(_ c: CGFloat) -> CGFloat {
    return UIScreen.main.bounds.width / 736 * c
}

以上把大概原理说完，我们就要写具体的实现了。首先，为了能在 xib / StoryBoard 中直接设置属性，我们需要了解两个关键词@IBDesignable 和 @IBInspectable，这俩是 iOS8 的新特性，可以实时渲染在interface builder上，并且直接修改就能发生变化。这里我们主要使用 @IBInspectable

我们创建一个 NSLayout 的 Category / Extension，添加 @IBInspectable 属性

OC（Category）

/** 水平方向约束*/
@property (nonatomic, assign)IBInspectable CGFloat horizontalConstant;
/** 竖直方向约束 */
@property (nonatomic, assign)IBInspectable CGFloat verticalConstant;

Swift（Extension）

/// 水平方向约束
@IBInspectable var horizontalConstant: CGFloat
/// 竖直方向约束
@IBInspectable var verticalConstant: CGFloat

添加完成之后在 xib / StoryBoard 中就能看到效果了，所有拖出来的约束都拥有了这两个属性

以上都是简单的声明属性，还没有具体的实现，现在我们用 Runtime 为属性添加实现。

static void *horizontal_key = &horizontal_key;
static void *vertical_key = &horizontal_key;

- (void)setHorizontalConstant:(CGFloat)horizontalConstant {
    
    self.constant = KScaleH(horizontalConstant);
    objc_setAssociatedObject(self, &horizontal_key, @(horizontalConstant), OBJC_ASSOCIATION_ASSIGN);
}

- (CGFloat)horizontalConstant {
    return [objc_getAssociatedObject(self, &horizontal_key) floatValue];
}

- (void)setVerticalConstant:(CGFloat)verticalConstant {
    
    self.constant = KScaleV(verticalConstant);
    objc_setAssociatedObject(self, &vertical_key, @(verticalConstant), OBJC_ASSOCIATION_ASSIGN);
}

- (CGFloat)verticalConstant {
    return [objc_getAssociatedObject(self, &vertical_key) floatValue];
}

Swift

private var horizontal_key = 100
private var vertical_key = 200
/// 水平方向约束
@IBInspectable var verticalConstant: CGFloat {
    
    set {
        
        constant = KScaleV(verticalConstant)
        objc_setAssociatedObject(self, &vertical_key, newValue, .OBJC_ASSOCIATION_ASSIGN)
    }
    get {
        
        if let vc = objc_getAssociatedObject(self, &vertical_key) as? CGFloat {
            return vc
        }
        return constant
    }
}

/// 竖直方向约束
@IBInspectable var horizontalConstant: CGFloat {
    
    set {
        
        constant = KScaleH(horizontalConstant)
        objc_setAssociatedObject(self, &horizontal_key, newValue, .OBJC_ASSOCIATION_ASSIGN)
    }
    get {
        
        if let hc = objc_getAssociatedObject(self, &horizontal_key) as? CGFloat {
            return hc
        }
        return constant
    }
}

好了，现在我们的自适应约束就完成了，接下来再设置字体大小自适应，相信看到这里你心里也有了个大概，只要把上面的约束值换成字体大小即可，字体通常我们只需要用水平方向的比例去缩放。

这里需要注意的是，由于苹果的限制，我们是不能直接为 UIFont 对象添加 @IBInspectable 的，所以我们只能添加字体大小的属性，具体的字体类型再从实际的设置中取到，这点还是比较遗憾的。

这里我们只为 UILabel 的字体大小添加了扩展，其他的 UIButton、UITextView 等等都是一样的思路，代码我就不贴了，有不懂的可以留言。

static void *fitFontSize_key = &fitFontSize_key;

- (void)setFitFontSize:(CGFloat)fitFontSize {
    
    self.font = [UIFont fontWithName:self.font.fontName size:KScaleH(fitFontSize)];
    objc_setAssociatedObject(self, &fitFontSize_key, @(fitFontSize), OBJC_ASSOCIATION_ASSIGN);
}

- (CGFloat)fitFontSize {
    return [objc_getAssociatedObject(self, &fitFontSize_key) floatValue];
}

Swift

@IBInspectable var fitFontSize: CGFloat {

    set {

        font = UIFont(name: font.fontName, size: KScaleH(fitFontSize))
        objc_setAssociatedObject(self, &fitFontSizeKey, newValue, .OBJC_ASSOCIATION_ASSIGN)
    }
    get {

        if let fs = objc_getAssociatedObject(self, &fitFontSizeKey) as? CGFloat {
            return fs
        }
        return font.pointSize
    }
}

最后看一下运行效果，Demo 地址 Fit_Demo

让 xib / StoryBoard 的约束和字体大小自适应屏幕

概述

xib / Storyboard 的局限性

让 IB 拥有自适应的属性

猜你喜欢

热点阅读