iOS从Xib中设置样式

2019-10-22 14:28:56 浏览数 (1)

简介

iOS在写视图的有的人喜欢纯代码去写,从之前的绝对定位方式(Frame),到现在的自动布局(Autolayout),但这种方式的好处是便于复制修改和装X,但是缺点是代码不容易看,不便于修改

也有人喜欢所见即所得 用storyboardxib进行view的生成,这种方式运行效率是会降低,但现在的手机配置基本可以忽略这点弊端,官方也推荐这种方式

常用技巧

选中View

当你想直接在view中选择自己想要的元素时,但是又碍于一个view上叠加的元素太多很难直接选中,那么在这时,你同时按住键盘上的shift和 control键,然后在你想选择的元素上点击鼠标,会弹出一个窗口,上面罗列了鼠标点击的位置下所有存在的元素,然后你再去进行选择会变的异常的简单。

添加AutoLayout边距约束时如何不使用margin约束

通常我习惯于在xib或者StoryBoard中用右键drag拖线的方式设置autolayout约束,但是默认的autolayout边距约束可能是带margin的,也就是默认”Constrain to margin“是勾选的,这会导致约束值出现类似于Superview.Leading Margin这种的约束。而经过我的测试发现在Xcode6.1和Xcode6.4下这个margin可能表现行为还不一样。

为了避免麻烦,还是不用margin约束比较好,如何在添加约束时不使用margin约束呢?当然你可以去掉Constrain to margin的勾选,不过这要是一个一个去掉勾选也是挺烦的事情,而且对旧项目来说这可能又会导致原来布局好的视图产生变动。

简单的办法还是用快捷键,就是在drag后按option,显示的约束就没有margin了。注意次序,一定要先drag后按option,如果是先按option再drag,或者drag与按住option同时开始是无效的。

快速在文件树中切换到当前文件

在Xcode中经常会遇到跳转比较多的情形,有时候若跳转到某个m文件,然后又想在左边的文件目录中切换选中文件为当前打开的文件,可以用Cmd Shift J来操作

显示或隐藏Debug和Console

ctrl shift q 隐藏和显示Debug区

cmd shift c 显示Console

复制View

想要在xib或者storyboard里面复制一个控件?选中控件直接command d吧,至少比command ccommand v节省一半时间吧?

连线

想拖线还得手动点双环按钮分屏? 凹凸啦!没错就是command option enter让你一秒分屏! command enter取消分屏

属性查看器

想在IB里面瞧瞧属性查看器,command option 0就够啦.

项目中找类

下面这个是节约时间的大功臣:command shift o(字母O),在文件数目庞大的工程里效果尤为显著,可以让你在茫茫”类”海中找到你的那个它.

项目中找文件

有时候想搜索一个文件,常规的做法是鼠标点击左下角的搜索框,再输入文字,这太慢了,快捷键是:Cmd Option J

.h和.m切换

我在.h和.m直接切换从来不用触摸板和鼠标,因为command control ⬆command control ⬇会帮我搞定一切.

view位置

添加约束的时候,谁说控件A要放在控件B的下侧才能设置到A到B在y轴方向上的距离? 试试看选中A控件, 按住control键同时把A往B的身上拖,直到B发亮再松手. 如果没用过这招, 肯定惊喜.

快速敲block

每次敲block是不是很头疼括号,尖括号什么的,试着敲个inline看Xcode的提示再回车,还头疼吗?

添加第三方字体

把字体ttf文件像普通文件加入到项目中,在xib或storyboard中就可以直接使用新字体了

属性设置

但是很多属性的设置 在xib中是不能完全自定义的,作为一个喜欢用xib这种方式的码客来说,当然能最大限度的使用xib可自定义的属性当然是极好的,下面就说一下一些不常用的从xib中可设置的属性

这些属性的设置在右面设置菜单的第三个选项卡User Defined Runtime Attributes中设置

添加一项后 一定要先设置Type,因为设置Type后其它会重置

设置圆角

Key Path

Type

Value

layer.cornerRadius

Number

2

layer.masksToBounds

Boolean

true

设置Border宽度和颜色

宽度好设置

Key Path

Type

Value

layer.borderWidth

Number

1

layer.borderUIColor

Color

选择对应的色值

添加如下类

CALayer XibConfiguration.h:

代码语言:javascript复制
#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>
@interface CALayer(XibConfiguration)
// This assigns a CGColor to borderColor.
@property(nonatomic, assign) UIColor* borderUIColor;
@end

CALayer XibConfiguration.m:

代码语言:javascript复制
#import "CALayer XibConfiguration.h"
@implementation CALayer(XibConfiguration)
-(void)setBorderUIColor:(UIColor*)color
{
    self.borderColor = color.CGColor;
}
-(UIColor*)borderUIColor
{
    return [UIColor colorWithCGColor:self.borderColor];
}
@end

设置属性更好的方法

Xcode 6以上支持一种新的方法,特好用

其实就是为UIView添加扩展 或 继承 添加IBInspectable的属性 既可以图形化设置某些属性

这样在右侧的第四个选项卡中神奇的出现了自定义的设置项

OC下的实现方式(扩展)

UIView Border&CornerRadius.h

代码语言:javascript复制
#import <UIKit/UIKit.h>

