IOS开发之UI布局

简介:

前言:本篇随笔会经常更新,随着本人对布局的深入学习,会不断补充新的知识、新的使用技巧、新的认识等等。

 

1、Autoresizing(在代码中使用)

先简单的看看下面的代码,以及左边运行出来的效果,然后后面就会对iPhone模拟器进行旋转,再看看效果,然后结合代码中的autoresizingMask属性来体会一下:

横屏之后,说明竖屏默认的frame(0,0,100,500)换到横屏之后会默认在中间一些的位置,但是因为上面设置autoresizingMask属性是左边和上边自动伸缩:

以上就是基本的autoresizing在代码中的使用。

 

2、Autolayout的使用(代码中使用)

在Autolayout之前,有Autoresizing可以做屏幕适配,但是局限性很大,有些任务根本无法完成(Autoresizing只能设置自身和父控件之间的相对关系)。

相比之下,Autolayout的功能就比Autoresizing的功能就强大的多,它能解决任何控件之间的关系。

 

AutoLayout的2个核心概念:

  ①约束:通过给控件添加约束,来决定控件的位置和尺寸。

    使用AutoLayout就需要创建约束类创建约束对象:

      NSLayoutConstraint *leftLC = [NSLayoutConstraint constrainWithItem:......];

  ②参照:在添加约束时,是依照谁来添加(可以是父控件或者兄弟控件)。

 

如果会使用Autolayout就可以不需要考虑Frame值了。

 

在实际开发中,如果要使用AutoLayout,要注意一个问题,有的苹果Cocoa框架提供UIView或者自定义的UIView可能默认设置了相关Autoresizing,那么可能会和你后面添加的AutoLayout代码相互冲突,所以就需要下面的代码,将Autoresizing自动转换为AutoLayout:

代码实现Autolayout的步骤

    1. 利用NSLayoutConstraint类创建具体的约束对象
    2. 添加约束对象到相应的view上
    3. - (void)addConstraint:(NSLayoutConstraint *)constraint;
    4. - (void)addConstraints:(NSArray *)constraints;

   然后下面代码来使用AutoLayout,我们来实现下面的效果,当然旋转成竖屏还是要这样的布局哦,不然自动布局还有啥意义:

  

在代码实现之前,我需要补充几个知识:

 使用自动布局是需要遵守一些约束的规则的:

  添加约束的规则(1)

    在创建约束之后,需要将其添加到作用的view上
在添加时要注意目标view需要遵循以下规则:
1)对于两个同层级view之间的约束关系,添加到它们的父view上

    
添加约束的规则(2)
2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上


添加约束的规则(3)
3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上

在下面展示全部的代码中,我抽取一部分来理解上面约束添加规则的意思:

    

    接着再补充这个约束的类和创建对象的各个参数的意义:

      一个NSLayoutConstraint对象就代表一个约束。
创建约束对象的常用方法

        
view1 :要约束的控件
attr1 :约束的类型(做怎样的约束)
relation :与参照控件之间的关系
view2 :参照的控件
attr2 :约束的类型(做怎样的约束)
multiplier :乘数
c :常量

     下面展示实现的完整代码:

