IOS 类似直播的tableView 顶部透明度渐变效果
IOS 类似直播的tableView 顶部透明度渐变效果
在工程中，需要类似直播的tableView 顶部透明度渐变效果。这个渐变的效果呢，而且不能有覆盖在背景图上的感觉。底部背景图在没有数据的情况下，没有遮罩效果。首先想到了CAGradientLayer。
CAGradientLayer主要属性
- colors
var colors: [AnyObject]?
一个内部是CGColorRef的数组,规定所有的梯度所显示的颜色,默认为nil
- locations
var locations: [NSNumber]?
一个内部是NSNumber的可选数组,规定所有的颜色梯度的区间范围,选值只能在0到1之间,并且数组的数据必须单增,默认值为nil
- endPoint
var endPoint: CGPoint
图层颜色绘制的终点坐标,也就是阶梯图层绘制的结束点,默认值是(0.5,1.0)
- startPoint
var startPoint: CGPoint
与endPoint相互对应,就是绘制阶梯图层的起点坐标,绘制颜色的起点,默认值是(0.5,0.0)
- type
var type:String
绘制类型,默认值是kCAGradientLayerAxial,也就是线性绘制,各个颜色阶层直接的变化是线性的
主要是通过一个背景View：layerImageView，通过设置layerImageView的maskLayer：gradientLayer，之后再讲tableView放置在layerImageView上就可以实现这样的效果了。
具体代码如下
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIImageView *backImageView;
@property (nonatomic, strong) UIImageView *layerImageView;
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSMutableArray *dataList;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor brownColor];
self.dataList = @[@"真理惟一可靠的标准就是永远自相符合。",@"时间是一切财富中最宝贵的财富。",@"世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。",@"真理惟一可靠的标准就是永远自相符合。",@"时间是一切财富中最宝贵的财富。",@"世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。",@"真理惟一可靠的标准就是永远自相符合。",@"时间是一切财富中最宝贵的财富。",@"世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。",@"真理惟一可靠的标准就是永远自相符合。",@"时间是一切财富中最宝贵的财富。",@"世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。"];
[self createGradientView];
}
//创建渐变视图
- (void)createGradientView{
self.backImageView.frame = self.view.bounds;
[self.view addSubview:self.backImageView];
self.layerImageView.frame = CGRectMake(0.0, 200, self.view.frame.size.width, self.view.frame.size.height - 200);
[self.view addSubview:self.layerImageView];
[self.layerImageView addSubview:self.tableView];
self.tableView.frame = self.layerImageView.bounds;
self.gradientLayer.frame = self.layerImageView.bounds;
NSArray *colors = @[(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0.5].CGColor,
(id)[UIColor colorWithWhite:0 alpha:1.0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:1.0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:1.0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:1.0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:1.0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:1.0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:1.0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:1.0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:1.0].CGColor,
];
[self.gradientLayer setColors:colors];
self.gradientLayer.hidden = NO;
}
- (CAGradientLayer *)gradientLayer {
if (!_gradientLayer) {
_gradientLayer = [CAGradientLayer layer];
NSArray *colors = @[(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
];
[_gradientLayer setColors:colors];
[_gradientLayer setStartPoint:CGPointMake(0, 0)];
[_gradientLayer setEndPoint:CGPointMake(0, 1)];
_gradientLayer.hidden = YES;
[self.layerImageView.layer setMask:_gradientLayer];
}
return _gradientLayer;
}
- (UIImageView *)layerImageView {
if (!_layerImageView) {
_layerImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
_layerImageView.backgroundColor = [UIColor clearColor];
_layerImageView.userInteractionEnabled = YES;
}
return _layerImageView;
}
- (UIImageView *)backImageView {
if (!_backImageView) {
_backImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
_backImageView.backgroundColor = [UIColor clearColor];
_backImageView.image = [UIImage imageNamed:@"login_bg_image"];
_backImageView.contentMode = UIViewContentModeScaleAspectFill;
_backImageView.userInteractionEnabled = YES;
}
return _backImageView;
}
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
_tableView.backgroundColor = [UIColor clearColor];
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.scrollEnabled = YES;
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
_tableView.estimatedRowHeight = 0;
_tableView.estimatedSectionHeaderHeight = 0;
_tableView.estimatedSectionFooterHeight = 0;
}
return _tableView;
}
#pragma mark UITableViewDataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.dataList.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellIdentifier = @"SDUsualAddressTableViewCell";
UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
cell.backgroundColor = [UIColor blackColor];
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
cell.textLabel.font = [UIFont systemFontOfSize:14];
cell.textLabel.textColor = [UIColor whiteColor];
cell.textLabel.text = [self.dataList objectAtIndex:indexPath.row];
return cell;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
本文为学习的记录，以便之后查阅。谢谢。