IB_DESIGNABLE  // 动态刷新

@interface UIView(border_cornerRadius)

// 注意: 加上IBInspectable就可以可视化显示相关的属性哦
/** 可视化设置边框宽度 */
@property (nonatomic, assign)IBInspectable CGFloat borderWidth;
/** 可视化设置边框颜色 */
@property (nonatomic, strong)IBInspectable UIColor *borderColor;

/** 可视化设置圆角 */
@property (nonatomic, assign)IBInspectable CGFloat cornerRadius;

@end

UIView Border&CornerRadius.m

代码语言:javascript复制
#import "UIView Border&CornerRadius.h"

@implementation UIView(border_cornerRadius)

/**
 *  设置边框宽度
 *
 *  @param borderWidth 可视化视图传入的值
 */
@dynamic borderWidth;
- (void)setBorderWidth:(CGFloat)borderWidth {
    
    if (borderWidth < 0) return;
    
    self.layer.borderWidth = borderWidth;
}

/**
 *  设置边框颜色
 *
 *  @param borderColor 可视化视图传入的值
 */
@dynamic borderColor;
- (void)setBorderColor:(UIColor *)borderColor {
    
    self.layer.borderColor = borderColor.CGColor;
}

/**
 *  设置圆角
 *
 *  @param cornerRadius 可视化视图传入的值
 */
@dynamic cornerRadius;
- (void)setCornerRadius:(CGFloat)cornerRadius {
    
    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = cornerRadius > 0;
}

@end

Swift下的实现方式(扩展)

UIView Border&CornerRadius.swift

代码语言:javascript复制
import Foundation
import UIKit
extension UIView {
    
    @IBInspectable var cornerRadius: CGFloat {
        get{
            return layer.cornerRadius;
        }
        
        set(newValue) {
            layer.cornerRadius = newValue;
        }
    }
    
    @IBInspectable var masksToBounds: Bool {
        get{
            return layer.masksToBounds;
        }
        
        set(newValue) {
            layer.masksToBounds = newValue
        }
    }
    
    @IBInspectable var borderColor: UIColor? {
        get {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            return nil
        }
        set(newValue) {
            layer.borderColor = newValue?.cgColor
        }
    }
    
    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set(newValue) {
            if(newValue != 0){
                layer.borderWidth = newValue
            }   
        }
    }
    
    @IBInspectable var borderPX: CGFloat {
        get {
            return layer.borderWidth
        }
        set(newValue) {
            if(newValue != 0){
                layer.borderWidth = newValue / UIScreen.main.scale
            }
        }
    }
}

这样你所有的View都可以设置Border和圆角了


如果你不想让每个View都这样,你可以使用继承的形式,不过像圆角这类的属性 还是以扩展的方式比较好

下面说一下 继承的方式

OC下的实现方式(继承)

UIView Border&CornerRadius.h

代码语言:javascript复制
#import <UIKit/UIKit.h>

IB_DESIGNABLE  // 动态刷新

@interface UIViewBorderCornerRadius : UIView

// 注意: 加上IBInspectable就可以可视化显示相关的属性哦
/** 可视化设置边框宽度 */
@property (nonatomic, assign)IBInspectable CGFloat borderWidth;
/** 可视化设置边框颜色 */
@property (nonatomic, strong)IBInspectable UIColor *borderColor;

/** 可视化设置圆角 */
@property (nonatomic, assign)IBInspectable CGFloat cornerRadius;

@end

UIView Border&CornerRadius.m

代码语言:javascript复制
#import "UIView Border&CornerRadius.h"

@implementation UIViewBorderCornerRadius

/**
 *  设置边框宽度
 *
 *  @param borderWidth 可视化视图传入的值
 */
- (void)setBorderWidth:(CGFloat)borderWidth {
    
    if (borderWidth < 0) return;
    
    self.layer.borderWidth = borderWidth;
}

/**
 *  设置边框颜色
 *
 *  @param borderColor 可视化视图传入的值
 */
- (void)setBorderColor:(UIColor *)borderColor {
    
    self.layer.borderColor = borderColor.CGColor;
}

/**
 *  设置圆角
 *
 *  @param cornerRadius 可视化视图传入的值
 */
- (void)setCornerRadius:(CGFloat)cornerRadius {
    
    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = cornerRadius > 0;
}

@end

Swift下的实现方式(继承)

UIViewBorderCornerRadius.swift

代码语言:javascript复制
import Foundation
import UIKit

@IBDesignable
class UIViewBorderCornerRadius : UIView{
    @IBInspectable var cornerRadius: CGFloat {
        get{
            return layer.cornerRadius;
        }
        
        set(newValue) {
            layer.cornerRadius = newValue;
        }
    }
    
    @IBInspectable var masksToBounds: Bool {
        get{
            return layer.masksToBounds;
        }
        
        set(newValue) {
            layer.masksToBounds = newValue
        }
    }
    
    @IBInspectable var borderColor: UIColor? {
        get {
            if let color = layer.borderColor {
                return UIColor(CGColor: color)
            }
            return nil
        }
        set(newValue) {
            layer.borderColor = newValue?.CGColor
        }
    }
    
    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set(newValue) {
            layer.borderWidth = newValue
        }
    }
}

0 人点赞