OCUI界面设计：滚动视图与表格视图嵌套布局

效果展示

要点提示

• 滚动视图有一个属性叫做scrollsToTop，该属性的作用是当用户点击状态栏的时候，滚动视图会自动滚动至顶部，其默认值为YES，但当一个界面中出现两个及以上滚动视图（包括其子类如UITableView等）时，该特性将会失效，解决的办法就是将其他滚动视图的scrollsToTop属性值置为NO即可。

• 文本自适应除了调用sizeToFit方法，还可直接使用NSString的boundingRectWithSize...方法，该方法将返回一个CGRect结构体类型的值，在实际开发中，初始化UILabel之前，我们直接调用该方法，通过返回的CGRect中的CGSize值，设置文本标签的width和height，实现自适应的效果，具体实现请参考代码示例。

代码示例

#import "ViewController.h"

static NSString *const kUITableViewCellIdentifier = @"cellIdentifier";
static NSString *const kContext = @"Swift 是一种新的编程语言，用于编写 iOS 和 OS X 应用。Swift 结合了 C 和 Objective-C 的优点并且不受C兼容性的限制。Swift 采用安全的编程模式并添加了很多新特性，这将使编程更简单，更灵活，也更有趣。Swift 是基于成熟而且倍受喜爱得 Cocoa 和 Cocoa Touch 框架，他的降临将重新定义软件开发。Swift 的开发从很久之前就开始了。为了给 Swift 打好基础，苹果公司改进了编译器，调试器和框架结构。我们使用自动引用计数（Automatic Reference Counting, ARC）来简化内存管理。我们在 Foundation 和 Cocoa的基础上构建框架栈并将其标准化。Objective-C 本身支持块、集合语法和模块，所以框架可以轻松支持现代编程语言技术。正是得益于这些基础工作，我们现在才能发布这样一个用于未来苹果软件开发的新语言。Objective-C 开发者对 Swift 并不会感到陌生。它采用了Objective-C的命名参数以及动态对象模型，可以无缝对接到现有的 Cocoa 框架，并且可以兼容 Objective-C 代码。在此基础之上，Swift 还有许多新特性并且支持过程式编程和面向对象编程。操作优点Swift 对于初学者来说也很友好。它是第一个既满足工业标准又像脚本语言一样充满表现力和趣味的编程语言。它支持代码预览，这个革命性的特性可以允许程序员在不编译和运行应用程序的前提下运行 Swift 代码并实时查看结果。";

@interface ViewController () <UITableViewDataSource>

@property (nonatomic, strong) UIScrollView *mainScrollView;  /**< 主滚动视图 */
@property (nonatomic, strong) UIScrollView *childScollView;  /**< 子滚动视图 */
@property (nonatomic, strong) UILabel      *displayLabel;    /**< 文本标签 */
@property (nonatomic, strong) UITableView  *displayTableView;/**< 表格视图 */


- (void)initializeUserInterface; /**< 初始化用户界面 */

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initializeUserInterface];
}

#pragma mark *** Initialize methods ***

- (void)initializeUserInterface {

    // 关闭系统自动偏移
    self.automaticallyAdjustsScrollViewInsets = NO;

    // 视图加载
    [self.view addSubview:self.mainScrollView];
    [self.mainScrollView addSubview:self.childScollView];
    [self.mainScrollView addSubview:self.displayLabel];
    [self.mainScrollView addSubview:self.displayTableView];

    // 更新主滚动视图的内容显示大小
    CGFloat height = CGRectGetMaxY(self.displayTableView.frame);

    self.mainScrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.bounds), height);
}

#pragma mark *** Private methods ***

// 传入字符串，通过boundingRectWithSize...计算大小
- (CGSize)sizeWithString:(NSString *)string constraintWidth:(CGFloat)constraintWidth font:(UIFont *)font {

    CGRect rect = [string boundingRectWithSize:CGSizeMake(constraintWidth, 1000) // 约束
                                       options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading|NSStringDrawingUsesDeviceMetrics // 可选参数
                                    attributes:@{NSFontAttributeName:font} // 属性配置
                                       context:nil]; // 上下文
    return rect.size;
}

// 获取随机色
- (UIColor *)specialRandomColor {

    CGFloat hue = arc4random() % 256 / 256.0 ;  //  0.0 to 1.0
    CGFloat saturation = arc4random() % 128 / 256.0 + 0.5;  //  0.5 to 1.0, away from white
    CGFloat brightness = arc4random() % 128 / 256.0 + 0.5;  //  0.5 to 1.0, away from black

    return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];
}

#pragma mark *** UITableViewDataSource ***

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kUITableViewCellIdentifier];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:kUITableViewCellIdentifier];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"第%ld行", indexPath.row];
    return cell;
}

#pragma mark - Getter methods
- (UIScrollView *)mainScrollView {
    if (!_mainScrollView) {
        // 初始化主滚动视图
        _mainScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds) - 20)];
        // 设置背景颜色
        _mainScrollView.backgroundColor = [UIColor blackColor];
        // 设置内容大小（contentSize），此处可以给一个估计值，后面会根据实际动态计算值。
        _mainScrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.bounds), 1000);
    }
    return _mainScrollView;
}

- (UIScrollView *)childScollView {
    if (!_childScollView) {
        // 初始化子滚动视图
        _childScollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 240)];
        // 设置背景颜色
        _childScollView.contentSize = CGSizeMake(3 *CGRectGetWidth(_childScollView.bounds), CGRectGetHeight(_childScollView.bounds));
        // 设置是否分页
        _childScollView.pagingEnabled = YES;
        // 在一个界面中，如果出现多个滚动视图或其子类，则scrollsToTop点击状态栏返回顶部将会失效，解决办法就是将其他滚动视图的scrollsToTop置为NO；
        _childScollView.scrollsToTop = NO;

        // 添加图片视图
        for (int i = 0; i < 3; i++) {
            UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(i *CGRectGetWidth(_childScollView.bounds), 0, CGRectGetWidth(_childScollView.bounds), CGRectGetHeight(_childScollView.bounds))];
            // 设置图片视图背景色为随机色
            imgView.backgroundColor = [self specialRandomColor];
            // 将图片视图加载到滚动视图中
            [_childScollView addSubview:imgView];
        }
    }
    return _childScollView;
}

- (UILabel *)displayLabel {
    if (!_displayLabel) {
        // 文本自适应：根据字符串计算高度
        CGSize size = [self sizeWithString:kContext constraintWidth:CGRectGetWidth(self.view.bounds) font:[UIFont systemFontOfSize:16]];
        // 初始化文本标签
        _displayLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(self.childScollView.frame) + 10, size.width, size.height)];
        _displayLabel.font  = [UIFont systemFontOfSize:16];
        _displayLabel.text  = kContext;
        _displayLabel.numberOfLines   = 0;
        _displayLabel.backgroundColor = [UIColor whiteColor];
    }
    return _displayLabel;
}

- (UITableView *)displayTableView {
    if (!_displayTableView) {
        _displayTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(self.displayLabel.frame) + 10, CGRectGetWidth(self.view.bounds), 300) style:UITableViewStylePlain];
        // 设置数据源
        _displayTableView.dataSource   = self;
        _displayTableView.scrollsToTop = NO;

        _displayTableView.tableFooterView = [UIView new];
    }
    return _displayTableView;
}

@end