iOS 美丽说瀑布流界面纯AutoLayout光速布局

最新推荐文章于 2024-03-17 09:54:34 发布

Deft_MKJing宓珂璟

最新推荐文章于 2024-03-17 09:54:34 发布

阅读量6.8k

点赞数

分类专栏：基础知识文章标签：美丽说瀑布流 CollectionView UIStatusBar iOS开发

本文链接：https://blog.csdn.net/Deft_MKJing/article/details/51707585

版权

基础知识专栏收录该内容

73 篇文章 8 订阅

订阅专栏

最近在Github上看到三个库,分别是

GSKStretchyHeaderView,CHTCollectionViewWaterfallLayout ,JZNavigationExtension，

其中第一个是给CollectionView添加可动画的头部，添加方式和内容非常丰富，第二个是

瀑布流布局，第三个是UINavigationController的导航栏扩展。这三个东西厉害了啊，结

合起来咱们写个Demo，纯AutoLayout，效率非常高

(小弟搜集的好用的第三方库传送门：点击打开链接)

废话不多说，直接上车，无需投币，请自觉拉紧扶手，几分钟就搞定一个界面

主要知识点如下

1.瀑布流式的实现

2.MJExtension Json转Model 详情点击打开

3.UICollectionView的拉大头部实现

4.UICollectionReusableView的head嵌入UICollectionView

5.StatusBar的颜色切换，这个这里不介绍了详情点击打开

6.父视图的Alpha如何不影响子视图

1.首先，在我们新建的工程里面用cocopods导入需要的库，然后创建控制器，由于全是IB实现的，所以图很多，布

局的代码很少

如下图，我们在VC里面拖一个CollectionView进来，约束好让他充满屏幕，记住，我们的UICollectionViewLayout不在用了，换成图上的那个，要选择Custom进行替换

替换之后需要给上对应的属性代码，记得先把这个Laytou拖出去，一样Ctrl +鼠标拖出去就行了

@property (weak,nonatomic) IBOutletCHTCollectionViewWaterfallLayout *CHTLayout;

self.CHTLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);  
    // sectionHeader高度  
    self.CHTLayout.headerHeight = 80;  
    // sectionFooterHeight  
//    self.CHTLayout.footerHeight = 10;  
    // 间距  
    self.CHTLayout.minimumColumnSpacing = 10;  
    self.CHTLayout.minimumInteritemSpacing = 10;  
    self.CHTLayout.minimumContentHeight = 220;  
    // 多少列  
    self.CHTLayout.columnCount = 2;

2.然后看图，我们这里有两个CollectionView，把对应的cell先用IB抽出来

注册Cell，注意这里注册头的时候已经换了Layout了，千万别写错了

[self.collectionView registerNib:[UINib nibWithNibName:identyfy bundle:nil] forCellWithReuseIdentifier:identyfy];
    [self.collectionView registerNib:[UINib nibWithNibName:identyfy1 bundle:nil]forCellWithReuseIdentifier:identyfy1];
    [self.collectionView registerNib:[UINib nibWithNibName:reusehead bundle:nil] forSupplementaryViewOfKind:CHTCollectionElementKindSectionHeader withReuseIdentifier:reusehead];

3.接着，我们已经把UI的控件都准备好了，调用就行了，现在我们请求数据组装模型

- (void)MKJGETRequest:(NSString *)requestURL page:(NSInteger)page parameters:(NSDictionary *)parameters succeed:(completionBlock)succeedBlock failure:(completionBlock)failureBlock  
{  
    // AF3.0的方法  
    AFHTTPSessionManager *man = [AFHTTPSessionManager manager];  
    man.responseSerializer = [AFJSONResponseSerializer serializer];  
    man.responseSerializer.acceptableContentTypes = [NSSet setWithObjects:@"application/json", @"text/html",@"text/json",@"text/javascript", nil nil];  
      
    [man POST:requestURL parameters:@{  
                                      @"category_id" : @"48",  
                                      @"app" : @"higo",  
                                      @"category_source" : @"1",  
                                      @"client_id" : @"1",  
                                      @"cver" : @"5.1.0",  
                                      @"device_id" : @"h_13aa73608eac4f13a3a37987678ed986",  
                                      @"device_model" : @"iPhone 6S Plus",  
                                      @"device_token" : @"c8b128363664e6feda0bac9ae1931c53392994308e455ee1d481dc1108883402",  
                                      @"device_version" : @"9.3.2",  
                                      @"idfa" : @"2FF88C7F-0756-427B-A2A3-B7FB449D7043",  
                                      @"open_udid" : @"cdec8d86d9b086f705183232c1f607a106fa42b3",  
                                      @"p" : [NSString stringWithFormat:@"%ld",page],  
                                      @"package_type" : @"1",  
                                      @"qudaoid" : @"10000",  
                                      @"uuid" : @"486b8b8fd7b0b02d3852841bcdf6bba6",  
                                      @"ratio" : @"1242*2208",  
                                      @"size" : @"30",  
                                      @"ver" : @"0.8",  
                                      @"via" : @"iphone"  
                                        
    } progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {  
          
          
        // MJExtension的方法  
        [HigoList mj_setupObjectClassInArray:^NSDictionary *{  
            return @{@"category_list" : @"CategoryModel",@"goods_list":@"GoodsModel"};  
        }];  
          
        // 一句话变身为Model  
        HigoList *list = [HigoList mj_objectWithKeyValues:[responseObject valueForKey:@"data"]];  
        // 回调  
        if (succeedBlock) {  
            succeedBlock(nil,list);  
        }  
          
    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {  
        if (failureBlock) {  
            failureBlock(error,nil);  
        }  
    }];  
}

4.之后，我们在VC里面实现所有的代理方法

关键代理方法一，该方法加载Cell的大小，这里根据

self.CHTLayout.columnCount =2;这个方法来进行操作，首先如果这个第三方Layout的column是2，那么宽度就屏

幕的宽度除以2，如果是3就是除以3，所以这里CGSIZE的宽度没那没必要，他要的其实是一个宽度高度比例（注意和原生的已经不同了），例如CGSize(1,0.6)代表，宽度是屏幕的一般，高度是宽度的0.6倍

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
{  
    if (indexPath.item == 0) {  
        return CGSizeMake(1,0.6);  
    }  
    if (self.CHTLayout.columnCount == 2) {  
        return CGSizeMake(1,1.4);  
    }  
    else if (self.CHTLayout.columnCount == 3)  
    {  
        if (indexPath.item % 3 == 1) {  
            return CGSizeMake(1, 1.8);  
        }  
        else  
        {  
            return CGSizeMake(1, 1.7);  
        }  
          
    }  
    else  
    {  
        return CGSizeMake(1, 2);  
    }  
}

关键代理方法二，给SectionHeader里面的collectionView加载数据

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath  
{  
    if ([kind isEqualToString:CHTCollectionElementKindSectionHeader]) {  
        HeadCollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:reusehead forIndexPath:indexPath];  
        // 数组穿进去  
        header.headImages = self.headImages;  
        // 刷新里面的CollectionView控件  
        [header.headCollection reloadData];  
        return header;  
    }  
    return nil;  
}

