当前位置: 代码迷 >> 综合 >> 【iOS笔记】UIKit(2) 用户界面
  详细解决方案

【iOS笔记】UIKit(2) 用户界面

热度:59   发布时间:2024-01-24 05:12:34.0


文章目录

  • 参考

  • Views & Controls(视图和控件)

    • 1.UIView

      • 1.1 定义

      • 1.2 初始化

      • 1.3 视觉和外观

      • 1.4 事件相关

      • 1.5 配置边界和框架矩形

      • 1.6 管理层次结构

      • 1.7 内容边距&安全区域

      • 1.8 管理视图约束

      • 1.9 使用布局锚点创建约束

      • 1.10 使用布局指南

      • 1.11 自动布局中的测量

      • 1.12 在自动布局中对齐视图

      • 1.13 触发自动布局

      • 1.14 调试自动布局

      • 1.15 调整内容大小

      • 1.16 手动布置子view

      • 1.17 调整用户界面

      • 1.18 添加和移除交互

      • 1.19 绘制和更新视图

      • 1.20 捕获视图快照

      • 1.21 在运行时识别视图

    • 2.UIControl

      • 2.1 属性

      • 2.2 响应事件

      • 2.3 触发Actions

      • 2.4 跟踪触摸和重绘

    • 3.常用view

      • 3.1 UILabel

      • 3.2 UITextField

      • 3.3 UITextView

      • 3.4 UISearchTextField

      • 3.5

    • 4.容器视图

      • 4.1 UICollectionView

      • 4.2 UITableView

      • 4.3 UIStackView

      • 4.4 UIScrollView

    • 5.视觉效果

    • 6.Bars

  • ViewControllers(视图控制器)

  • View Layout(布局)

  • Appearance Customization(外观定制)

  • Animation & Haptics(动画和触觉)

  • Windows & Screens(窗口和屏幕)


参考

官方文档

Views & Controls(视图和控件)

1.UIView

1.1 定义

管理屏幕上的矩形区域的内容

1.2 初始化

//屏幕左上角是坐标(0,0)//创建宽高为100的矩形,矩形的左上角的坐标是(100,100)let view = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))

1.3 视觉和外观

属性 解释
backgroundColor 背景色
isHidden 是否隐藏
alpha 透明度
isOpaque 是否不透明
tintColor 染色,类似前景色,主要在图片使用;如果没设置这个属性,则view会向父view寻找该属性,找不到的话就设置为系统默认的颜色(蓝色)
clipToBounds 是否子view限于其边界.true的话,子view将被剪裁到其边界
mask 遮罩

1.4 事件相关

属性 解释
isUserInteractionEnabled 是否禁用用户交互(触摸,按下,键盘和焦点事件)
isMultipleTouchEnabled 是否接受多点触摸
isExclusiveTouch 是否唯一触摸.(为true时,将会阻止触摸事件传递到同一窗口的其他视图)

1.5 配置边界和框架矩形

属性 解释
frame 描述view在父view坐标系中的位置和大小
bounds 描述view在自己坐标系中的位置和大小
center frame的中心点
//详细举例说明,以Image为例//1.设置UIImageView的frame:宽高为100,距离父view上边100,左边100,见图1.5.1imageView.frame = CGRect(x: 100, y: 100, width: 100, height: 100)//2.设置UIImageView的bounds:这时候使用的是自己的坐标系,以image的中心点为原点,宽高变为200,即沿着中心向四周扩大,上下左右各增加50。x为-200表示image内容向右平移200,y为100表示image内容向上平移100,见图1.5.2imageView.bounds = CGRect(x: -200, y: 100, width: 200, height: 200)//3.在图1中imageview的center为(150,150)(相对于父view),可以更改imageview的center,这样也就更改了imageview的位置,见图1.5.3imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)imageView.center = view.center

图1.5.1:
图1
图1.5.2:图2
图1.5.3:
图3

1.6 管理层次结构

