可视化常用组件

西瓜皮儿 2023/6/25

# autolayout对齐技巧

组件拖到安全区外，默认对其者是整个屏幕view，安全区内默认对齐者是safe area
设置equal width后，还会有比例属性，需要在约束位置将其改成1

# UIView

禁止元素展示到View组件以外：clipsToBounds属性钩上

# UILabel

多行文字：双击，在属性里面设置文字，按option + enter换行 - 下面设置lines，控制多行文本
变更颜色：color，选择第二个color slider，再选择RGB slider - 右边三个点选择Device RGB才是正确的RGB颜色
获取/设置文字：

textLabel.text ?? ""
textLabel.text!

textLabel.text = "coderhdy\n好好学习"

1
2
3
4

# UIButton

获取/更改按钮文字
type可以直接设置上一些默认图标
要更改字体大小等属性，需要把title设置成attributed
disable: Enable勾选取消

btn.titleLabel?.text! ?? ""
btn.titleLabel!.text!

// 规范，设置文字 + 状态
hiddenBtn.setTitle("你点啥", for: .normal)
// 或者，也行
btn.titleLabel!.text = "吃饭啦"

1
2
3
4
5
6
7

设置hidden

hiddenBtn.isHidden = true

# 按钮点击事件

添加事件方法：

拖动视图到代码，connection选择action;type选择UIButton;event选择touch up inside

或者直接选中按钮最左边属性touch up inside拖动到代码内

@IBAction func uploadBtnClick(_ sender: UIButton) {
    sender.setTitle("你点啥", for: .normal)
    print("你点啥啊")
}

1
2
3
4

纯代码添加

override func viewDidLoad() {
    super.viewDidLoad()
    btn2.addTarget(self, action: #selector(addBtnClick(_:)), for: .touchUpInside)
}
@objc func addBtnClick(_ sender: UIButton) {
    sender.setTitle("你点啥啊", for: .normal)
    print("你点啥啊")
}

1
2
3
4
5
6
7
8

# UIStackView

ios9新增组件
作用：轻松实现水平/垂直布局子组件可以少设置很多约束，自动按照stack排列
spacing:每个控件的间距

# UIViewController

一个UIViewController就是一个页面
可以直接用代码创建一个界面，但是那个界面就只能用代码编写
默认场景对应的类是UIViewController

# 创建一个界面

推荐：添加Controller目录，放各个页面的Controller: new -> Group
创建文件cocoa Touch class继承UIViewController
视图选择新UIViewController，设置class和module
设置Storyboard id完成创建

# 操作视图

以popup打开：视图1选择一个按钮，control键+拖动到视图2，选择present as popover
- 全屏：设置presentation：fullScreen
- 关闭：self.dismiss
```
@IBAction func closeBtn(_ sender: Any) {
    dismiss(animated: true)
}
```
1
2
3

以代码控制打开ID传storyboard id

@IBAction func openThirdPage(_ sender: UIButton) {
    let ThirdController = storyboard!.instantiateViewController(withIdentifier: "ThirdView")

    // 全屏幕打开popup
    ThirdController.modalPresentationStyle = .fullScreen;

    present(ThirdController, animated: true, completion: nil)
}

1
2
3
4
5
6
7
8

# 路由

首页面：点击ViewController，勾选is initial View Controller

既有页面添加导航控制器：选中ViewController，右上角菜单选择Editor-Embed on-Navigation Controller，原UIView可以设置页面Title了
可视化跳转：按钮control + 拖动到新的view中，并选择push

# UITextField

输入文本等数据

if !textField1.text!.isEmpty {
    print(textField1.text!)
}

1
2
3

设置placeHolder

textField1.placeholder = "1111111"

# UIImageView

设置图片控件
可以在Image设置中选择系统的图片
可以在assets根目录放入图片，1x 2x 3x是1～3倍图片，再在Image中输入图片名称
动态控制展示本地图片

imageView.image = UIImage(named: "Univercity")

# UICollection

# ScrollView

# UITable

点的是UITableView，对应的Controller就要选UIViewController，因为主页面controller还是UIViewController，TableView只是一个组件而已
点的是UITableViewController，对应的Controller就要选UITableViewController
tableView要先设置delegate = self，代表本类能操作table数据
设置dataSource = self，代表数据源是本类
数据更新完要调用tableView.reloadData()刷新页面

也可以将tableView的delegate和dataSource通过可视化视图拖到对应的UIViewController上，做关联
可拖入Table View Cell，要记得设置复用id

class ListController: UIViewController {
    var dataArr: [String] = []
    
    @IBOutlet weak var myTable: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for index in 0...99 {
            dataArr.append("你好呀\(index)")
        }
        
        // 事件代理为本类
        myTable.delegate = self
        // 数据代理为本类
        myTable.dataSource = self
        // 数据更新后重新加载列表
        myTable.reloadData()
        
    }
    
}

// 扩展实现UITableView类必须实现方法
extension ListController: UITableViewDataSource, UITableViewDelegate {
    // 有多少个
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataArr.count
    }
    // 每一个Cell长什么样子
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // id 为 UITableView 里面的 UICell 的 复用id
        let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
        cell.textLabel?.text = dataArr[indexPath.row]
        return cell
    }
    // 某一个Cell被点击了
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("点击了\(dataArr[indexPath.row])")
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

Storyboard

西瓜皮儿

可视化常用组件

可视化常用组件

# autolayout对齐技巧

# UIView

# UILabel

# UIButton

# 按钮点击事件

# UIStackView

# UIViewController

# 创建一个界面

# 操作视图

# 路由

# Navigation Controller

# UITextField

# UIImageView

# UICollection

# ScrollView

# UITable