干貨！老司機工作中用到的自定義控件，總有一個適合你的（一）

今天總結(jié)了一下平時工作中為那些奇葩的UI設(shè)計自定義的控件，下面一個個分享給大家。

一、第一個是tableView的透明度漸變效果

1、效果:

很多app用到了這種效果，比如歌詞顯示、直播間聊天記錄等。
大致效果如下：

WZBGradualTableView
WZBGradualTableView

背景圖片截取自新浪直播，侵立刪
背景圖片截取自新浪直播，侵立刪
2、使用方法：
/*
 * frame：tableView的frame
 * direction：透明漸進的方向
 * gradualValue：透明范圍值，如果只有一個方向，此值傳一個NSNumber、NSString即可，值的范圍0—1。如果是兩個方向，則需要傳一個數(shù)組，數(shù)組里邊傳兩個NSNumber或者NSString
 ***/
+ (instancetype)gradualTableViewWithFrame:(CGRect)frame direction:(WZBTableViewGradualDirection)direction gradualValue:(id)gradualValue;

參數(shù)值說明一下，direction代表方向，是一個位移枚舉，如果想讓tableView頂部漸變，則此值為WZBTableViewGradualDirectionTop，如果為底部漸變，則此值為WZBTableViewGradualDirectionBottom，如果上下都要漸變，則需要WZBTableViewGradualDirectionTop | WZBTableViewGradualDirectionBottom。gradualValue代表漸變范圍值，值的范圍為0-1，如果想讓頂部20%漸變，此值為@(0.2)。如果想頂部底部都有20%漸變，此值為@[@(0.2), @(0.2)]。

如下：

WZBGradualTableView *tableView = [WZBGradualTableView gradualTableViewWithFrame:self.view.bounds direction:(WZBTableViewGradualDirectionTop | WZBTableViewGradualDirectionBottom)  gradualValue:@[@(.3), @0.3]];

則顯示效果為：

WZBGradualTableView
WZBGradualTableView

如果這樣寫

[WZBGradualTableView gradualTableViewWithFrame:CGRectMake(0, self.view.frame.size.height - 180, self.view.frame.size.width, 140) direction:WZBTableViewGradualDirectionTop  gradualValue:@.3f]

效果如下：

背景圖片截取自新浪直播，侵立刪
背景圖片截取自新浪直播，侵立刪
3、實現(xiàn)大致原理：

這種漸變效果主要用到tableView的mask屬性，我們首先要創(chuàng)建一個CAGradientLayer，此類的使用網(wǎng)上介紹有很多，在這里不再贅述，不懂得私聊我，或者加入我的技術(shù)群。

上代碼：

if (!self.layer.mask) {
      CAGradientLayer *maskLayer = [CAGradientLayer layer];
      maskLayer.locations = @[@0.0, topValue, @(1-bottomValue.doubleValue), @1.0f];
      maskLayer.bounds = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
      maskLayer.anchorPoint = CGPointZero;
      self.layer.mask = maskLayer;
 }
[self addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];

由于tableView可以滑動，滑動的時候就需要實時的作出改變，因此我這里使用KVO監(jiān)聽“contentOffset”屬性，每當(dāng)contentOffset發(fā)生改變，證明用戶滑動了tableView，這時候需要調(diào)用的代碼為：

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"contentOffset"]) {
        [self change];
    }
}
- (void)change {
    UIScrollView *scrollView = (UIScrollView *)self;
    CGColorRef outerColor = [UIColor colorWithWhite:1.0 alpha:0.0].CGColor;
    CGColorRef innerColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor;
    NSArray *colors;
    
    if (scrollView.contentOffset.y + scrollView.contentInset.top <= 0) {
        //Top of scrollView
        colors = @[(__bridge id) innerColor, (__bridge id) innerColor,
                   (__bridge id) innerColor, (__bridge id) outerColor];
    } else if (scrollView.contentOffset.y + scrollView.frame.size.height
               >= scrollView.contentSize.height) {
        //Bottom of tableView
        colors = @[(__bridge id) outerColor, (__bridge id) innerColor,
                   (__bridge id) innerColor, (__bridge id) innerColor];
    } else {
        //Middle
        colors = @[(__bridge id) outerColor, (__bridge id) innerColor,
                   (__bridge id) innerColor, (__bridge id) outerColor];
    }
    ((CAGradientLayer *) scrollView.layer.mask).colors = colors;
    
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    scrollView.layer.mask.position = CGPointMake(0, scrollView.contentOffset.y);
    [CATransaction commit];
}

