拖動(dòng) tableView 來(lái)縮放頂部圖片

在 UITableView 的頭部添加一個(gè) imageView,通過拉動(dòng) tableView 來(lái)放大縮小這個(gè) imageView.

效果如下:

20160527220410771.gif

實(shí)現(xiàn)步驟:

1.創(chuàng)建 tableView 的 headerView,并設(shè)置其frame,將背景色改為 clearColor;
2.創(chuàng)建一個(gè) UIImageView,與 tableViewHeaderView 一樣大小;
3.創(chuàng)建一個(gè) UIView,與tableView 一樣大小;
4.將 UIImageView 添加到 UIView 上,并將 UIView 設(shè)置為 tabelView 的 backgroundView 屬性

經(jīng)過以上 4 個(gè)步驟的設(shè)置,就以保正 UIImage 始終在 tableView 下面,不會(huì)遮住 tableView;

下面我們來(lái)看看代碼的實(shí)現(xiàn):

 #import "TTAMineTableViewController.h"

@interface TTAMineTableViewController ()
@property (strong,nonatomic) UIImageView *imageView;
@end

@implementation TTAMineTableViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // 創(chuàng)建一個(gè) imageView 一張圖,大小與 tableHeaderView 大小相同
    UIImage *image = [UIImage imageNamed:@"hh"];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.frame = CGRectMake(0, 44, self.view.frame.size.width, 300);

    // 讓圖片內(nèi)容按原圖的比例放縮
    imageView.contentMode = UIViewContentModeScaleAspectFill;

    // 聲明一個(gè)屬性,后面改變 imageView 大小的時(shí)候要用到
    self.imageView = imageView;

    // 創(chuàng)建一個(gè) 背景 View,與屏幕一樣大小
    UIView *bgView = [[UIView alloc] initWithFrame:self.view.frame];

    // 將 imageView 加到 bgView 上
    [bgView addSubview:imageView];
    // 將 bgView 設(shè)置為 tableView 的 backgroundView 屬性
    self.tableView.backgroundView = bgView;

    // 設(shè)置 tableHeaderView 并將背景色設(shè)置為透明
    self.tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 300)];
    [self.tableView.tableHeaderView setBackgroundColor:[UIColor clearColor]];
}

 #pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"老司機(jī)老司機(jī)%zd",indexPath.row];
    return cell;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

    // 修改 imageView 的高
    CGRect frame = self.imageView.frame;

    CGFloat offsetY = self.tableView.contentOffset.y;

    if(offsetY > 0){
        frame.origin.y = -offsetY;
    }else{
        // 向下拉時(shí),放大,同時(shí)將 imageView 的頂部放在 y = 0 的位置
        frame.origin.y = 0;
        // 修改 imageView 的高度,就可以放大圖片了
        frame.size.height = 300 - offsetY * 2;
    }
    self.imageView.frame = frame;
}
@end
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 版權(quán)聲明:未經(jīng)本人允許,禁止轉(zhuǎn)載. 1. TableView初始化 1.UITableView有兩種風(fēng)格:UITa...
    蕭雪痕閱讀 2,993評(píng)論 2 10
  • 代碼創(chuàng)建UIWindow對(duì)象 Xcode7之后使用代碼創(chuàng)建UIWindow對(duì)象: //創(chuàng)建UIWindow對(duì)象 s...
    云之君兮鵬閱讀 1,504評(píng)論 0 2
  • 1.badgeVaule氣泡提示 2.git終端命令方法> pwd查看全部 >cd>ls >之后桌面找到文件夾內(nèi)容...
    i得深刻方得S閱讀 4,987評(píng)論 1 9
  • Sass的基本介紹: 1、sass是css的一個(gè)預(yù)編譯處理器。增加了規(guī)則、變量、混入、選擇器、繼承等等特性。它是用...
    xcxerxes閱讀 1,060評(píng)論 0 2
  • 每次槍響 我都希望 中槍的人 忘記傷痛 槍 是一個(gè)惡魔 真真切切 皮肉炙烤的瞬間 惡魔的影子 留在軀體上 為什么要...
    左格拉閱讀 236評(píng)論 0 0

友情鏈接更多精彩內(nèi)容