网络编程

当前位置:永利402游戏网站-永利402com官方网站 > 网络编程 > 下拉实现图片放大

下拉实现图片放大

来源:http://www.xtcsyb.com 作者:永利402游戏网站-永利402com官方网站 时间:2019-09-19 08:49
2. 布置图片

布置图片的时候,我们首先要通过设置UITableview的内容偏移来为图片视图留出位置,这里我们的图片高度暂定为200。

 self.tableView.contentInset = UIEdgeInsetsMake(kHEIGHT, 0, 0, 0);

接下来就是布置图片,图片要放在内容视图之上,所以图片的纵向位置应该为负。

 UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -kHEIGHT, [UIScreen mainScreen].bounds.size.width, kHEIGHT)]; imageView.image = [UIImage imageNamed:@"IMG_0767.JPG"]; imageView.contentMode = UIViewContentModeScaleAspectFill; imageView.tag = 101; [self.tableView addSubview:imageView];

需要注意的是,图片的** contentMode 必须设置为 UIViewContentModeScaleAspectFill ** , 这样才能保证图片在放大的过程中高和宽是同时放大的。

tableViewHeader.gif

步骤如下:

由于contentInset预设置的大小不同,可能会出现图片先下拉再放大和立即放大的两种效果.

最近感觉UITableview头部带有图片,并且下拉时图片放大这种效果非常炫酷,所以动手实现了一下,效果如下图:

实现原理很简单,就是在UITableview上边添加一个图片子视图,在tableview拖动的时候动态的改变图片的frame,就可以实现这个效果。

实现原理很简单,就是在UITableview上边添加一个图片子视图,在tableview拖动的时候动态的改变图片的frame,就可以实现这个效果。

(三) 拖动事件的处理
我们都知道,UITableview属于可以滑动的控件,所以它的父类是UIScrollView,所以我们就可以在滑动事件中做出一些处理。
在滑动的时候,一旦判定是下拉状态,那么我们就要动态的改变图片的纵向位置和图片的高度(由于设置了contentMode,所以宽度自己会变化),最终实现所需要的效果。
代码如下

3. 拖动事件的处理

我们都知道,UITableview属于可以滑动的控件,所以它的父类是UIScrollView,所以我们就可以在滑动事件中做出一些处理。在滑动的时候,一旦判定是下拉状态并且是从大于图片高度的地方下拉的,那么我们就要动态的改变图片的纵向位置和图片的高度(由于设置了contentMode,所以宽度自己会变化),最终实现所需要的效果。代码如下:

- scrollViewDidScroll:(UIScrollView *)scrollView{ CGPoint point = scrollView.contentOffset; if (point.y < -kHEIGHT) { CGRect rect = [self.tableView viewWithTag:101].frame; rect.origin.y = point.y; rect.size.height = -point.y; [self.tableView viewWithTag:101].frame = rect; }}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGPoint point = scrollView.contentOffset;

    if (point.y < - contentInset) {

        CGRect rect  = self.imageView.frame;

        rect.origin.y = point.y;

        rect.size.height = - point.y;

        self.imageView.frame = rect;
    }

}
1. 布置UITableview

UITableview的设置和正常一样,没有什么需要注意的地方,我这里是直接在storyboard里面拖的,代码如下:

@property (weak, nonatomic) IBOutlet UITableView *tableView;

 self.tableView.delegate = self; self.tableView.dataSource = self; [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell_id"];

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ return 1;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return 30;}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell_id" forIndexPath:indexPath]; cell.textLabel.text = [NSString stringWithFormat:@"%ld--%ld", indexPath.section, indexPath.row]; return cell;}

(二) 布置图片

图片 11.gif

    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, - contentInset, self.view.bounds.size.width, contentInset)];

    _imageView.image = [UIImage imageNamed:@"image01.jpg"];

    [self.tableView addSubview:_imageView];

    _imageView.contentMode = UIViewContentModeScaleAspectFill;

    _imageView.clipsToBounds = YES;
     * UIViewContentModeScaleToFill 属性会导致图片变形(默认)

     * UIViewContentModeScaleAspectFit 属性会导致图片比例不变,图片都会在view里面显示,这就是说如果图片和view的比例不一样,就会有留白

     * UIViewContentModeScaleAspectFill 属性会导致图片比例不变,整个view会被图片填满,但是图片可能会超出view的范围

     * 如果设置了clipsToBounds属性为YES,那么超出的图片部分就会被截断

(一) 布置UITableview
我们首先要通过设置UITableview的内容偏移 self.tableView.contentInset

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 100;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"UITableViewCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:(UITableViewCellStyleValue1) reuseIdentifier:identifier];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
    return cell;
}

最近感觉UITableview头部带有图片,并且下拉时图片放大这种效果非常炫酷,所以动手实现了一下,效果如下图:

简单地布局tableView ,实现协议方法dataSource

    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds];

    _tableView.delegate = self;

    _tableView.dataSource = self;

    [self.view addSubview:_tableView];

    self.tableView.contentInset = UIEdgeInsetsMake(contentInset , 0, 0, 0);
const CGFloat contentInset = 280;

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>

@property (nonatomic, strong) UITableView *tableView;

@property (nonatomic, strong) UIImageView *imageView;

@end

简单地创建一个tableView

图片拉伸,裁剪的特性:

图片 2

来为图片视图留出位置,这里我们的图片高度暂定为280

本文由永利402游戏网站-永利402com官方网站发布于网络编程,转载请注明出处:下拉实现图片放大

关键词:

上一篇:Android解惑之Handler为什么需要是static的

下一篇:没有了