15.11.25学习笔记 炫酷的滚动视图

描述：滚动视图上的图片渐变 其他控件随着滚动

作者的实现方法：

工具xcode7.1

//类名  实现滚动视图 图片不随滚动视图滚动  描述文字滚动

1.新建工程用pod导入 pod 'LGSublimationView', '~> 1.0.0'

2.引入类名和代理#import <LGSublimationViewLGSublimationView.h>

<LGSublimationViewDelegate>

主体代码

-(void)loadView

{

    [super loadView];

    

    LGSublimationView *lgSublimer = [[LGSublimationViewalloc]initWithFrame:self.view.bounds];

    

//加载图片

    NSMutableArray*views = [NSMutableArraynew];

    for (int i  =1; i<=4; i++) {

        UIImageView *view = [[UIImageViewalloc]initWithFrame:CGRectMake(0,0, self.view.frame.size.width,self.view.frame.size.height)];

        view.image = [UIImageimageNamed:[NSStringstringWithFormat:@"%i.jpg",i]];

        view.contentMode =UIViewContentModeScaleAspectFill;

        [views addObject:view];

    }

    

//设置标题的字体属性

    lgSublimer.titleLabelTextColor = [UIColorwhiteColor];

    lgSublimer.descriptionLabelTextColor = [UIColorwhiteColor];

    lgSublimer.delegate = self;

    lgSublimer.titleLabelFont = [UIFontfontWithName:@"HelveticaNeue-Light"size:20];

    lgSublimer.descriptionLabelFont = [UIFontfontWithName:@"HelveticaNeue-UltraLight"size:20];

    lgSublimer.titleStrings =@[@"This is title one",

                                @"This is title two",

                                @"This is title three",

                                @"This is title four"];

//设置描述的字体

    lgSublimer.descriptionStrings =@[@"This is a description of one",

                                      @"This is description two and also happens to be multi line, which is sweet"

                                      ,@"This is description three",

                                      @"follow luke on twitter @lukejgeiger"];

    

    //图片加到视图上

    lgSublimer.viewsToSublime = views;

    

//设置视图的背景色

    UIView* shadeView = [[UIViewalloc]initWithFrame:lgSublimer.frame];

    shadeView.backgroundColor = [UIColorblackColor];

    shadeView.alpha = .5;

    

    lgSublimer.inbetweenView = shadeView;

    

    [self.viewaddSubview:lgSublimer];

}

-(void)lgSublimationView:(LGSublimationView *)view didEndScrollingOnPage:(NSUInteger)page

{

    NSLog(@"Current Page %i",(int)page);

}

我的模拟方法

具体思路就是 通过滚动视图的偏移量控制图片的透明度

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic,strong)UIScrollView *scrollview;

@property UIImageView *imageview;

@property UIImageView *imageview2;

@property UIImageView *imageview3;

@property UIImageView *imageview4;

@end

//仿写的思路 背景叠加4张图片 上面覆盖透明的滚动视图  视图上加对应的4个标题通过滚动视图的偏移量控制图片的显示与否

@implementation ViewController

- (void)viewDidLoad {

    [superviewDidLoad];

    

    

    _imageview4=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height)];

    _imageview4.contentMode=UIViewContentModeScaleAspectFill;

    _imageview4.image=[UIImageimageNamed:[NSStringstringWithFormat:@"%d.jpg",4]];

    

    [self.viewaddSubview:_imageview4];

    

    _imageview3=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height)];

    _imageview3.contentMode=UIViewContentModeScaleAspectFill;

    _imageview3.image=[UIImageimageNamed:[NSStringstringWithFormat:@"%d.jpg",3]];

    [self.viewaddSubview:_imageview3];

    

    _imageview2=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height)];

    _imageview2.contentMode=UIViewContentModeScaleAspectFill;

    _imageview2.image=[UIImageimageNamed:[NSStringstringWithFormat:@"%d.jpg",2]];

   

    [self.viewaddSubview:_imageview2];

    

    _imageview=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height)];

    _imageview.contentMode=UIViewContentModeScaleAspectFill;

    _imageview.image=[UIImageimageNamed:[NSStringstringWithFormat:@"%d.jpg",1]];

    [self.viewaddSubview:_imageview];

    

    

    

    

    //加4个label

    _scrollview=[[UIScrollViewalloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height)];

    

    self.scrollview.delegate=self;

    self.scrollview.showsHorizontalScrollIndicator=YES;

    self.scrollview.pagingEnabled=YES;

    self.scrollview.scrollEnabled=YES;

    self.scrollview.contentSize=CGSizeMake(4*self.view.frame.size.width,0);

    

    self.scrollview.backgroundColor=[UIColorclearColor];

    

    //创建4个lable

    for (int i=0;i<4;i++) {

        UILabel *label=[[UILabelalloc]initWithFrame:CGRectMake(100+i*self.view.frame.size.width,300,200,50)];

        label.text=[NSStringstringWithFormat:@"第%d个页面",i+1];

        [_scrollview addSubview:label];

        }

    

    [self.viewaddSubview:_scrollview];

    

    // Do any additional setup after loading the view, typically from a nib.

}

//在代理

-(void)scrollViewDidScroll:(UIScrollView *)scrollView

{

  //计算偏移量

    if ((scrollView.contentOffset.x/self.view.frame.size.width>0)&&(scrollView.contentOffset.x/self.view.frame.size.width<1)) {

       

            self.imageview.alpha=1-scrollView.contentOffset.x/self.view.frame.size.width;

        

}

    if ((scrollView.contentOffset.x/self.view.frame.size.width>1)&&(scrollView.contentOffset.x/self.view.frame.size.width<2)) {

         self.imageview2.alpha=2-scrollView.contentOffset.x/self.view.frame.size.width;

    }

    if ((scrollView.contentOffset.x/self.view.frame.size.width>2)&&(scrollView.contentOffset.x/self.view.frame.size.width<3)) {

     self.imageview3.alpha=3-scrollView.contentOffset.x/self.view.frame.size.width;

    }

    if ((scrollView.contentOffset.x/self.view.frame.size.width>3)&&(scrollView.contentOffset.x/self.view.frame.size.width<4)) {

       self.imageview4.alpha=4-scrollView.contentOffset.x/self.view.frame.size.width;

    }

}

- (void)didReceiveMemoryWarning {

    [superdidReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end