IF(BOOL 學(xué)習(xí)= =FALSE)BOOL 落后=TRUE;不斷的學(xué)習(xí)疏虫,我們才能不斷的前進。 --- 五大大組合
UITableView 頂部加入圖片,通過拖拽 UITableView 來實現(xiàn)圖片的放大驯鳖。
iOS動畫之下拉放大,講解的動畫效果肆氓,在很多app中都能見到袍祖,就是下拉放大圖片的效果。先看看效果圖谢揪。 1. 默認情況下蕉陋,圖片正常顯示(沒有被拉大)。 2. 當往下拉動的時候拨扶,圖片等比例放大
正常
//添加headerView方法
- (void)setLayoutHeaderView {
UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200)];
self.headImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200)];
self.headImageView.image = [UIImage imageNamed:@"123.jpg"];
[headView addSubview:self.headImageView];
self.tableView.tableHeaderView = headView;
}
固定的大小凳鬓,向下拖動TableView后,頂部露出了背景圖片患民。
未實現(xiàn)
對于不需要下拉刷新的頁面缩举,又不想分配太大的空間來顯示頂部圖片,則可以選擇這種匹颤。想要看大圖仅孩?只要下拉TableView即可。_
設(shè)置一個 UIImageView 為 UITableView 的 tableHeaderView惋嚎,設(shè)置 UITableView 的 UIScrollViewDelegate在 TableView 滾動時杠氢,動態(tài)改變 tableHeaderView 的狀態(tài)。
//
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat width = [UIScreen mainScreen].bounds.size.width;
CGFloat yOffset = scrollView.contentOffset.y ;
if (yOffset < 0) {
CGFloat totalOffset = 200 + ABS(yOffset);
CGFloat f = totalOffset / 200;
_headImageView.frame = CGRectMake(- (width * f - width) / 2, yOffset, width * f, totalOffset);
}
}
方法實現(xiàn)后的效果
實現(xiàn)拖動列表時圖片放大的效果方法
在scrollViewDidScroll內(nèi)獲取當前滾動坐標的y值當坐標y小于宏定義圖片高度時就進行放大另伍;放大原理是改變UIImageView的y坐標和高度鼻百,同時由于設(shè)置了contentMode屬性绞旅,圖片高度改變會使得寬度跟著改變,達到放大效果温艇。