別忘了移除觀察者：

- (void)dealloc {
    [self removeObserver:self forKeyPath:@"contentOffset"];
}
4、GitHub源碼地址：WZBGradualTableView

二、自定義的開關(guān)控件

1、效果:
WZBSwitch
WZBSwitch
2、使用方法：

將WZBSwitch.h和WZBSwitch.m拖入工程

在需要使用的地方調(diào)用

    /** 初始化方法
     *  switchValueChange: 開關(guān)狀態(tài)改變回調(diào)block
     */
    WZBSwitch *switchView = [[WZBSwitch alloc] initWithFrame:CGRectMake(100, 100, 50, 25) switchValueChanged:^(WZBSwitch *swith, BOOL on)     {
        // do someing
    }];
    [self.view addSubview:switchView];

對于開關(guān)狀態(tài)的監(jiān)聽或者您還可以通過代理：

   WZBSwitch *switchView = [[WZBSwitch alloc] initWithFrame:CGRectMake(100, 100, 50, 25)];
   [self.view addSubview:switchView];
   // delegate
   switchView.delegate = self;

然后實現(xiàn)代理方法即可

   #pragma mark - WZBSwitchDelegate
   - (void)switchValueChange:(WZBSwitch *)swith on:(BOOL)on {
        // do someing
   }

如果您想自定義開關(guān)顏色，代碼如下：

//設(shè)置所有顏色
    [switchView setUpAllColors:^NSDictionary *(UIColor *__autoreleasing *onTintColor, UIColor *__autoreleasing *onBackgroundColor,                UIColor *__autoreleasing *offTintColor, UIColor *__autoreleasing *offBackgroundColor, UIColor *__autoreleasing *tintColor) {
        // 可以通過這種方法設(shè)置需要設(shè)置的顏色
        *onTintColor = [UIColor redColor];
        *onBackgroundColor = [UIColor blueColor];
        *offTintColor = [UIColor greenColor];
        *offBackgroundColor = [UIColor grayColor];
        *tintColor = [UIColor blackColor];
        return nil;
    }];

或者這樣

  [switchView setUpAllColors:^NSDictionary *(UIColor *__autoreleasing *onTintColor, UIColor *__autoreleasing *onBackgroundColor, UIColor    *__autoreleasing *offTintColor, UIColor *__autoreleasing *offBackgroundColor, UIColor *__autoreleasing *tintColor) {
        // 也可以通過這種方法設(shè)置需要設(shè)置的顏色
        return @{OnTintColor : WZBColor(234, 67, 53), OnBackgroundColor : WZBColor(244, 161, 154), OffTintColor : WZBColor(255, 255,              255), OffBackgroundColor : WZBColor(214, 214, 214), TintColor : [UIColor colorWithRed:0.8252 green:0.8252 blue:0.8252                   alpha:1.0]};
    }];
3、實現(xiàn)大致原理：

此控件由兩部分組成，頂部View和底部View

@property (nonatomic, strong) UIView *topView;
@property (nonatomic, strong) UIView *bottomView;

/** 一個方法設(shè)置所有顏色 && block回調(diào)
 *  switchValueChange: 開關(guān)狀態(tài)改變回調(diào)block
 */
- (void)setUpAllColors:(NSDictionary *(^)(UIColor **onTintColor,UIColor **onBackgroundColor, UIColor **offTintColor, UIColor **offBackgroundColor, UIColor **tintColor))allColorBlock switchValueChanged:(SwitchValueChangeBlock)switchValueChange;;

這個方法有兩個block參數(shù)，第一個可以設(shè)置您所需要設(shè)置的所有顏色值，第二個block是當(dāng)開關(guān)狀態(tài)發(fā)生改變的時候回調(diào)

