如題，在工作中經常會遇見奇葩設計出的奇葩設計圖，這次先來說一下 設計給的漸變顏色按鈕 如下圖

如何實現呢？

新建一個View作為一個button，對這個View的圖層進行操作，首先是可以傳遞訊息 ，然後根據改變圓角 新增漸變

   UIView *intbirView = [[UIView alloc]initWithFrame:CGRectMake((ScreenWidth-205)/2, ScreenHeight/2, 205, 44)];
    intbirView.userInteractionEnabled = YES;  //確保可以傳遞訊息
    intbirView.layer.cornerRadius = 22;
    intbirView.layer.masksToBounds = YES;     //圓角
    [intbirView.layer addSublayer:[self setGradualChangingColor:intbirView fromColor:@"F7F78C" toColor:@"F8FAD8"]];      //漸變開始
    [self.view addSubview:intbirView];
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(inivtedFirend)]; //新增手勢
    [intbirView addGestureRecognizer:tap];
    
    UILabel *label = [[UILabel alloc]init];
    label.text = @"邀請好友";
    label.textColor = [UIColor colorWithRed:248/255.0 green:105/255.0 blue:82/255.0 alpha:1/1.0];
    label.font =  [UIFont fontWithName:@"PingFangSC-Medium" size:20];
    label.textAlignment = NSTextAlignmentCenter;
    [intbirView addSubview:label];
    label.sd_layout
    .centerYEqualToView(intbirView)
    .centerXEqualToView(intbirView)
    .heightIs(28).widthIs(100);
 

漸變的具體方法 也就是上文程式碼裡的 [self setGradualChangingColor:intbirView fromColor:@"F7F78C" toColor:@"F8FAD8"] 這個方法 所需引數一個是開始時的顏色 後面是結束時的顏色，返回一個 CAGradientLayer  新增到View的圖層上

//繪製漸變色顏色的方法
- (CAGradientLayer *)setGradualChangingColor:(UIView *)view fromColor:(NSString *)fromHexColorStr toColor:(NSString *)toHexColorStr{
    
    //    CAGradientLayer類對其繪製漸變背景顏色、填充層的形狀(包括圓角)
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = view.bounds;
    
    //  建立漸變色陣列，需要轉換為CGColor顏色 （因為這個按鈕有三段變色，所以有三個元素）
    gradientLayer.colors = @[(__bridge id)[self colorWithHex:fromHexColorStr].CGColor,(__bridge id)[self colorWithHex:toHexColorStr].CGColor,
                             (__bridge id)[self colorWithHex:fromHexColorStr].CGColor];
    
    
    //  設定漸變顏色方向，左上點為(0,0), 右下點為(1,1)
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    gradientLayer.endPoint = CGPointMake(1, 0.5);
    
    //  設定顏色變化點，取值範圍 0.0~1.0 （所以變化點有三個）
    gradientLayer.locations = @[@0,@0.5,@1];
    
    return gradientLayer;
}
 

顏色方法

//獲取16進位制顏色的方法
-(UIColor *)colorWithHex:(NSString *)hexColor {
    hexColor = [hexColor stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
    if ([hexColor length] < 6) {
        return nil;
    }
    if ([hexColor hasPrefix:@"#"]) {
        hexColor = [hexColor substringFromIndex:1];
    }
    NSRange range;
    range.length = 2;
    range.location = 0;
    NSString *rs = [hexColor substringWithRange:range];
    range.location = 2;
    NSString *gs = [hexColor substringWithRange:range];
    range.location = 4;
    NSString *bs = [hexColor substringWithRange:range];
    unsigned int r, g, b, a;
    [[NSScanner scannerWithString:rs] scanHexInt:&r];
    [[NSScanner scannerWithString:gs] scanHexInt:&g];
    [[NSScanner scannerWithString:bs] scanHexInt:&b];
    if ([hexColor length] == 8) {
        range.location = 4;
        NSString *as = [hexColor substringWithRange:range];
        [[NSScanner scannerWithString:as] scanHexInt:&a];
    } else {
        a = 255;
    }
    return [UIColor colorWithRed:((float)r / 255.0f) green:((float)g / 255.0f) blue:((float)b / 255.0f) alpha:((float)a / 255.0f)];
}
 

快來試試吧～