iOS開發-UITableView頂部圖片下拉放大

關於頂部圖片下拉放大,在用戶展現的我的中心顯示用戶我的頭像信息,設置UITableView的headerView實現,UITableView繼承自UIScrollView,一樣的設置UIScrollView的頂部圖片也能夠實現一樣的效果,簡單看一下實現的效果:

atom

控制器中設置須要的屬性變量:spa

@property  (strong,nonatomic)  UITableView  *tableView;
@property  (strong,nonatomic)  NSArray      *data;
@property   (strong,nonatomic) UIView       *tableHeaderView;
@property  (strong,nonatomic)  UIImageView  *imageView;

初始化屬性:blog

-(UITableView *)tableView{
    if (!_tableView) {
        _tableView=[[UITableView alloc]initWithFrame:CGRectMake(0, 0,SCREENWIDTH, SCREENHEIGHT)];
        _tableView.delegate=self;
        _tableView.dataSource=self;
        _tableView.showsVerticalScrollIndicator=NO;
         _tableView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
        [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:CellIdetifier];
    }
    return _tableView;
}

-(UIView *)tableHeaderView{
    if (!_tableHeaderView) {
        _tableHeaderView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0,SCREENWIDTH, 100)];
    }
    return _tableHeaderView;
}

-(UIImageView *)imageView{
    if (!_imageView) {
        _imageView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, SCREENWIDTH, 100)];
        _imageView.autoresizingMask=UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
        _imageView.clipsToBounds=YES;
        _imageView.contentMode=UIViewContentModeScaleAspectFill;
    }
    return _imageView;
}

UITableViewDelegate實現:繼承

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [self.data count];
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell  *cell=[tableView dequeueReusableCellWithIdentifier:CellIdetifier];
    [cell.textLabel setText:self.data[indexPath.row]];
    return cell;
}

 ViewDidLoad中初始化imageView:圖片

    self.data=@[@"FlyElephant",@"博客園",@"UITableView圖片放大",@"http://www.cnblogs.com/xiaofeixiang/"];
    self.imageView.image=[UIImage imageNamed:@"Girl"];
    self.imageView.contentMode=UIViewContentModeScaleAspectFill;
    [self.tableHeaderView addSubview:self.imageView];
    self.tableView.tableHeaderView=self.tableHeaderView;
    [self.view addSubview:self.tableView];

在UITableViewView向下拉動的過程當中,改變imageView的位置:ip

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGPoint offset = scrollView.contentOffset;
    if (offset.y < 0) {
        CGRect rect =self.tableHeaderView.frame;
        rect.origin.y = offset.y;
        rect.size.height =CGRectGetHeight(rect)-offset.y;
        self.imageView.frame = rect;
        self.tableHeaderView.clipsToBounds=NO;
    }
}

 實現起來比較簡單,但願對有須要的人有所幫助~博客

相關文章
相關標籤/搜索