- (void)viewDidLoad {
    [super viewDidLoad];
    // 1.创建蓝色的view
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 禁止autoresizing自动转为autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    // 2.创建红色的view
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    // 禁止autoresizing自动转为autolayout的约束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 设置约束
    /*****蓝色view的约束****/
    // 左边的约束
    // 左边约束
    NSLayoutConstraint *leftlc_b = \
     [NSLayoutConstraint constraintWithItem:blueView
                                  attribute:NSLayoutAttributeLeft
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:self.view
                                  attribute:NSLayoutAttributeLeft
                                 multiplier:1.0
                                   constant:30];
    [self.view addConstraint:leftlc_b];
    
    // 底部约束
    NSLayoutConstraint *bottomlc_b = \
    [NSLayoutConstraint constraintWithItem:blueView
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:-30];
    [self.view addConstraint:bottomlc_b];
    
    // 右边约束
    NSLayoutConstraint *rightlc_b = \
    [NSLayoutConstraint constraintWithItem:blueView
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:redView
                                 attribute:NSLayoutAttributeLeft
                                multiplier:1.0
                                  constant:-30];
    [self.view addConstraint:rightlc_b];
    
    // 宽度约束
    NSLayoutConstraint *wlc_b = \
    [NSLayoutConstraint constraintWithItem:blueView
                                 attribute:NSLayoutAttributeWidth
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:redView
                                 attribute:NSLayoutAttributeWidth
                                multiplier:1.0
                                  constant:0];
    [self.view addConstraint:wlc_b];
    
    // 高度约束
    NSLayoutConstraint *hlc_b = \
    [NSLayoutConstraint constraintWithItem:blueView
                                 attribute:NSLayoutAttributeHeight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute
                                multiplier:0.0
                                  constant:50];
    [blueView addConstraint:hlc_b];

     /*****红色view的约束****/
    // 右边约束
    NSLayoutConstraint *rightlc_r = \
    [NSLayoutConstraint constraintWithItem:redView
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeRight
                                multiplier:1.0
                                  constant:-30];
    [self.view addConstraint:rightlc_r];
    
    // 顶部对齐
    NSLayoutConstraint *toplc_r = \
    [NSLayoutConstraint constraintWithItem:redView
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:blueView
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                  constant:0];
    [self.view addConstraint:toplc_r];
    
    // 底部对齐
    NSLayoutConstraint *bottomlc_r = \
    [NSLayoutConstraint constraintWithItem:redView
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:blueView
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:0];
    [self.view addConstraint:bottomlc_r];

}

 

补充:

  

相关文章
|
21天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
85 3
|
3月前
|
存储 iOS开发
iOS 开发,如何进行应用的本地化(Localization)?
iOS 开发,如何进行应用的本地化(Localization)?
122 2
|
3月前
|
存储 数据建模 数据库
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
39 0
|
3月前
|
安全 编译器 Swift
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
91 2
|
7天前
|
API 定位技术 iOS开发
IOS开发基础知识:什么是 Cocoa Touch?它在 iOS 开发中的作用是什么?
【4月更文挑战第18天】**Cocoa Touch** 是iOS和Mac OS X应用的核心框架,包含面向对象库、运行时系统和触摸优化工具。它提供Mac验证的开发模式,强调触控接口和性能,涵盖3D图形、音频、网络及设备访问API,如相机和GPS。是构建高效iOS应用的基础,对开发者至关重要。
11 0
|
17天前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。
|
22天前
|
开发工具 Swift iOS开发
利用SwiftUI构建动态用户界面:iOS开发新范式
【4月更文挑战第3天】 随着苹果不断推进其软件开发工具的边界,SwiftUI作为一种新兴的编程框架,已经逐渐成为iOS开发者的新宠。不同于传统的UIKit,SwiftUI通过声明式语法和强大的功能组合,为创建动态且响应式的用户界面提供了一种更加简洁高效的方式。本文将深入探讨如何利用SwiftUI技术构建具有高度自定义能力和响应性的用户界面,并展示其在现代iOS应用开发中的优势和潜力。
|
2月前
|
前端开发 C# 索引
浅谈WPF之UI布局
一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述WPF中布局 面板 控件的使用,仅供学习分享使用,如有不足之处,还请指正。
38 1
|
2月前
|
监控 API Swift
用Swift开发iOS平台上的上网行为管理监控软件
在当今数字化时代,随着智能手机的普及,人们对于网络的依赖日益增加。然而,对于一些特定场景,如家庭、学校或者企业,对于iOS设备上的网络行为进行管理和监控显得尤为重要。为了满足这一需求,我们可以利用Swift语言开发一款iOS平台上的上网行为管理监控软件。
196 2