属性 解释
superview 获取父view
subviews 获取子views
window 该view所处的窗口
addSubView(UIView) 添加子view
bringSubviewToFront(UIView) 将某个子view显示在顶部
sendSubviewToBack(UIView) 将某个子view移动在底部
removeFromSuperview() 从父view中删除自己
insertSubview(UIView,at) 在指定的index插入子view
insertSubview(UIView,aboveSubview) 在一个子view上方插入一个新的子view
insertSubview(UIView,belowSubview) 在一个子view下方插入一个新的子view
exchangeSubview(at,withSubviewAt) 在指定索引处交换子view
view1.isDescendant(of:view2) view1是否是view2的子view
//例,见图1.6.1let v1 = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))v1.backgroundColor = .redlet v2 = UIView(frame: CGRect(x: 150, y: 150, width: 100, height: 100))v2.backgroundColor = .greenlet v3 = UIView(frame: CGRect(x: 200, y: 200, width: 100, height: 100))v3.backgroundColor = .blue
        view.addSubview(v1)view.addSubview(v2)view.addSubview(v3)view.bringSubviewToFront(v2)view.sendSubviewToBack(v2)view.sendSubviewToBack(v3)

图1.6.1

1.7 内容边距&安全区域

unFinished

1.8 管理视图约束

属性或方法 解释
constraints 所有约束
addConstraint() 添加约束
addConstrants() 添加多个约束
removeConstraint() 删除指定的约束
removeConstraints() 删除指定的约束

1.9 使用布局锚点创建约束

unFinished

属性或方法 解释


1.10 使用布局指南

unFinished

属性或方法 解释
addLayoutGuide 添加布局指南
layoutGuides 所有布局指南
layoutMarginsGuide 视图边距的布局指南

1.11 自动布局中的测量

1.12 在自动布局中对齐视图

1.13 触发自动布局

属性或方法 解释
needsUpdateConstraints 是否需要更新视图的约束
setNeedsUpdateConstraints 设置是否view的约束需要更新
updateConstraints 更新约束
updateConstraintsIfNeeded 每当为视图触发新的布局遍历时,系统都会调用此方法以确保使用来自当前视图层次结构及其约束的信息来更新该视图及其子视图的任何约束。该方法由系统自动调用,但是如果您需要检查最新的约束,则可以手动调用

1.14 调试自动布局

1.15 调整内容大小

在设置view大小后,内容应该怎样显示

属性或方法 解释
ContentMode 设置显示模式,view的大小不变
sizeToFit 调整view的大小,以便仅包围内容
autoresizesSubviews 自动调整子view的大小

1.16 手动布置子view

1.17 调整用户界面

1.18 添加和移除交互

1.19 绘制和更新视图

1.20 捕获视图快照

属性或方法 解释
snapshotView 根据当前视图的内容返回快照视图
resizableSnapshotView 根据当前视图的指定内容返回快照视图,并带有可拉伸的插图
drawHierarchy 将完整的视图层次结构的快照呈现为在屏幕上可见的当前上下文

1.21 在运行时识别视图

设置tag

属性或方法 解释
tag 设置tag
viewWithTag 通过tag获取view

2.UIControl

可以与用户交互的View

2.1 属性

属性 解释
state 状态
isEnabled 是否启用
isSelected 是否处于选定状态
isHighlighted 是否突出显示
contentVerticalAlignment 内容垂直对齐方式
contentHorizontalAlignment 内容水平对齐方式
  • state有以下几种
    normal正常状态
    highlighted突出显示状态(例Button的按下去的状态)
    disabled禁用状态
    selected选中状态
    focused被焦点选中状态
    application可供应用程序使用的其他控制状态标志
    reserved保留供内部框架使用的控制状态标志

2.2 响应事件

方法 解释
addTarget 添加响应事件操作
removeTarget 移除响应事件操作
actions 获取指定事件发生时,对目标对象执行的操作
allControlEvents 获取与此控件相关联的动作的事件
allTargets 返回与控件关联的所有目标对象
//例:UIButton的点击事件btn.addTarget(self, action: #selector(clickBtn), for: .touchUpInside)@objc func clickBtn(){print("ok")}

2.3 触发Actions

//触发view的指定事件btn.sendActions(for: .touchUpInside)

2.4 跟踪触摸和重绘

3.常用view

3.1 UILabel

显示一行或多行只读文本,通常与UIControl使用

3.2 UITextField

3.3 UITextView

3.4 UISearchTextField

3.5

4.容器视图

4.1 UICollectionView

4.2 UITableView

4.3 UIStackView

4.4 UIScrollView

5.视觉效果

6.Bars

ViewControllers(视图控制器)

View Layout(布局)

Appearance Customization(外观定制)

Animation & Haptics(动画和触觉)

Windows & Screens(窗口和屏幕)