zoukankan      html  css  js  c++  java
  • AutoLayout适配

    http://www.raywenderlich.com/113768/adaptive-layout-tutorial-in-ios-9-getting-started

    iOS布局和屏幕适配的一点总结


    曾经,iOS开发是不需要考虑屏幕适配问题的,因为只有一种屏幕尺寸。而现在已经有了4种屏幕,4,5,6,6P,因此屏幕适配也成了iOS开发中必须考虑的问题。并且,这4种屏幕的宽高比全部都不一样,所以简单的按比例缩放并不能解决问题。我们最近做的一个APP也处理了屏幕适配,本文简单总结一下
    根据屏幕类型判断
    我不知道有没有更好的办法,我们的做法是根据设备类型,写一些if...else,或者switch语句
    判断机型可以使用screen的height(不能使用width,因为4和5的width是一样的,都是320),也可以使用API里的宏,都差不多。我个人感觉,if...else似乎是不可避免的,虽然有auto layout,但是有一些大的布局改动,或者字体大小,不用判断似乎是无法解决的
    比如说,为了达到最佳显示效果,我们在大的屏幕上使用CollectionView,而在4S上使用TableView,用自动布局应该是没有办法做到的。或者根据屏幕的大小,切换字体大小,好像也只能通过if...else来实现
    根据屏幕类型适配,代码类似:
    Objc代码 收藏代码
    if(screenType == LosScreenType6P){
    layout.minimumInteritemSpacing = 30;
    }else if(screenType == LosScreenType5){
    layout.minimumInteritemSpacing = 5;
    }else{
    layout.minimumInteritemSpacing = 15;
    }

    frame计算
    我们也用了比较多的“硬计算”,比如对于UICollectionView里的每个cell的width,我们是这么处理的:
    Objc代码 收藏代码
    CGRect rect = [[UIScreen mainScreen] bounds];
    screenWidth = rect.size.width;
    cellWidth = (screenWidth - 30) / 3;
    cellHeight = cellWidth * 0.8 + 50;

    Objc代码 收藏代码
    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
    {
    return CGSizeMake(cellWidth, cellHeight);
    }

    我们规定CollectionView里每行有3个单元格,整个section的左右间距是10,列间距是5,因此计算出 (width - 30) / 3就是每个单元格的宽度,单元格的高度也是经过计算写死的
    我不太确定这种方式好不好,不过对于这个页面是好使的。类似这种基于屏幕尺寸做计算的方法,APP里在几个页面都有用到
    Masonry
    Masonry是我们实现屏幕适配的重要手段之一,本质上是界面约束的语法糖。基本上,我们的做法是:大的页面关系,用计算完成;每个小块里面的相对位置关系,用Masonry来做。在有些场景下,Masonry有非常大的优势。比如说:
    1、设置某个View的宽高比
    Objc代码 收藏代码
    [thumbImageView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(@0);
    make.left.equalTo(@0);
    make.width.equalTo(self);
    make.height.equalTo(thumbImageView.mas_width).multipliedBy(0.8);
    }];

    此View的宽度与父View同宽,高度是宽度的0.8
    2、设置居中,设置相对边距
    Objc代码 收藏代码
    [authorName mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(avatarImageView);
    make.left.equalTo(avatarImageView.mas_right).offset(5);
    make.right.equalTo(@-5);
    }];

    垂直方向与另一个View对齐,左边距离上一个元素的右边5,右边距离父View右边5
    类似这种布局,用frame来写会复杂很多,如果再考虑屏幕适配,需要非常多代码。这类的需求,Masonry堪称神器。不过使用中发现,用Masonry布局的View,我们通常会init,或者initWithFrame:CGRectZero。这个View直到经过Masonry处理以后,它的origin和size才能确定,如果在此之前就用到它的origin和size,就会有问题
    整体替换UIView
    对于适配后变化不大的页面,把if...else写在UIView里,但是有个别页面,完全要根据设备显示不同的View。这种情况比较适合在Controller里做判断,然后load不同的View

  • 相关阅读:
    [原]poj-2680-Choose the best route-dijkstra(基础最短路)
    [转]c/c++输入函数
    [原]poj-2524(裸并查集)
    [原]poj-1611-The Suspects(水并查集)
    ccnu-线段树-简单的区间更新(三题)
    团队博客(3)
    个人NABCD
    团队博客(2)
    团队博客(1)
    课堂练习:返回一个二维数组中最大子数组的和
  • 原文地址:https://www.cnblogs.com/zhufengshibei/p/5034347.html
Copyright © 2011-2022 走看看