5.其次，我们给CollectionView加一个头部，这个头想要什么效果都可以，我选择了下拉放大

记得创建一个继承与GSKStretchyHeaderView的View

@interface GSKNibStretchyHeaderView :GSKStretchyHeaderView
// GSK加载头部放大视图  
- (void)configGSKHeader  
{  
    self.isRefreshedData = YES;  
    // 需要不同效果请看源码，这里用IB加载的话就是能加载出Demo效果  
    NSArray* nibViews = [[NSBundle mainBundle] loadNibNamed:@"GSKNibStretchyHeaderView"  
                                                      owner:self  
                                                    options:nil];  
    self.GSKHeadView1 = nibViews.firstObject;  
    self.GSKHeadView1.gskMaskView.alpha = 0.3;  
    self.GSKHeadView1.maximumContentHeight = self.headerViewHeight;  
}

6.最后，来一组滚动时候让导航栏渐变

#import "JZNavigationExtension.h"

然后调用

self.jz_navigationBarBackgroundAlpha = alpha;就能改变导航栏的透明度


[selfsetNeedsStatusBarAppearanceUpdate];该方法是改变StatusBar的颜色的，上面给了链接，可以进去瞧瞧
#pragma mark - scrollView滚动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat y = scrollView.contentOffset.y;
    NSLog(@"%f",y);
    if (y >-self.headerViewHeight+1)
    {
        CGFloat deleta = self.headerViewHeight - 64;
        CGFloat alpha = (self.headerViewHeight+y)/deleta;
        self.jz_navigationBarBackgroundAlpha = alpha;
        
        if (alpha>0.6)
        {
            [self.backButton setImage:self.backItemImage2 forState:UIControlStateNormal];
            [self.backButton setImage:self.backItemHightLightImage2 forState:UIControlStateHighlighted];
             self.statusBarStyle = UIStatusBarStyleDefault;
            self.navigationItem.titleView.alpha = alpha;
            self.titleViewAlpha = self.navigationItem.titleView.alpha;
            self.title = @"呵呵";
        }
        else
        {
            self.statusBarStyle = UIStatusBarStyleLightContent;
            self.navigationItem.titleView.alpha = 0;
            self.titleViewAlpha = 0;
        }
        [self setNeedsStatusBarAppearanceUpdate];
    }
    else
    {
        self.title = @"";
        self.navigationItem.titleView.alpha = 0;
        self.titleViewAlpha = 0;
        self.jz_navigationBarBackgroundAlpha = 0;
        [self.backButton setImage:self.backItemImage1 forState:UIControlStateNormal];
        [self.backButton setImage:self.backItemHightLightImage1 forState:UIControlStateHighlighted];
        self.statusBarStyle = UIStatusBarStyleLightContent;
        [self setNeedsStatusBarAppearanceUpdate];
    }


}

Tips：父视图的Alpha如何不影响子视图

[[UIColorredColor] colorWithAlphaComponent:0.7];

用该方法给需要控件的BackgroundColor赋值就不会影响子视图了

差不多介绍到这里，一个简单的Demo就这样完了，用不了几分钟，需要看详情的请戳

Demo地址:https://github.com/DeftMKJ/Higo

Deft_MKJing宓珂璟

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
iOS 美丽说瀑布流界面纯AutoLayout光速布局

最近在Github上看到三个库,分别是GSKStretchyHeaderView,CHTCollectionViewWaterfallLayout ,JZNavigationExtension，其中第一个是给CollectionView添加可动画的头部，添加方式和内容非常丰富，第二个是瀑布流布局，第三个是UINavigationController的导航栏扩展。这三个东西厉
复制链接

扫一扫