Swift UI控件 UIPickerView 、UISearchBar 、UIDatePicker

最新推荐文章于 2020-11-30 15:57:24 发布

默默079

最新推荐文章于 2020-11-30 15:57:24 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

分类专栏： Swift UI控件

本文链接：https://blog.youkuaiyun.com/YuanLiYin079/article/details/79393053

UI控件同时被 2 个专栏收录

3 篇文章

订阅专栏

Swift

2 篇文章

订阅专栏

本文详细介绍了如何在iOS应用中配置和使用UIPickerView、UISearchBar和UIDatePicker等UI组件，包括设置它们的位置、大小、样式及实现各种交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在顶部签相关的协议

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource, UISearchBarDelegate {
}

UIPickerView的相关属性

// 创建 UIPickerView 并设置其位置大小
let pickerView = UIPickerView(frame:CGRect(x: 20, y: 300, width:slider.bounds.size.width, height: 200))
// 设置代理
pickerView.delegate = self
pickerView.dataSource = self
// 添加到视图上
self.view.addSubview(pickerView)

/*
 *** UIPickerView 代理方法
 */
 // 分组行数
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

    if component == 0 {

        return 5
    }else {
        return 10
    }
}
// 分组数
func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 2
}
// 每行的标题
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    return "第\(component + 1)组，第\(row + 1)行"
}
// 文字设置
func pickerView(_ pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {

    let attributed = NSMutableAttributedString(string:"第\(component + 1)组，第\(row + 1)行")
    attributed.addAttributes([NSAttributedStringKey.foregroundColor: UIColor.red], range: NSRange(location: 0, length: attributed.length))
    return attributed
}
// 宽度方法
func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {

    if component == 1 {

        return 280
    }else {
         return 150
    }        
}

UISearchBar 的相关属性

// 创建 UISearchBar 并设置其位置大小
let searchBar = UISearchBar(frame:CGRect(x: 20, y: 500, width: pickerView.bounds.size.width, height: 30))
// 设置样式：
searchBar.searchBarStyle = UISearchBarStyle.minimal
// 设置提示文字
searchBar.placeholder = "请输入你要搜索的内容"
// 显示取消按钮
searchBar.showsCancelButton = true
// 显示搜索结果
searchBar.showsSearchResultsButton = true
// 设置代理
searchBar.delegate = self
// 添加到视图
self.view.addSubview(searchBar)

/*
 *** UISearchBar的协议方法
 */
// 是否开始进行编辑
func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {

    return true // 允许进入编辑状态
}
// 已经进行编辑状态
func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {

}
// 已经结束编辑状态
func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {

}
// 是否结束编辑
func searchBarShouldEndEditing(_ searchBar: UISearchBar) -> Bool {

    return true
}
// 文本变化调用的方法
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {

}
// 文本将要变化调用的方法
func searchBar(_ searchBar: UISearchBar, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
    return true
}
// 点击键盘上的搜索调用的方法
func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
    print("键盘上的搜索按钮")
}
// 点击取消按钮调用的方法
func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
    print("取消按钮")
}

UIDatePicker 的相关属性

// 创建 UIDatePicker 并设置其位置大小
let datePicker = UIDatePicker(frame:CGRect(x: 20, y: 550, width: pickerView.bounds.size.width, height: 200))
// 将日期选择器区域设置为中文，则选择器日期显示为中文
datePicker.locale = Locale(identifier: "zh_CN")
// 点击事件：注意：action 里面的方法名后面需要加个冒号
datePicker.addTarget(self, action: #selector(dateChange), for: .valueChanged)
// 添加到视图上
self.view.addSubview(datePicker)

// 日期选择器响应方法
@objc func dateChange(datePicker: UIDatePicker) {
    // 更新提醒时间文本框
    let formatter = DateFormatter()
    // 日期格式
    formatter.dateFormat = "yyyy年MM月dd日 HH:mm:ss"
    print(formatter.string(from: datePicker.date))
}