先來看看後果圖,因為錄屏軟件不給力,毛玻璃後果不顯著,請見諒。
步調詳解:
說下思緒,很簡略,起首自界說一個collectionView
, 重寫它的initWithFrame:collectionViewLayout:
辦法,在這外面做設置裝備擺設,這裡用的是AXECollectionView
.
與之對應的自界說一個collectionViewCell
,在cell
裡設置裝備擺設操作:設置layer
塗層,加載圖片等操作,這裡用的是AXECollectionViewCell
.
最初在須要展現的掌握器裡挪用AXECollectionView
,給它傳入一個自界說的流水結構和圖片數組,年夜功樂成.
示例代碼以下:
// viewController @interface ViewController () @property (nonatomic, strong) AXECollectionView *collectionView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // 流水結構 UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init]; flowLayout.minimumLineSpacing = kItem_Margin; flowLayout.minimumInteritemSpacing = [UIScreen mainScreen].bounds.size.height; flowLayout.itemSize = CGSizeMake([UIScreen mainScreen].bounds.size.width - kItem_Margin, kItem_Height); flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal; flowLayout.sectionInset = UIEdgeInsetsMake(0, kItem_Margin / 2, 0, kItem_Margin / 2); CGRect frame = self.view.bounds; _collectionView = [[AXECollectionView alloc] initWithFrame:frame collectionViewLayout:flowLayout]; // 傳入圖片數組 _collectionView.imgArr = @[ @"0", @"1", @"2", @"3", @"4", @"5", @"6", @"7", ]; [self.view addSubview:_collectionView]; } // AXECollectionView.h @interface AXECollectionView : UICollectionView @property (nonatomic, strong) NSArray *imgArr; @end // AXECollectionView.m @interface AXECollectionView () <UICollectionViewDelegate, UICollectionViewDataSource> // 配景imgView @property (nonatomic, strong) UIImageView *bgImgView; @end @implementation AXECollectionView static NSString *const AXECollectionViewCellID = @"AXECollectionViewCell"; - (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout { if(self = [super initWithFrame:frame collectionViewLayout:layout]) { [self setup]; } return self; } - (void)setup { self.showsVerticalScrollIndicator = NO; self.showsHorizontalScrollIndicator = NO; self.pagingEnabled = YES; self.dataSource = self; self.delegate = self; [self registerClass:[AXECollectionViewCell class] forCellWithReuseIdentifier:AXECollectionViewCellID]; // collectionView配景view UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:self.bounds]; self.backgroundView = bgImgView; self.bgImgView = bgImgView; // 毛玻璃後果 (IOS8.0今後實用) UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect]; effectView.frame = self.bounds; [self.backgroundView addSubview:effectView]; } #pragma mark - UICollectionViewDataSource - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { AXECollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:AXECollectionViewCellID forIndexPath:indexPath]; cell.img = self.imgArr[indexPath.row]; // 設置毛玻璃圖片 self.bgImgView.image = [UIImage imageNamed:self.imgArr[indexPath.row]]; return cell; } - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return self.imgArr.count; } #pragma mark - UICollectionViewDelegate - (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath { AXECollectionViewCell *myCell = (AXECollectionViewCell *)cell; [UIView animateWithDuration:0.5 animations:^{ myCell.transform = CGAff.netransformScale(CGAff.netransformIdentity, 1.0, 1.4); }]; }
彌補一下
例子中我是用的UIBlurEffect
做的毛玻璃後果,這個是IOS8今後湧現的,假如你要適配7的體系,那就要另做設置裝備擺設.
假如不消UIBlurEffect
的話,上面這兩種異樣能做出隱約後果,只不外第一種機能較差,建議年夜家按需應用.
// 前往濾鏡處置後圖片 - (UIImage *)coreBlurImage:(UIImage *)image withBlurNumber:(CGFloat)blur { CIContext *context = [CIContext contextWithOptions:nil]; CIImage *inputImage= [CIImage imageWithCGImage:image.CGImage]; // 設置filter CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"]; [filter setValue:inputImage forKey:kCIInputImageKey]; [filter setValue:@(blur) forKey: @"inputRadius"]; // 隱約圖片 CIImage *result=[filter valueForKey:kCIOutputImageKey]; CGImageRef outImage=[context createCGImage:result fromRect:[result extent]]; UIImage *blurImage=[UIImage imageWithCGImage:outImage]; CGImageRelease(outImage); return blurImage; } // 前往高斯後果隱約圖片 - (UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur { if (blur < 0.f || blur > 1.f) { blur = 0.5f; } int boxSize = (int)(blur * 40); boxSize = boxSize - (boxSize % 2) + 1; CGImageRef img = image.CGImage; vImage_Buffer inBuffer, outBuffer; vImage_Error error; void *pixelBuffer; // 從CGImage中獲得數據 CGDataProviderRef inProvider = CGImageGetDataProvider(img); CFDataRef inBitmapData = CGDataProviderCopyData(inProvider); // 設置從CGImage獲得對象的屬性 inBuffer.width = CGImageGetWidth(img); inBuffer.height = CGImageGetHeight(img); inBuffer.rowBytes = CGImageGetBytesPerRow(img); inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData); pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img)); if(pixelBuffer == NULL) NSLog(@"No pixelbuffer"); outBuffer.data = pixelBuffer; outBuffer.width = CGImageGetWidth(img); outBuffer.height = CGImageGetHeight(img); outBuffer.rowBytes = CGImageGetBytesPerRow(img); error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend); if (error) { NSLog(@"error from convolution %ld", error); } CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGContextRef ctx = CGBitmapContextCreate( outBuffer.data, outBuffer.width, outBuffer.height, 8, outBuffer.rowBytes, colorSpace, kCGImageAlphaNoneSkipLast); CGImageRef imageRef = CGBitmapContextCreateImage (ctx); UIImage *returnImage = [UIImage imageWithCGImage:imageRef]; // clean up CGColorSpaceRelease(colorSpace); free(pixelBuffer); CFRelease(inBitmapData); CGColorSpaceRelease(colorSpace); CGImageRelease(imageRef); return returnImage; }
總結
以上就是IOS自界說collectionView完成毛玻璃後果的全體內容,願望能對列位iOS開辟者們有必定的贊助,假如有疑問年夜家可以留言交換,感謝年夜家對本站的支撐。
【iOS自界說collectionView完成毛玻璃後果】的相關資料介紹到這裡,希望對您有所幫助! 提示:不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦!