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月前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
112 2
|
4月前
|
测试技术 Swift iOS开发
探索iOS自动化测试:使用Swift编写UI测试
【8月更文挑战第31天】在软件开发的海洋中,自动化测试是保证船只不偏离航线的灯塔。本文将带领读者启航,深入探索iOS应用的自动化UI测试。我们将通过Swift语言,点亮代码的灯塔,照亮测试的道路。文章不仅会展示如何搭建测试环境,还会提供实用的代码示例,让理论知识在实践中生根发芽。无论你是新手还是有经验的开发者,这篇文章都将是你技能提升之旅的宝贵指南。
|
7月前
|
开发框架 前端开发 JavaScript
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
【4月更文挑战第30天】Flutter是一款高效跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称,简化了动态UI和数据驱动视图的实现。本文深入讨论了动态UI构建原理,包括基于Widget树模型的UI更新和状态管理,如使用StatefulWidget和数据流库(如Provider、Redux)。此外,文中还介绍了实现技巧,如使用ListView等可滚动组件、StreamBuilder进行数据流驱动的UI更新,以及应用响应式布局以适应不同设备。Flutter为开发者提供了构建高效动态界面的强大工具。
195 0
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
|
7月前
|
iOS开发
Xcode强大的多视图立体分层显示View UI Herarchy
Xcode强大的多视图立体分层显示View UI Herarchy
59 0
|
7月前
|
Swift 图形学 iOS开发
【Swift开发专栏】Swift中的自定义视图与绘制
【4月更文挑战第30天】本文探讨了Swift中自定义视图的创建与绘制,分为基础知识、绘制步骤和性能优化三部分。开发者通过继承`UIView`,重写`draw(_:)`方法并利用Core Graphics进行2D绘图。提高性能的技巧包括避免重复绘制、使用轻量级视图、优化图形上下文使用、启用图层背板及避免阻塞主线程。自定义视图让iOS和macOS界面更独特高效,进阶可探索Core Animation和Metal等技术。
91 0
|
机器学习/深度学习 数据可视化 算法
基于深度学习的瓶子检测软件(UI界面+YOLOv5+训练数据集)
基于深度学习的瓶子检测软件(UI界面+YOLOv5+训练数据集)
413 0
|
存储 数据管理 数据库
CoreData 在 swift UI 中的使用
当谈到在 Swift UI 中进行本地数据持久化,Core Data 是一个强大且常用的解决方案。Core Data 是苹果提供的一种数据存储和管理框架,用于在应用程序中创建、读取、更新和删除数据。它提供了一个对象图管理器,可以将数据映射到对象,并提供了一种简化数据操作的方式。在本文中,我们将深入介绍 Core Data 在 Swift UI 中的使用。
CoreData 在 swift UI 中的使用
|
机器学习/深度学习 监控 算法
基于深度学习的跌倒检测系统(UI界面+YOLOv5+训练数据集)
基于深度学习的跌倒检测系统(UI界面+YOLOv5+训练数据集)
1513 0
|
机器学习/深度学习 数据可视化 算法
水果新鲜程度检测系统(UI界面+YOLOv5+训练数据集)
水果新鲜程度检测系统(UI界面+YOLOv5+训练数据集)
725 0
|
机器学习/深度学习 人工智能 监控
基于深度学习的人群密度检测系统(UI界面+YOLOv5+训练数据集)
基于深度学习的人群密度检测系统(UI界面+YOLOv5+训练数据集)
716 0

相关课程

更多