我們的 APP 有一個這樣的畫面，它有這幾點需求：

• 要顯示文字描述在圖片上
• 文字描述的背景是漸層色
• 因為文字長度不同，所以漸層的高度也不同

最常見的作法

很直覺反應的，我在圖片上加了一個 UIView 當作 overlay，再放上 UILabel 顯示文字，然後在 overlay 插入一個 CAGradientLayer 顯示漸層 layer。這的確是可行的作法，也是網路上很常見的「建立漸層 View」的作法。只是一來我們得額外建立一個 layer，二來得想辦法讓 layer 隨著 overlay 調整尺寸，處理這些細節的程式碼有點不漂亮。

利用 layerClass

後來我發現 UIView 有個 + (Class)layerClass method 可以用，在預設的情況下，UIView 的背後其實是一個 CALayer，透過 override 這個 method，我們可以讓它變成其他的 layer，在這裡我要把它變成 CAGradientLayer。具體作法如下：

@implementation OverlayView
+ (Class)layerClass {
  return [CAGradientLayer class];
}

- (instancetype)initWithFrame:(CGRect)frame {
  if (self = [super initWithFrame:frame]) {
    CAGradientLayer *layer = (CAGradientLayer *)self.layer;
    UIColor *lightColor = [UIColor clearColor];
    UIColor *middleColor = [UIColor colorWithWhite:0 alpha:0.35];
    UIColor *anotherColor = [UIColor colorWithWhite:0 alpha:0.65];
    UIColor *darkColor = [UIColor colorWithWhite:0 alpha:0.8];
    layer.colors = @[(id)lightColor.CGColor, (id)middleColor.CGColor, (id)anotherColor.CGColor, (id)darkColor.CGColor];
    layer.locations = @[@(0), @(0.2), @(0.65), @(1)];
  }
  return self;
}
@end