swift UI专项训练15 PcikerView老虎机视图

简介:   老虎机相信大家都知道,像一组滚轴,而我们选中其中的某一组值。ios的闹钟选择时间的时候就是这么设计的。

  老虎机相信大家都知道,像一组滚轴,而我们选中其中的某一组值。ios的闹钟选择时间的时候就是这么设计的。在storyboard中拖拽一个pickerview,显示如下:


pickerView是没法选择默认值的,图中的几个字符都是和苹果相关的地名,如要设置我们只能去代码中设置。我们来做一个有三个部分的老虎机,每一部分下面有一个标签,来显示选中的内容。分别拖拽到控制器中建立联系:



然后回到storyboard中,选中pickerview,把右侧的outlets与viewcontroller连接起来:


那么数据从哪来呢,我们回到代码中,首先依旧需要手动把继承的协议加上:

class ViewController: UIViewController,UIPickerViewDataSource,UIPickerViewDelegate 

加上之后你会发现会报错,那是因为你光继承却没有实现它的回调方法,就像tableView一样,如果控制器继承了数据源,那么就必须实现那些规定行数等等的方法。

先来定义一个显示内容的数组:

let citys = ["北京","上海","广州"]
然后定义回调方法:

func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return citys.count
    }
    
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return citys.count
    }
    
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String! {
        return citys[row]
    }

分别代表有三个部分,每个部分三行,每行的标题。运行效果如下:



现在我们来加上标签的现实功能,让它们显示我们在老虎机中选择的城市:

 func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        switch component{
        case 0: label0.text = citys[row]
        case 1: label1.text = citys[row]
        default:label2.text = citys[row]
        }
    }//选择了哪一行哪一部分

效果如图:




目录
相关文章
|
6月前
|
XML 前端开发 JavaScript
使用代码给 SAP UI5 XML 视图添加自定义 CSS
使用代码给 SAP UI5 XML 视图添加自定义 CSS
44 0
使用代码给 SAP UI5 XML 视图添加自定义 CSS
|
机器学习/深度学习 数据可视化 算法
基于深度学习的瓶子检测软件(UI界面+YOLOv5+训练数据集)
基于深度学习的瓶子检测软件(UI界面+YOLOv5+训练数据集)
264 0
|
6月前
|
XML JSON JavaScript
SAP UI5 XML 视图在实例化时就已经确定了 BindingSyntax 的实现版本了
SAP UI5 XML 视图在实例化时就已经确定了 BindingSyntax 的实现版本了
29 0
|
6月前
|
XML 数据格式
关于 SAP UI5 XML 视图里控件事件处理函数名称中的 . (点号) 问题的讨论试读版
关于 SAP UI5 XML 视图里控件事件处理函数名称中的 . (点号) 问题的讨论试读版
36 0
|
6月前
|
XML API 数据格式
SAP UI5 ManagedObject 的 Event 讲解以及 SAP UI5 XML 视图里控件 press 的解析逻辑
SAP UI5 ManagedObject 的 Event 讲解以及 SAP UI5 XML 视图里控件 press 的解析逻辑
42 0
|
6月前
|
XML Web App开发 前端开发
SAP UI5 进阶 - XML 视图里定义的 UI 控件,运行时实例化的技术细节剖析试读版
SAP UI5 进阶 - XML 视图里定义的 UI 控件,运行时实例化的技术细节剖析试读版
36 0
|
7月前
|
容器
SAP UI5 视图里的 OverflowToolbar 控件
SAP UI5 视图里的 OverflowToolbar 控件
31 0
|
8月前
|
存储 数据管理 数据库
CoreData 在 swift UI 中的使用
当谈到在 Swift UI 中进行本地数据持久化,Core Data 是一个强大且常用的解决方案。Core Data 是苹果提供的一种数据存储和管理框架,用于在应用程序中创建、读取、更新和删除数据。它提供了一个对象图管理器,可以将数据映射到对象,并提供了一种简化数据操作的方式。在本文中,我们将深入介绍 Core Data 在 Swift UI 中的使用。
CoreData 在 swift UI 中的使用
|
机器学习/深度学习 数据可视化 算法
水果新鲜程度检测系统(UI界面+YOLOv5+训练数据集)
水果新鲜程度检测系统(UI界面+YOLOv5+训练数据集)
474 0
|
机器学习/深度学习 传感器 监控
基于YOLOv5的停车位检测系统(清新UI+深度学习+训练数据集)
基于YOLOv5的停车位检测系统(清新UI+深度学习+训练数据集)
473 0

热门文章

最新文章

相关课程

更多