iosxib 设置图片_iOS从Xib中设置样式

简介

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

也有人喜欢所见即所得 用storyboard和xib进行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+c与command+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 PathTypeValue

layer.cornerRadiusNumber2

layer.masksToBoundsBooleantrue

设置Border宽度和颜色

宽度好设置

Key PathTypeValue

layer.borderWidthNumber1

layer.borderUIColorColor选择对应的色值

添加如下类

CALayer+XibConfiguration.h:1

2

3

4

5

6#import

@interface (XibConfiguration)

@property(nonatomic, assign) UIColor* borderUIColor;

@end

CALayer+XibConfiguration.m:1

2

3

4

5

6

7

8

9

10

11#import "CALayer+XibConfiguration.h"

@implementation (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.h1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16#import

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.m1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41#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.swift1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58import 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.h1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16#import

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.m1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38#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.swift1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46import 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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值