ios 学习之基础 UI 组件 （一）

开始

你以为学完 swift 之后就可以开发 App 啦？还早呢，UI 组件学一学吧 😢

UILabel

    // 使用代码添加 UILabel 横向为 X ，纵向为 Y，坐标原点在左上角
    let label = UILabel(frame: CGRect(x: 20, y: 40, width: 200, height: 30))
    label.text = "Hello World"
    // 添加到当前视图
    self.view.addSubview(label)

    let label2 = UILabel(frame: CGRect(x: 20, y: 60, width: 200, height: 30))
    label2.text = "Geer"

    // 设置字体为 20 号加粗的系统字体
    label2.font = UIFont.boldSystemFont(ofSize: 20)

    // 设置字体颜色为红色
    label2.textColor = UIColor.red

    // 设置阴影颜色
    label2.shadowColor = UIColor.green

    // 设置阴影偏移
    label2.shadowOffset = CGSize(width: 2, height: 2)

    // 设置字体对其
    label2.textAlignment = NSTextAlignment.center
    self.view.addSubview(label2)

    // 多行文本
    let text = """
    除了自定义连接表的表名，你还可以通过传递额外的参数到 belongsToMany 方法来定义该表中字段的键名。第三个参数是定义此关联的模型在连接表里的外键名，第四个参数是另一个模型在连接表里的外键名：
    """
    let label3 = UILabel(frame: CGRect(x: 20, y: 80, width: 200, height: 150))
    label3.text = text

    // 设置显示行数
    label3.numberOfLines = 7
    self.view.addSubview(label3)

UIButton

        // 创建 button 实例，指定 button 的类型
        let button = UIButton(type: .system)
        
        // 设置位置与尺寸
        button.frame = CGRect(x: 20, y: 40, width: 100, height: 30)
        
        // 设置按钮背景颜色
        button.backgroundColor = .purple
        
        // 设置按钮标题
        button.setTitle("我是按钮", for: UIControl.State())
        
        // 设置标题背景颜色
        button.setTitleColor(.white, for: UIControl.State())
        
        // 为按钮添加事件
        // 第一个传入触发事件时事件方法的执行者，比如当前则是 self
        // 第二个参数传入一个#selector选择器实例，这个参数决定要执行的方法
        // 第三个参数设置触发的条件，列入按钮被按下，按钮被按下并抬起
        
        button.addTarget(self, action: #selector(touchBegin), for: UIControl.Event.touchUpInside)
        
        self.view.addSubview(button)

@objc func touchBegin(){
        print("click button")
    }

UIImageView

        // 创建图片实例
        let image = UIImage(named: "img1")
        
        // 创建图片 View
        let imageView = UIImageView(image: image)
        
        // 设置 view 的位置
        imageView.frame = CGRect(x: 40, y: 50, width: 200, height: 200)
        
        self.view.addSubview(imageView)
        
        // 动画
        var imageArray = Array<UIImage>()
        
        for index in 1...2 {
            if let fImage = UIImage(named: "f\(index)") {
                imageArray.append(fImage)
            }
        }
        
        // 创建 View
        let fImageView = UIImageView(frame: CGRect(x: 30, y: 250, width: 200, height: 100))
        
        // 设置动画数组
        fImageView.animationImages = imageArray
        
        // 设置播放时长
        fImageView.animationDuration = 3
        
        // 设置动画播放次数
        fImageView.animationRepeatCount = 0
        
        self.view.addSubview(fImageView)
        
        // 开始播放
        fImageView.startAnimating()

UITextField

        // 创建实例 设置尺寸
        let textField = UITextField(frame: CGRect(x: 20, y: 30, width: 100, height: 30))
        
        // 设置边框输入风格
        textField.borderStyle = .line
        
        // 设置文字颜色
        textField.textColor = .red
        
        // 设置对齐方式
        textField.textAlignment = .center
        
        // 设置提示文字
        textField.placeholder = "请输入姓名"
        
        // 设置代理为本身
        textField.delegate = self
        
        self.view.addSubview(textField)
        
        
        
        let textField2 = UITextField(frame: CGRect(x: 20, y: 90, width: 100, height: 30))
        
        // 设置边框输入风格
        textField2.borderStyle = .line
        
        // 设置文字颜色
        textField2.textColor = .red
        
        // 设置对齐方式
        textField2.textAlignment = .center
        
        // 设置提示文字
        textField2.placeholder = "请输入姓名"
        
        
        // 左视图
        let imageView1 = UIImageView(image: UIImage(named: "img1"))
        imageView1.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
        
        // 右视图
        let imageView2 = UIImageView(image: UIImage(named: "f1"))
        imageView2.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
        
        
        // 设置左右视图
        textField2.leftView = imageView1
        textField2.rightView = imageView2
        
        // 设置视图模式
        textField2.leftViewMode = .always
        textField2.rightViewMode = .always
        
        self.view.addSubview(textField2)

代理方法

// 在输入框即将进入编辑状态时调用
    func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {
        print("即将进入编辑状态时调用")
        return true
    }
    
    // 已经开始编辑时调用
    func textFieldDidBeginEditing(_ textField: UITextField) {
        print("已经开始编辑时调用")
    }
    
    // 按 return 时调用
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        return true
    }