/** 設(shè)置開關(guān)狀態(tài), animated : 是否有動畫 */
- (void)setOn:(BOOL)newOn animated:(BOOL)animated;

此方法用于設(shè)置開關(guān)狀態(tài)

@protocol WZBSwitchDelegate <NSObject>
@optional
- (void)switchValueChange:(WZBSwitch *)swith on:(BOOL)on;
@end

如果您不喜歡使用block，我還提供了代理方法監(jiān)聽開關(guān)狀態(tài)的改變

- (void)setOn:(BOOL)newOn animated:(BOOL)animated {
//    if (_on == newOn) return;
    __block CGRect frame = self.topView.frame;
    CGFloat newX = newOn ? self.frame.size.width - self.topView.frame.size.width : 0;
    [UIView animateWithDuration:animated ? 0.2 : 0.0 animations:^{
        frame.origin.x = newX;
        self.topView.frame = frame;
        [self setSwitchColorWithStatus:newOn];
    }                completion:^(BOOL finished) {
        if (finished) {
            // delegate
            if ([self.delegate respondsToSelector:@selector(switchValueChange:on:)]) {
                [self.delegate switchValueChange:self on:newOn];
            }
            // block
            if (self.switchValueChange) {
                self.switchValueChange(self, newOn);
            }
        }
    }];
    _on = newOn;
}

當(dāng)外界調(diào)用方法改變開關(guān)狀態(tài)時，動畫／非動畫，改變上層View的frame即可

4、GitHub源碼地址：WZBSwitch

三、一個仿網(wǎng)易的Segment

1、效果:
WZBSegmentedControl
WZBSegmentedControl
2、使用方法：

將WZBSegmentedControl.h和WZBSegmentedControl.m拖入工程

在需要使用的地方調(diào)用

  /** 初始化方法
   *  titles: 所有標(biāo)題
   *  titleClick: 點擊標(biāo)題的block回調(diào)
   */
  WZBSegmentedControl *segmentedControl = [WZBSegmentedControl segmentWithFrame:(CGRect){0, 0, 170, 25} titles:[self titles] titleClick:^(NSInteger index) {
        // do soming
  }];
  self.navigationItem.titleView = segmentedControl;
3、實現(xiàn)大致原理：

此控件還不是很完善，目前只提供一個初始化方法：

/* 初始化方法
 * frame：控件frame
 * titleClick：點擊title的時候block回調(diào)
 **/
+ (instancetype)segmentWithFrame:(CGRect)frame titles:(NSArray *)titles titleClick:(void(^)(NSInteger index))titleClick;

- (void)setContentOffset:(CGPoint)contentOffset {
    CGRect frame = self.backgroundView.frame;
    frame.origin.x = contentOffset.x;
    self.backgroundView.frame = frame;
    
    // 找出要操作的兩個button設(shè)置顏色（目前先這樣寫，后續(xù)改進）
    for (UIView *v in self.subviews) {
        if ([v isKindOfClass:[UIButton class]]) {
            UIButton *button = (UIButton *)v;
            CGFloat overLapWidth = CGRectIntersection(button.frame, self.backgroundView.frame).size.width;
            NSInteger gb = 255 - overLapWidth * (255 / (self.frame.size.width / self.titles.count));
            [button setTitleColor:WZBColor(255, gb, gb) forState:UIControlStateNormal];
        }
    }
}

核心方法：改變底部白色滑塊的位置，但是如果注意觀察，有個注意點是，在滑動的時候title的文字也會隨著漸變，目前先試用這個方法臨時解決，后續(xù)會提供方法設(shè)置文字顏色、選中文字顏色、背景顏色以及滑塊顏色等。

4、GitHub源碼地址：WZBSegmentedControl

----------------------------------難道我是分割線-----------------------------

11月13日更新：

本篇文章最后一個內(nèi)容由于當(dāng)時太匆忙寫的不完整，今天補充一下。
增加了幾個方法設(shè)置內(nèi)部控件顏色

