iOS屏幕適配教程(手動布局和自動布局)


iOS屏幕適配教程

  1.通過frame進行適配

在iOS早期開發,都是使用frame屬性進行屏幕適配,需要多套代碼,非常麻煩。

//使用frame添加控件view,並設置屬性,但是只能使用指定屏幕尺寸
    [super didReceiveMemoryWarning];
    UIView *greenView=[[UIView alloc]init];
    greenView.frame=CGRectMake(20, 20, 20, 20);
    greenView.backgroundColor=[UIColor greenColor];
    [self.view addSubview:greenView];

 

2.Autoresizing實現適配

隨着iOS的發展,后期蘋果公司添加了Autoresizing功能,用來約束父子控件之間的關系,以父控件作為參照進行設置,設置相應的參數。相應可用拖拽來實現,下面列出用代碼實現的方法

//設置兩個view,通過代碼實現兩個view(blueView,redView)一起變化
@interface ViewController ()
@property(nonatomic,weak)UIView *blueView;
//此處聲明redView父控件blueView
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
//    1.創建藍色的視圖
    UIView *blueView = [[UIView alloc]init];
    blueView.frame =  CGRectMake(0, 0, 200, 200);
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    self.blueView = blueView;
//    2.創建紅色的視圖
    UIView *redView = [[UIView alloc]init];
    CGFloat redViewH = 30;
    redView.frame = CGRectMake(0, 170, 200, redViewH);
    redView.backgroundColor = [UIColor redColor];
    [blueView addSubview:redView];
//    3.當修改藍色視圖的frame的時候,紅色的視圖跟着變化
//    紅色的寬帶隨着藍色的寬度變化而變化,距離頂部的間距始終是拉伸的
//    UIViewAutoresizingNone                 = 0,     //無拉伸
//    UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,//距離左邊拉伸
//    UIViewAutoresizingFlexibleWidth        = 1 << 1,//寬度拉伸
//    UIViewAutoresizingFlexibleRightMargin  = 1 << 2,//距離右邊邊拉伸
//    UIViewAutoresizingFlexibleTopMargin    = 1 << 3,//頂部拉伸
//    UIViewAutoresizingFlexibleHeight       = 1 << 4,//高度拉伸
    redView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
/**
 *  當點擊屏幕的時候就會觸發這個方法,點擊的時候,讓藍色視圖的frame變化。
 *
 *  @param touches <#touches description#>
 *  @param event   <#event description#>
 */
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ 
    CGRect tempFrame = self.blueView.frame;
    tempFrame.size.width +=30;
    tempFrame.size.height +=30;
    self.blueView.frame = tempFrame;
}
@end

3.Aotolayout實現適配

因為autorezing不能設置同級控件之間的關系,假設在豎屏下, 屏幕底部有兩個按鈕, 這兩個按鈕的間距為一個固定的值(寬度不指定); 當切換為橫屏的時候要求這兩個按鈕還顯示在屏幕底部, 並且按鈕間的間距不變, 按鈕可以隨之變寬,通過autorezing是無法實現的,所以在iOS6之后,蘋果公司推出aotolayout,既可以設置父子控件之間的關系也可以設置同級控件之間的關系,一經推出便在ios7開始大規模使用。

aotolayout里邊的兩個核心概念:約束和參照,一般一個控件確定位置需要四個約束,且這些約束都有相應參照的控件。

在使用aotolayout設置控件的時候,屏幕上控件的的位置區域會有兩種顏色:

黃色:表示當前的顯示效果和實際效果不匹配,需要更新frame

紅色:表示約束不完整,約束沖突(表示兩個或者多個約束約束的效果不一致)

在開發的時候基本都是使用拖拽及設置參數的方法進行設置,相對較為簡單,本位就不加贅述,下面筆者通過代碼進行設置

1 //    創建一個藍色的View視圖
2     UIView*blueView=[[UIView alloc]init];
3     blueView.backgroundColor=[UIColor  blueColor];
4     [self.view addSubview:blueView];

因為AutoLayout和Autoresizing不能重用,因此需要去掉autoresizing,所以可能添加約束的控件

1 //去掉所以可能添加約束的控件的autoresizing屬性
2     self.view.translatesAutoresizingMaskIntoConstraints=NO;
3     blueView.translatesAutoresizingMaskIntoConstraints=NO;

 給控件的屬性賦值 ,並添加在對應視圖上

    //設置left
NSLayoutConstraint *leftBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
     //設置right
    NSLayoutConstraint *rightBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    //設置top
    NSLayoutConstraint *topBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:30];
    //設置height
    NSLayoutConstraint *heighBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:30];
    //添加到對應參照控件上
    [self.view addConstraints:@[leftBlue,rightBlue,topBlue]];
    [blueView addConstraint:heightBlue];

 可以看到,通過代碼實現autolayout方法非常麻煩,因此通過拖拽創建相對方便快捷,但是在做一些支付信息,密碼保護等功能的時候,盡量使用代碼進行創建。

4.通過sizeClass進行適配

因為autolayout不能滿足設置一套約束,在所有的屏幕都適配,所以出現了sizeClass,size用來區分屏幕

sizeclass中把寬高各分成了三種類型regualr,compact,any,當寬度和高度各是某種類型的時候,就會確定某一類屏幕,當寬高均為any的時候,即可適配所有屏幕。所以確定九類屏幕,只是不屏幕進行了區分,具體的約束關系,但是具體的實現還需要autolayout來實現。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM