ios 常用UI组件补充

UISwitch

image.png

        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)
        }

UIPageControl

image.png

        // 创建
        let pageControl = UIPageControl(frame: CGRect(x: 95, y: 200, width: 240, height: 40))
        
        // 设置页数
        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（目录标题）

image.png

        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

image.png

        let slider = UISlider(frame: CGRect(x: 95, y: 140, width: 240, 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(指示器)

image.png

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

UIProgressView

image.png

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

UIStepper步进器

image.png

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

UIPickerView

image.png

        let pickerView = UIPickerView(frame: CGRect(x: 95, y: 140, width: 240, 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

image.png

        let dataPicker = UIDatePicker(frame: CGRect(x: 90, y: 140, width: 240, 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

image.png

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