UISwitch

        let swi = UISwitch()
        swi.frame = CGRect(x: 20, y: 20, width: 100, height: 20)
        
        // 设置视图中心点的坐标
        swi.center = CGPoint(x: 100, y: 100)
        
        // 设置开启状态的颜色
        swi.onTintColor = .green
        
        // 设置普通状态的颜色
        swi.tintColor = .red
        
        // 设置滑动的颜色
        swi.thumbTintColor = .purple
        
        // 设置开关的初始状态
        swi.isOn = true
        
        swi.addTarget(self, action: #selector(switchChange), for: UIControl.Event.valueChanged)
        self.view.addSubview(swi)

@objc func switchChange(swi: UISwitch){
        print(swi.isOn)
    }

UIPageController

        // 创建
        let pageControl = UIPageControl(frame: CGRect(x: 20, y: 100, width: 280, height: 30))
        
        // 设置页数
        pageControl.numberOfPages = 10
        
        // 设置背景颜色
        pageControl.backgroundColor = .red
        
        // 设置页码点背景颜色
        pageControl.pageIndicatorTintColor = .green
        
        // 设置选中的页码点颜色
        pageControl.currentPageIndicatorTintColor = .blue
        
        // 设置当前选中的页数
        pageControl.currentPage = 3
        
        pageControl.addTarget(self, action: #selector(uiPageChange), for: UIControl.Event.valueChanged)
        self.view.addSubview(pageControl)

    @objc func uiPageChange(pageControl: UIPageControl){
        print("当前 \(pageControl.currentPage)")
    }

UISegmentedControl

        let items = ["按钮1","按钮2","按钮三"]
        let segmentedControl = UISegmentedControl(items: items)
        
        // 设置位置与尺寸
        segmentedControl.frame = CGRect(x: 100, y: 100, width: 200, height: 30)
        
        // 设置控件风格与颜色
        segmentedControl.tintColor = .blue
        
        segmentedControl.addTarget(self, action: #selector(segmentedControlChange), for: UIControl.Event.valueChanged)
        
        self.view.addSubview(segmentedControl)

@objc func segmentedControlChange(seg: UISegmentedControl){
        print("选择了 \(seg.selectedSegmentIndex)")
        // 插入新的按钮
        seg.insertSegment(withTitle: "按钮5", at: 0, animated: true)
    }

UISlider

        let slider = UISlider(frame: CGRect(x: 20, y: 100, width: 280, height: 30))
        
        // 设置最小值
        slider.minimumValue = 0
        slider.maximumValue = 10
        
        // 初始滑块的值
        slider.value = 5
        
        // 设置滑块左侧进度条的颜色
        slider.minimumTrackTintColor = .red
        
        // 设置滑块右侧的颜色
        slider.maximumTrackTintColor = .green
        
        // 设置滑块的颜色
        slider.thumbTintColor = .blue
        
        // 设置停止滑动才触发事件
        slider.isContinuous = false
        
        slider.addTarget(self, action: #selector(uISliderChange), for: UIControl.Event.valueChanged)
        
        self.view.addSubview(slider)

@objc func uISliderChange(slider: UISlider){
        print(slider.value)
    }

UIActivityIndicatorView

        let activity = UIActivityIndicatorView(style: UIActivityIndicatorView.Style.medium)
        
        activity.center = self.view.center
        activity.color = .blue
        
        // 开始播放
        activity.startAnimating()
        
        self.view.addSubview(activity)

UIProgressView

        let progressView = UIProgressView(progressViewStyle: UIProgressView.Style.default)
        
        // 设置位置和宽度
        progressView.frame = CGRect(x: 20, y: 100, width: 280, height: 30)
        
        // 设置当前进度
        progressView.progress = 0.5
        
        // 设置已走过的进度条进度
        progressView.progressTintColor = .red
        
        // 设置未走过的颜色
        progressView.trackTintColor = .blue
        
        self.view.addSubview(progressView)

UIStepper

        let steper = UIStepper(frame: CGRect(x: 100, y: 100, width: 0, height: 0))
        // 设置背景颜色
        steper.backgroundColor = UIColor.red
        
        // 设置控件颜色
        
        steper.tintColor = .blue
        
        // 设置最小值
        steper.minimumValue = 0
        steper.maximumValue = 10
        
        // 设置控件的步长
        steper.stepValue = 1
        
        self.view.addSubview(steper)

UIPickerView

        let pickerView = UIPickerView(frame: CGRect(x: 20, y: 100, width: 280, height: 200))
        
        // 设置代理 需要添加 UIPickerViewDelegate
        pickerView.delegate = self
        
        // 设置数据源 需要添加 UIPickerViewDataSource
        pickerView.dataSource = self
        
        self.view.addSubview(pickerView)

代理

    // pickView 此方法需要选择器控件的分组数量
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 2
    }
    
    // 此方法需要返回每个分组的行数
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return 10
    }
    
    // 此方法返回每个分组中的每行数据的标题
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return "第\(component + 1)组第\(row)行"
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        print("用户选择了 \(component)组\(row)行")
    }

UIDataPicker

        let dataPicker = UIDatePicker(frame: CGRect(x: 20, y: 100, width: 280, height: 200))
        
        // 设置时间选择器的模式
        dataPicker.datePickerMode = .dateAndTime
        dataPicker.addTarget(self, action: #selector(uiDataPickerChange), for: UIControl.Event.valueChanged)
        self.view.addSubview(dataPicker)

@objc func uiDataPickerChange(dataPicker: UIDatePicker){
        print(dataPicker.date)
    }

UISearchBar

let searchBar = UISearchBar(frame: CGRect(x: 20, y: 100, width: 280, height: 30))
        
        // 设置控件的风格
        searchBar.searchBarStyle = .minimal
        
        searchBar.placeholder = "请输入商品标题"
        
        // 显示取消按钮
        searchBar.showsCancelButton = true
        
        // 显示控件的书库按钮
        searchBar.showsBookmarkButton = true
        
        self.view.addSubview(searchBar)

结束

今日先学这么多，明天再继续