先来一张效果图
这里的布局主要是分为两部分，整体使用UITableView，上面的图片及卡片为UITableView的头部，下面就是Cell了
下面主要介绍高斯模糊和图片下拉放大两个部分：
高斯模糊
这里的高斯模糊主要使用的是UIImage+ImageEffects，只需要两个文件即可，里面提供了以下几个方法：
#pragma mark - Blur Image
/**
* Get blured image.
*
* @return Blured image.
*/
- (UIImage *)blurImage;
/**
* Get the blured image masked by another image.
*
* @param maskImage Image used for mask.
*
* @return the Blured image.
*/
- (UIImage *)blurImageWithMask:(UIImage *)maskImage;
/**
* Get blured image and you can set the blur radius.
*
* @param radius Blur radius.
*
* @return Blured image.
*/
- (UIImage *)blurImageWithRadius:(CGFloat)radius;
/**
* Get blured image at specified frame.
*
* @param frame The specified frame that you use to blur.
*
* @return Blured image.
*/
- (UIImage *)blurImageAtFrame:(CGRect)frame;
#pragma mark - Grayscale Image
/**
* Get grayScale image.
*
* @return GrayScaled image.
*/
- (UIImage *)grayScale;
#pragma mark - Some Useful Method
/**
* Scale image with fixed width.
*
* @param width The fixed width you give.
*
* @return Scaled image.
*/
- (UIImage *)scaleWithFixedWidth:(CGFloat)width;
/**
* Scale image with fixed height.
*
* @param height The fixed height you give.
*
* @return Scaled image.
*/
- (UIImage *)scaleWithFixedHeight:(CGFloat)height;
/**
* Get the image average color.
*
* @return Average color from the image.
*/
- (UIColor *)averageColor;
/**
* Get cropped image at specified frame.
*
* @param frame The specified frame that you use to crop.
*
* @return Cropped image
*/
- (UIImage *)croppedImageAtFrame:(CGRect)frame;
每个方法都有注释，总体来说这些方法分为三类：
Blur Image 模糊图片
- (UIImage *)blurImage; // 调用后直接返回一张模糊的图片
- (UIImage *)blurImageWithMask:(UIImage *)maskImage; // 返回带有遮罩层的模糊图片
- (UIImage *)blurImageWithRadius:(CGFloat)radius; // 返回一张模糊图片，模糊度可以自己设置
- (UIImage *)blurImageAtFrame:(CGRect)frame; // 返回一张特定大小的模糊图片
Grayscale Image 灰度图片
Some Useful Method 一些有用的方法
- (UIImage *)scaleWithFixedWidth:(CGFloat)width; // 根据宽度缩放图片
- (UIImage *)scaleWithFixedHeight:(CGFloat)height; // 根据高度缩放图片
- (UIColor *)averageColor; // 获得图片的平均色值
- (UIImage *)croppedImageAtFrame:(CGRect)frame; // 裁剪出特定大小的图片
图片下拉放大
下拉图片放大的原理也是非常简单的。主要就是在UITableView上边添加一个图片子视图，在UITableView拖动的时候动态的改变图片的frame。
1. 设置UITableView
UITableView的设置跟平常的一样，使用xib也可以，代码也可以。我这里以代码示例
self.tableV = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight - 49) style:(UITableViewStyleGrouped)];
_tableV.backgroundColor = [UIColor groupTableViewBackgroundColor];
_tableV.separatorStyle = UITableViewCellSeparatorStyleNone;
_tableV.delegate = self;
_tableV.dataSource = self;
_tableV.tableFooterView = [[UIView alloc] init];
[self.view addSubview:_tableV];
注意，我们要通过设置
UITableView的内容偏移来为图片预留出位置
_tableV.contentInset = UIEdgeInsetsMake(kHeaderViewHeight, 0, 0, 0); // kHeaderViewHeight是宏定义，预留出的位置 200
2. 设置图片子视图
接下来就是设置图片子视图了，因为项目中这个子视图不仅仅只有图片，还有别的内容，就单独拉出来使用xib实现了，效果图就是本文第一张图了
self.headerView = kBundleLoadNibName(NSStringFromClass([HmMineHeaderView class]));
self.headerView.frame = CGRectMake(0, - kHeaderViewHeight, kScreenWidth, kHeaderViewHeight);
[self.tableV addSubview:_headerView];
注意：这里的子视图不论是直接一个
UIImageView，还是包含有其他的控件，一定要把UIImageView的contentMode设置为UIViewContentModeScaleAspectFill，只有这样才能保证图片在放大的过程中宽高同时放大。我的是在xib中就设置好了。
3. UITableView拖动事件处理
UITableView继承自UIScrollView，所以关于拖动事件的处理，我们可以放在UIScrollView的代理中实现
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat y = scrollView.contentOffset.y;
if (y < - kHeaderViewHeight) {
CGRect frame = self.headerView.frame;
frame.origin.y = y;
frame.size.height = -y;
self.headerView.frame = frame;
}
}