/* 設(shè)置文字顏色
 * normalColor:未選中的按鈕文字顏色
 * selectColor:選中的按鈕文字顏色
 */
- (void)setNormalColor:(UIColor *)normalColor selectColor:(UIColor *)selectColor;
/* 設(shè)置部分顏色
 * normalColor:未選中的按鈕文字顏色
 * selectColor:選中的按鈕文字顏色
 * edgingColor:邊框顏色
 */
- (void)setNormalColor:(UIColor *)normalColor selectColor:(UIColor *)selectColor edgingColor:(UIColor *)edgingColor;
/* 設(shè)置所有顏色
 * normalColor:未選中的按鈕文字顏色
 * selectColor:選中的按鈕文字顏色
 * sliderColor:滑塊背景顏色
 * edgingColor:邊框顏色
 */
- (void)setNormalColor:(UIColor *)normalColor selectColor:(UIColor *)selectColor sliderColor:(UIColor *)sliderColor edgingColor:(UIColor *)edgingColor;
/* 設(shè)置所有屬性
 * normalColor:未選中的按鈕文字顏色
 * selectColor:選中的按鈕文字顏色
 * sliderColor:滑塊背景顏色
 * edgingColor:邊框顏色
 * edgingWidth:邊框?qū)挾? */
- (void)setNormalColor:(UIColor *)normalColor selectColor:(UIColor *)selectColor sliderColor:(UIColor *)sliderColor edgingColor:(UIColor *)edgingColor edgingWidth:(CGFloat)edgingWidth;

有了這些方法你就可以愉快的用各種各樣的顏色了

技術(shù)交流群:413050745

除此之外還在.h放出了這些屬性

// 所有title
@property (nonatomic, strong, readonly) NSArray *titles;
// 底部的滑塊
@property (nonatomic, strong, readonly) UIView *backgroundView;
// 輔助屬性,當(dāng)前選中的Button
@property (nonatomic, strong, readonly) UIButton *selectButton;
// 為選中的button顏色
@property (nonatomic, strong) UIColor *normalColor;
// 選中的button顏色
@property (nonatomic, strong) UIColor *selectColor;
// 滑塊顏色
@property (nonatomic, strong) UIColor *sliderColor;
// 邊框顏色
@property (nonatomic, strong) UIColor *edgingColor;
// 邊框顏色
@property (nonatomic, assign) CGFloat edgingWidth;

以便使用者可以單獨設(shè)置某個顏色

// 點擊title的block回調(diào)
@property (nonatomic, copy) void(^tClick)(NSInteger index);
// 點擊title的block回調(diào),selectButton:選中的button
@property (nonatomic, copy) void(^titleClick)(NSInteger index, UIButton *selectButton);

還有這兩個block，一個block只有選中下標(biāo)參數(shù)，另外一個有選中下標(biāo)和選中的button兩個參數(shù)

好吧！我承認(rèn)很多人喜歡用代理而不是block，為什么不提供代理方法呢？OK，Here！

@protocol WZBSegmentedControlDelegate <NSObject>
@optional
// segmented點擊的時候調(diào)用，selectIndex：選中的index
- (void)segmentedValueDidChange:(WZBSegmentedControl *)segment selectIndex:(NSInteger)selectIndex;
// segmented點擊的時候調(diào)用，selectIndex：選中的index，fromeIndex：從哪個index點過來的
- (void)segmentedValueDidChange:(WZBSegmentedControl *)segment selectIndex:(NSInteger)selectIndex fromeIndex:(NSInteger)fromeIndex;
// segmented點擊的時候調(diào)用，selectIndex：選中的index，fromeIndex：從哪個index點過來的,selectButton:選中的button
- (void)segmentedValueDidChange:(WZBSegmentedControl *)segment selectIndex:(NSInteger)selectIndex fromeIndex:(NSInteger)fromeIndex selectButton:(UIButton *)selectButton;
// segmented點擊的時候調(diào)用，selectIndex：選中的index，fromeIndex：從哪個index點過來的,selectButton:選中的button,allButtons:所有的button
- (void)segmentedValueDidChange:(WZBSegmentedControl *)segment selectIndex:(NSInteger)selectIndex fromeIndex:(NSInteger)fromeIndex selectButton:(UIButton *)selectButton allButtons:(NSArray *)allButtons;
@end

