炫酷的滚动视图

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


作者的实现方法:

工具xcode7.1

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


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

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

<LGSublimationViewDelegate>


主体代码

-(void)loadView

{

    [super loadView];

    

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

    


//加载图片

    NSMutableArray*views = [NSMutableArray new];

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

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

        view.image = [UIImage imageNamed:[NSString stringWithFormat:@"%i.jpg",i]];

        view.contentMode = UIViewContentModeScaleAspectFill;

        [views addObject:view];

    }

    

//设置标题的字体属性

    lgSublimer.titleLabelTextColor = [UIColor whiteColor];

    lgSublimer.descriptionLabelTextColor = [UIColor whiteColor];

    lgSublimer.delegate = self;

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

    lgSublimer.descriptionLabelFont = [UIFont fontWithName:@"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 = [[UIView alloc]initWithFrame:lgSublimer.frame];

    shadeView.backgroundColor = [UIColor blackColor];

    shadeView.alpha = .5;

    

    lgSublimer.inbetweenView = shadeView;

    

    [self.view addSubview: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 {

    [super viewDidLoad];

    

    

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

    _imageview4.contentMode=UIViewContentModeScaleAspectFill;

    _imageview4.image=[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",4]];

    

    [self.view addSubview:_imageview4];

    

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

    _imageview3.contentMode=UIViewContentModeScaleAspectFill;

    _imageview3.image=[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",3]];


    [self.view addSubview:_imageview3];

    

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

    _imageview2.contentMode=UIViewContentModeScaleAspectFill;

    _imageview2.image=[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",2]];

   

    [self.view addSubview:_imageview2];

    

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

    _imageview.contentMode=UIViewContentModeScaleAspectFill;

    _imageview.image=[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",1]];


    [self.view addSubview:_imageview];


    

    

    

    

    //加4个label

    _scrollview=[[UIScrollView alloc]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=[UIColor clearColor];

    

    //创建4个lable

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

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

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

        [_scrollview addSubview:label];

        }

    

    [self.view addSubview:_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 {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}


@end




  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值