iOS开发中用到的自定义控件
一、第一个是tableView的透明度渐变效果
1、效果:
很多app用到了这种效果，比如歌词显示、直播间聊天记录等。
大致效果如下：
2、使用方法：
/*
* frame：tableView的frame
* direction：透明渐进的方向
* gradualValue：透明范围值，如果只有一个方向，此值传一个NSNumber、NSString即可，值的范围0—1。如果是两个方向，则需要传一个数组，数组里边传两个NSNumber或者NSString
***/
+ (instancetype)gradualTableViewWithFrame:(CGRect)frame direction:(WZBTableViewGradualDirection)direction gradualValue:(id)gradualValue;
参数值说明一下，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 gradualTableViewWithFrame:CGRectMake(0, self.view.frame.size.height - 180, self.view.frame.size.width, 140) direction:WZBTableViewGradualDirectionTop gradualValue:@.3f]
3、实现大致原理：
这种渐变效果主要用到tableView的mask属性，我们首先要创建一个CAGradientLayer，此类的使用网上介绍有很多，在这里不再累述，不懂得私聊我，或者加入我的技术群。
上代码：
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监听“contentOffset”属性，每当contentOffset发生改变，证明用户滑动了tableView，这时候需要调用的代码为：
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)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 = 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源码地址：https://github.com/WZBbiao/WZBGradualTableView
二、自定义的开关控件
1、效果:
2、使用方法：
将WZBSwitch.h和WZBSwitch.m拖入工程
在需要使用的地方调用
/** 初始化方法
* switchValueChange: 开关状态改变回调block
*/
WZBSwitch *switchView = [[WZBSwitch alloc] initWithFrame:CGRectMake(100, 100, 50, 25) switchValueChanged:^(WZBSwitch *swith, BOOL on) {
// do someing
}];
[self.view addSubview:switchView];
对于开关状态的监听或者您还可以通过代理：
WZBSwitch *switchView = [[WZBSwitch alloc] initWithFrame:CGRectMake(100, 100, 50, 25)];
[self.view addSubview:switchView];
// delegate
switchView.delegate = self;
然后实现代理方法即可
#pragma mark - WZBSwitchDelegate
- (void)switchValueChange:(WZBSwitch *)swith on:(BOOL)on {
// do someing
}
如果您想自定义开关颜色，代码如下：
//设置所有颜色
[switchView setUpAllColors:^NSDictionary *(UIColor *__autoreleasing *onTintColor, UIColor *__autoreleasing *onBackgroundColor, UIColor *__autoreleasing *offTintColor, UIColor *__autoreleasing *offBackgroundColor, UIColor *__autoreleasing *tintColor) {
// 可以通过这种方法设置需要设置的颜色
*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) {
// 也可以通过这种方法设置需要设置的颜色
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、实现大致原理：
此控件由两部分组成，顶部View和底部View
@property (nonatomic, strong) UIView *topView;
@property (nonatomic, strong) UIView *bottomView;
/** 一个方法设置所有颜色 && block回调
* switchValueChange: 开关状态改变回调block
*/
- (void)setUpAllColors:(NSDictionary *(^)(UIColor **onTintColor,UIColor **onBackgroundColor, UIColor **offTintColor, UIColor **offBackgroundColor, UIColor **tintColor))allColorBlock switchValueChanged:(SwitchValueChangeBlock)switchValueChange;;
这个方法有两个block参数，第一个可以设置您所需要设置的所有颜色值，第二个block是当开关状态发生改变的时候回调
/** 设置开关状态, animated : 是否有动画 */
- (void)setOn:(BOOL)newOn animated:(BOOL)animated;
此方法用于设置开关状态
@protocol WZBSwitchDelegate
@optional
- (void)switchValueChange:(WZBSwitch *)swith on:(BOOL)on;
@end
如果您不喜欢使用block，我还提供了代理方法监听开关状态的改变
- (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;
}
当外界调用方法改变开关状态时，动画／非动画，改变上层View的frame即可
4、GitHub源码地址：https://github.com/WZBbiao/WZBSwitch
三、一个仿网易的Segment
1、效果:
2、使用方法：
将WZBSegmentedControl.h和WZBSegmentedControl.m拖入工程
在需要使用的地方调用
/** 初始化方法
* titles: 所有标题
* titleClick: 点击标题的block回调
*/
WZBSegmentedControl *segmentedControl = [WZBSegmentedControl segmentWithFrame:(CGRect){0, 0, 170, 25} titles:[self titles] titleClick:^(NSInteger index) {
// do soming
}];
self.navigationItem.titleView = segmentedControl;
3、实现大致原理：
此控件还不是很完善，目前只提供一个初始化方法：
/* 初始化方法
* frame：控件frame
* titleClick：点击title的时候block回调
**/
+ (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设置颜色（目前先这样写，后续改进）
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的文字也会随着渐变，目前先试用这个方法临时解决，后续会提供方法设置文字颜色、选中文字颜色、背景颜色以及滑块颜色等。
4、GitHub源码地址：https://github.com/WZBbiao/WZBSegmentedControl
怎么样，这些您学会怎么用了吗？