注釋很清楚

簡單給大家講下拖動的時候顏色漸變的實現(xiàn)，直接上代碼

// 根據(jù)顏色拿到RGB數(shù)值
void getRGBValue(CGFloat colorArr[3], UIColor *color) {
    unsigned char data[4];
    // 寬,高,內(nèi)存中像素的每個組件的位數(shù)（RGB應(yīng)該為32）,bitmap的每一行在內(nèi)存所占的比特數(shù)
    size_t width = 1, height = 1, bitsPerComponent = 8, bytesPerRow = 4;
    // bitmap上下文使用的顏色空間
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
    // 指定bitmap是否包含alpha通道
    uint32_t bitmapInfo = 1;
    // 創(chuàng)建一個位圖上下文。當(dāng)你向上下文中繪制信息時，Quartz把你要繪制的信息作為位圖數(shù)據(jù)繪制到指定的內(nèi)存塊。一個新的位圖上下文的像素格式由三個參數(shù)決定：每個組件的位數(shù)，顏色空間，alpha選項。alpha值決定了繪制像素的透明性
    CGContextRef context = CGBitmapContextCreate(&data, width, height, bitsPerComponent, bytesPerRow, space, bitmapInfo);
    // 設(shè)置當(dāng)前上下文中填充顏色
    CGContextSetFillColorWithColor(context, [color CGColor]);
    // 在此區(qū)域內(nèi)填入當(dāng)前填充顏色
    CGContextFillRect(context, CGRectMake(0, 0, 1, 1));
    CGContextRelease(context);
    CGColorSpaceRelease(space);
    for (NSInteger i = 0; i < 3; i++) {
        colorArr[i] = data[i];
    }
}

這是寫的一個c語言函數(shù)，每句基本都有注釋，說白了就是把RGB顏色拆分開，R是多少，G是多少，B是多少，然后放數(shù)組里。

// 找出要操作的兩個button設(shè)置顏色
    NSMutableArray *buttonArr = [NSMutableArray array];
    for (UIButton *button in self.allButtons) {
        CGFloat overLapWidth = CGRectIntersection(button.frame, self.backgroundView.frame).size.width;
        if (overLapWidth > 0) {
            [buttonArr addObject:button];
        }
    }
    
    // 切換的時候
    if (buttonArr.count > 1) {
        UIButton *leftButton = buttonArr.firstObject;
        UIButton *rightButton = buttonArr.lastObject;
        // 設(shè)置要漸變的兩個button顏色
        [rightButton setTitleColor:WZBColor([self getRGBValueWithIndex:0 button:rightButton], [self getRGBValueWithIndex:1 button:rightButton], [self getRGBValueWithIndex:2 button:rightButton]) forState:UIControlStateNormal];
        [leftButton setTitleColor:WZBColor([self getRGBValueWithIndex:0 button:leftButton], [self getRGBValueWithIndex:1 button:leftButton], [self getRGBValueWithIndex:2 button:leftButton]) forState:UIControlStateNormal];
    }

先找到兩個需要更改顏色的button，按照button和底部滑塊交叉區(qū)域的寬度比例，切換每個R、G、B的值，具體大家可以下載最新的源碼

有不懂或者任何疑問的地方都可以在下方評論，或者隨時聯(lián)系我，您還可以用QQ掃描底部的二維碼加入我們的技術(shù)交流群，我在那里等著你！

想看更多，請點擊:干貨！老司機工作中用到的自定義控件，總有一個適合你的（二）

怎么樣，這些您學(xué)會怎么用了嗎？

請不要吝惜，隨手點個喜歡或者關(guān)注一下吧！您的支持是我最大的動力??！
此系列文章持續(xù)更新，您可以關(guān)注我以便及時查看我的最新文章或者您還可以加入我們的群，大家庭期待您的加入！

我們的社區(qū)
我們的社區(qū)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容