iOS xib 的使用 scrollView,cell 的自适应

最新推荐文章于 2021-08-24 20:43:34 发布

转载最新推荐文章于 2021-08-24 20:43:34 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/alanTang123/blog/824802

文章标签：

#python

本文详细介绍了如何在 iOS 开发中使用 xib 进行 scrollView 和 cell 的自适应布局，并展示了如何利用 xib 实现 collection view 的 header 自定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

iOS xib 的使用 scrollView,cell 的自适应

最近想写点儿什么,一下子没想起来,就简答的说一下 xib 的使用以及注意事项吧

1 scrollView 在 xib 中的实际应用

创建一个控制器,同时创建 xib
打开 xib ,将控件 scrollView 拖进 view, 然后添加上下左右约束,全部设为0,最后快捷键更新约束 "command + shift + ="

1.3 重点来了,重新拖一个 view 添加到 scrollView 上面,同样设置约束上下左右为0,这个时候先别着急更新约束,并且会爆红,先别着急,因为还有两步,设置横向居中还是垂直居中?这个就决定了你的滑动方向是横向还是纵向,选择其中一个就可以了(Horizontally in Container / Verically in Container) ;

然后设置一下 view 的高度或者宽度(如果是纵向滑动的话就是高度,如果是横向的话就是宽度),这个自行设定,

然就好,我这里设置高度,然后就可以更新约束,紧接着找到刚刚设定的高度的约束,然后将其约束拖成属性

接着,在控制器里面执行方法

- (void)updateViewConstraints {

    [super updateViewConstraints];
// 设置滑动的范围
    self.bottomViewHeightConstant.constant = 1000.f;

}

其实,到这一步, scrollView 已经可以滑动了,现在在 bottomView 上面放两个 view, 然后运行一下就可以看到效果了!

2. xib 自定义 cell ,自适应cell高度

创建自定义的cell 同时选中 xib, 这个就不再说了
拖动cell 的高度到合适的大小即可,够我们放其他子控件即可 (这个时候我们这里就是简单的放两个控件,一个是 imageView 和一个 label)
首先拖入 imageView ,添加约束,上左右以及高;接着拖入 label, 添加约束,上下左右皆为0即可
这个时候其实已经创建好了, so, 我们去自定义 tableView 吧!然后实现 tableView 的代理方法,设置 row 的高度

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    self.rowHeight = UITableViewAutomaticDimension;   // 一定设置这个,这个只对 xib 或者 Sb 有效

    self.estimatedRowHeight = 160;  // 估计高

    return self.rowHeight;

}

3 用 xib 自定义 collection 的 headerSection ,在做一些商城的时候,这个一定会接触,一定会用到,淘宝的首页大家可以看一下,可以代码写,但是xib 去做也是可以的,下面会有几个注意事项:

我们看 collectionView 的代理方法的话就很清楚的看到,自定义 headerSction ,并不是直接继承UIView, 而是继承UICollectionReusableView
创建一个基类 BaseCollectionReusableView , 不创建 xib,在.h文件中声明下述方法:

+(NSString*)cellIdentifier;

+(id)collectionReusableViewForCollectionView:(UICollectionView*)collectionView

                                     fromNib:(UINib*)nib

                                forIndexPath:(NSIndexPath*)indexPath

                                    withKind:(NSString*)kind;



+(id)collectionReusableViewForCollectionView:(UICollectionView*)collectionView

                                forIndexPath:(NSIndexPath*)indexPath withKind:(NSString*)kind;



+(UINib*)nib;

3. m 中实现

+(id)collectionReusableViewForCollectionView:(UICollectionView*)collectionView
                                     fromNib:(UINib*)nib
                                forIndexPath:(NSIndexPath*)indexPath
                                    withKind:(NSString*)kind{
    
    NSString *cellIdentifier = [self cellIdentifier];
    [collectionView registerClass:[self class] forSupplementaryViewOfKind:kind withReuseIdentifier:cellIdentifier];
    [collectionView registerNib:nib forSupplementaryViewOfKind:kind withReuseIdentifier:cellIdentifier];
    HQCollectionReusableView *cell = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    return cell;
}

-(void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes{
    [super applyLayoutAttributes:layoutAttributes];
    
    //
}

+(id)collectionReusableViewForCollectionView:(UICollectionView*)collectionView
                                forIndexPath:(NSIndexPath*)indexPath withKind:(NSString*)kind{
    return [[self class] collectionReusableViewForCollectionView:collectionView
                                                         fromNib:[self nib]
                                                    forIndexPath:indexPath
                                                        withKind:kind];
}

+ (NSString *)nibName {
    return [self cellIdentifier];
}

+ (NSString *)cellIdentifier {
    [NSException raise:NSInternalInconsistencyException format:@"WARNING: YOU MUST OVERRIDE THIS GETTER IN YOUR CUSTOM CELL .M FILE"];
    static NSString* _cellIdentifier = nil;
    _cellIdentifier = NSStringFromClass([self class]);
    return _cellIdentifier;
}

+(UINib*)nib{
    NSBundle * classBundle = [NSBundle bundleForClass:[self class]];
    UINib * nib = [UINib nibWithNibName:[self nibName]
                                 bundle:classBundle];
    return nib;
}

4. 创建一对继承于BaseCollectionReusableView的子类TestCollectionReusableView,同时创建一个 view 的 xib ,设置 class 为 TestCollectionReusableView

5. 在该 xib 上面自己创建需要的视图(以及布局)

6. 在.m 中必须实现方法

// MUST OVERRIDE THIS IN .M FILE
+ (NSString *)cellIdentifier {
    static NSString* _cellIdentifier = @"TestCollectionReusableView";
    _cellIdentifier = NSStringFromClass([self class]);
    return _cellIdentifier;
}

7.在 collectionView 的代理方法中实现即可,注意重用 headerSectionView (有关的 demo 之后会附上,tableview 的 headerSection 其实差不多)

static NSString *kHeaderIdentify   =    @"TestCollectionReusableView"; 

[self.collectioView registerNib:[UINib nibWithNibName:kHeaderIdentify bundle:[NSBundle mainBundle]] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeaderIdentify];

//这个方法是返回 Header的大小 size

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {

}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {

    if (kind == UICollectionElementKindSectionHeader) {

        TestCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:kHeaderIdentify forIndexPath:indexPath];

        return headerView;

    }

    else {

        return nil;

    }

}

转载于:https://my.oschina.net/alanTang123/blog/824802