藉助 CAGradientLayer 可以設定漸變色的屬性 實現蘇寧易購首頁導航欄的效果
實現如標題所示的功能使用的核心程式碼如下
//初始化漸變層
self.gradientLayer = [CAGradientLayerlayer];
self.gradientLayer.frame = CGRectMake(0, 0, self.view.frame.size.width, 64);
[self.view.layeraddSublayer:self.gradientLayer];
//設定漸變顏色方向
self.gradientLayer.startPoint = CGPointMake(0, 0);
self.gradientLayer.endPoint
//設定顏色組
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor clearColor].CGColor];
//設定顏色分割點
self.gradientLayer.locations = @[@(0.0f) ,@(1.0f)];
具體的邏輯程式碼實現
#import "ViewController.h"
@interface
{
UILabel *label;
UIView *navBgView;
UITableView *homePageTable;
}
@property (strong, nonatomic) CAGradientLayer *gradientLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[superviewDidLoad];
//初始化tableView
homePageTable = [[UITableViewalloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
homePageTable.dataSource = self;
homePageTable.delegate = self;
[homePageTablesetRowHeight:100];
[homePageTableregisterClass:[UITableViewCellclass] forCellReuseIdentifier:@"cell"];
UIView *headView =[[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 264)];
headView.backgroundColor = [UIColor redColor];
[homePageTablesetTableHeaderView:headView];
[self.viewaddSubview:homePageTable];
//初始化漸變層
self.gradientLayer = [CAGradientLayerlayer];
self.gradientLayer.frame = CGRectMake(0, 0, self.view.frame.size.width, 64);
[self.view.layeraddSublayer:self.gradientLayer];
//設定漸變顏色方向
self.gradientLayer.startPoint = CGPointMake(0, 0);
self.gradientLayer.endPoint = CGPointMake(0, 1);
//設定顏色組
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor clearColor].CGColor];
//設定顏色分割點
self.gradientLayer.locations = @[@(0.0f) ,@(1.0f)];
navBgView =[[UIViewalloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
navBgView.backgroundColor =[UIColorclearColor];
[self.view addSubview:navBgView];
navBgView.alpha = 0;
UIButton *button =[UIButtonbuttonWithType:UIButtonTypeSystem];
[button setFrame:CGRectMake(10, 27, 40, 30)];
[button addTarget:selfaction:@selector(clickeAction) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"點我"forState:UIControlStateNormal];
[navBgView addSubview:button];
UILabel *navLabel =[[UILabel alloc]initWithFrame:CGRectMake((self.view.frame.size.width-200)*0.5, 30, 200, 24)];
navLabel.textAlignment = NSTextAlignmentCenter;
navLabel.textColor =[UIColor blackColor];
navLabel.font =[UIFont systemFontOfSize:22];
navLabel.backgroundColor = [UIColor clearColor];
navLabel.text = @"滑動效果測試";
[navBgView addSubview:navLabel];
UIView *headBgView =[[UIView alloc]initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 64)];
headBgView.backgroundColor =[UIColor clearColor];
[headView addSubview:headBgView];
UIButton *button_h =[UIButtonbuttonWithType:UIButtonTypeSystem];
[button_h setFrame:CGRectMake(10, 27, 40, 30)];
[button_h addTarget:selfaction:@selector(clickeAction) forControlEvents:UIControlEventTouchUpInside];
[button_h setTitle:@"點我"forState:UIControlStateNormal];
[headBgView addSubview:button_h];
label =[[UILabel alloc]initWithFrame:CGRectMake((self.view.frame.size.width-200)*0.5, 30, 200, 24)];
label.textAlignment = NSTextAlignmentCenter;
label.textColor =[UIColor whiteColor];
label.font =[UIFontsystemFontOfSize:22];
label.backgroundColor = [UIColorclearColor];
label.text = @"滑動效果測試";
[headBgView addSubview:label];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[superdidReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
//-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)sectioc{
// return 64;
//}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 20;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"forIndexPath:indexPath];
return cell;
}
#pragma mark -
#pragma mark scroll delagate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
// NSLog(@"%.f",scrollView.contentOffset.y);
if (scrollView.contentOffset.y > 116 && scrollView.contentOffset.y<200) {
CGFloat rate = (scrollView.contentOffset.y-116)*1.0/84;
self.gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:222.0/255
green:222.0/255
blue:222.0/255 alpha:rate*0.8].CGColor,
(__bridge id)[UIColor colorWithRed:222.0/255
green:222.0/255
blue:222.0/255 alpha:rate*0.8].CGColor];
navBgView.alpha = 0;
//定時改變分割點
self.gradientLayer.locations = @[@(0.0f), @(1.0f)];
if (scrollView.contentOffset.y>156) {
label.textColor =[UIColor blackColor];
}else if(scrollView.contentOffset.y < 166){
label.textColor =[UIColor whiteColor];
}
}else if (scrollView.contentOffset.y >= 200){
navBgView.alpha = 1;
self.gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:222.0/255
green:222.0/255
blue:222.0/255 alpha:1].CGColor,
(__bridge id)[UIColor colorWithRed:222.0/255
green:222.0/255
blue:222.0/255 alpha:1].CGColor];
//定時改變分割點
self.gradientLayer.locations = @[@(0.0f), @(1.0f)];
}else{
navBgView.alpha = 0;
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor clearColor].CGColor];
//定時改變分割點
self.gradientLayer.locations = @[@(0.0f), @(1.0f)];
}
}
-(void)clickeAction{
NSLog(@"爽");
}
@end