iOS AutoLayout: XIB 设置 CALayer 属性

苹果的自动布局这套框架的确是好.

但是好的同时, 也给开发者带来了不小的挑战.
刚开始使用的时候, 还不如 Android 的 xml 布局好用, 虽然苹果多了可以拖拽的功能.

当你熟练使用后, 你会发现, 还真 TM 有那么回事.

之前有朋友私信问我, 平时在 iOS 开发中怎么书写 UI 布局的.

这里统一给出答复:

  1. 优先 AutoLayout.
  2. 其次 Masonry.
  3. 纯代码打造.

今天的任务

  1. 在 XIB 中给 UIView 添加几个 CALayer 相关的属性
  2. 在 XIB 中给 UIImageView 设置圆角

老规矩, 先看一下效果图.

1

在 CALayer.h 里面, 可以看到 Border 和 shadow 的属性定义.

/* The width of the layer's border, inset from the layer bounds. The
 * border is composited above the layer's content and sublayers and
 * includes the effects of the `cornerRadius' property. Defaults to
 * zero. Animatable. */

@property CGFloat borderWidth;

/* The color of the layer's border. Defaults to opaque black. Colors
 * created from tiled patterns are supported. Animatable. */

@property(nullable) CGColorRef borderColor;
/** Shadow properties. **/

/* The color of the shadow. Defaults to opaque black. Colors created
 * from patterns are currently NOT supported. Animatable. */

@property(nullable) CGColorRef shadowColor;

/* The opacity of the shadow. Defaults to 0. Specifying a value outside the
 * [0,1] range will give undefined results. Animatable. */

@property float shadowOpacity;

/* The shadow offset. Defaults to (0, -3). Animatable. */

@property CGSize shadowOffset;

/* The blur radius used to create the shadow. Defaults to 3. Animatable. */

@property CGFloat shadowRadius;

/* When non-null this path defines the outline used to construct the
 * layer's shadow instead of using the layer's composited alpha
 * channel. The path is rendered using the non-zero winding rule.
 * Specifying the path explicitly using this property will usually
 * improve rendering performance, as will sharing the same path
 * reference across multiple layers. Upon assignment the path is copied.
 * Defaults to null. Animatable. */

@property(nullable) CGPathRef shadowPath;

那么, 我们在 xib 中设置跟这两个相关的属性, 设置如下:

2

如果你的设置也像我一样, 那么 Run 一下吧!

我保证你看不到上面的效果(没有 Border 和 shadow 效果).

这个世界的牛人很多, 他们给出的解决方案就是重写 boderColor 和 shadowColor 这两个 property.

具体办法就是, 写个 CALayer 的 Category.

CALayer+MZXibConfig.h

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer (MZXibConfig)

- (void)setBorderColorXib:(UIColor *)color;

- (UIColor *)borderColorXib;

- (void)setShadowColorXib:(UIColor *)color;

- (UIColor *)shadowColorXib;

@end

CALayer+MZXibConfig.m

#import "CALayer+MZXibConfig.h"

@implementation CALayer (MZXibConfig)

// MARK: 设置 BorderColor

- (void)setBorderColorXib:(UIColor *)color
{
    self.borderColor = color.CGColor;
}

- (UIColor *)borderColorXib
{
    return [UIColor colorWithCGColor:self.borderColor];
}

// MARK: 设置 ShadowColor

- (void)setShadowColorXib:(UIColor *)color
{
    self.shadowColor = color.CGColor;
}

- (UIColor *)shadowColorXib
{
    return [UIColor colorWithCGColor:self.shadowColor];
}

@end

修改一下 xib 中设置的属性.

3

注意:
borderColor 改为了 borderColorXib
shadowColor 改为了 shadowColorXib

再 Run 一下, 你就能看到效果了.

这里还要提醒各位看官

shadowOpacity 一定要设置非0的值, 该值默认是0, 否则看不到 shadow 效果的. 别问我怎么知道, 看CALayer.h吧!

至于 UIImageView 设置圆角, 很简单了.

4

当你 Run 后,你发现然并卵!

我没有耍你, 是我们太年轻了.

好吧, 需要加个属性.

5

搞定!

写到这里, 本想收当睡觉, 但是怎么想那个 Category 的代码就是不美, 于是修改一下.

细心的读者可以发现, 上面那个 Category 头文件里面就是 set 和 get 的声明.

那我们是否可以简化一下代码?

使用强大的 property 属性.

那么, 问题来了

Category 中是不可以写成员变量的

那我们怎么可以这么做呢?

答案:

property 声明的属性, 编译器默认会声明set 和 get 方法.所以声明的不是成员变量, 而是成员方法.

使用 property 来声明CALayer+MZXibConfig.h

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer (MZXibConfig)

@property (nonatomic, weak) UIColor *borderColorXib;

@property (nonatomic, weak) UIColor *shadowColorXib;

@end

代码已经放在 github

©️2020 CSDN 皮肤主题: 酷酷鲨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值