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];

}

 

补充:

  

相关文章
|
5天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
8天前
|
安全 数据处理 Swift
深入探索iOS开发中的Swift语言特性
本文旨在为开发者提供对Swift语言在iOS平台开发的深度理解,涵盖从基础语法到高级特性的全面分析。通过具体案例和代码示例,揭示Swift如何简化编程过程、提高代码效率,并促进iOS应用的创新。文章不仅适合初学者作为入门指南,也适合有经验的开发者深化对Swift语言的认识。
25 9
|
7天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
5天前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。
|
8天前
|
JSON 前端开发 API
探索iOS开发之旅:打造你的第一个天气应用
【10月更文挑战第36天】在这篇文章中,我们将踏上一段激动人心的旅程,一起构建属于我们自己的iOS天气应用。通过这个实战项目,你将学习到如何从零开始搭建一个iOS应用,掌握基本的用户界面设计、网络请求处理以及数据解析等核心技能。无论你是编程新手还是希望扩展你的iOS开发技能,这个项目都将为你提供宝贵的实践经验。准备好了吗?让我们开始吧!
|
13天前
|
设计模式 前端开发 Swift
探索iOS开发:从初级到高级的旅程
【10月更文挑战第31天】在这篇文章中,我们将一起踏上iOS开发的旅程。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和技巧。我们将从基础开始,逐步深入到更高级的技术和概念。让我们一起探索iOS开发的世界吧!
|
16天前
|
设计模式 前端开发 Swift
探索iOS开发:从初级到高级的旅程
【10月更文挑战第28天】在这篇技术性文章中,我们将一起踏上一段探索iOS开发的旅程。无论你是刚入门的新手,还是希望提升技能的开发者,这篇文章都将为你提供宝贵的指导和灵感。我们将从基础概念开始,逐步深入到高级主题,如设计模式、性能优化等。通过阅读这篇文章,你将获得一个清晰的学习路径,帮助你在iOS开发领域不断成长。
47 2
|
22天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
74 8
|
21天前
|
安全 API Swift
探索iOS开发中的Swift语言之美
【10月更文挑战第23天】在数字时代的浪潮中,iOS开发如同一艘航船,而Swift语言则是推动这艘船前进的风帆。本文将带你领略Swift的独特魅力,从语法到设计哲学,再到实际应用案例,我们将一步步深入这个现代编程语言的世界。你将发现,Swift不仅仅是一种编程语言,它是苹果生态系统中的一个创新工具,它让iOS开发变得更加高效、安全和有趣。让我们一起启航,探索Swift的奥秘,感受编程的乐趣。
|
23天前
|
Swift iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】在苹果生态系统中,SwiftUI的引入无疑为iOS应用开发带来了革命性的变化。本文将通过深入浅出的方式,带领读者了解SwiftUI的基本概念、核心优势以及如何在实际项目中运用这一框架。我们将从一个简单的例子开始,逐步深入到更复杂的应用场景,让初学者能够快速上手,同时也为有经验的开发者提供一些深度使用的技巧和策略。
45 1