iOS系列 基础篇 09 开关、滑块和分段控件

iOS系列 基础篇 09 开关、滑块和分段控件

目录:

  1. 案例说明
  2. 开关控件Switch
  3. 滑块控件Slider
  4. 分段控件Segmented Control

1. 案例说明

  开关控件(Switch)、滑块控件(Slider)和分段控件(Segmented Control)都是UIControl的子类,本篇我们将通过一个案例和大家一起学习这三个控件的使用。

  如下图所示,本案例包括两个开关控件Switch、一个分段控件(Segmented Control)、两个标签(Label)和一个滑块控件(Slider):

  两个开关控件的值保持相反状态,点击其中的一个,令其值为ON,另一个也会随之发生变化。

  一个有两段的分段控件,左侧和右侧的段分别命名为Left和Right,点击Right时上面哪两个开关控件消失,点击Left时上面两个开关控件恢复显示。

  最下面那个滑块控件可以改变上面Label标签的文本内容,把滑块变化的树枝显示在Label上面。

2. 开关控件Switch

  使用Single View Application模板创建一个工程项目,打开Main.storyboard文件。

  从对象库中拖拽两个开关控件(Switch)到界面上,然后将它们的State属性设为相反。

  因为要在代码中控制使两个开关控件保持相反值,所以需要为两个开关控件置顶输出口,分别命名为LeftSwitch和RightSwitch。

  (PS:忘记怎么添加输出口的请看前面的文章《iOS系列 基础篇 07 Action动作和输出口》)

  按住control键,拖拽左边的Switch到右侧的代码中,添加Outlet输出口:

  设置名称为LeftSwitch:

  按照相同的方式添加右侧开关控件的Outlet,并命名为RightSwitch,最终效果为:

  在ViewController中声明一个switchValueChange: 方法,该方法的作用是同时设置两个开关的值,使它们的值保持相反。

  (PS:忘记如何添加Action动作的请参考前面的文章《iOS系列 基础篇 07 Action动作和输出口》)

  按住control键,拖拽开关控件到右侧代码中:

  在弹出的对话框中选择添加Action,并设置如下信息:

  添加Action动作方法之后,具体的实现代码如下:

 1     @IBAction func switchValueChanged(sender: AnyObject) {
 2         let senderSwitch = sender as! UISwitch  // 获取当前点击的控件并强制转型为Switch
 3
 4         let value = senderSwitch.on // 获取当前点击Switch后的状态值
 5
 6         // 如果当前点击的是LeftSwitch
 7         if (senderSwitch == self.LeftSwitch){
 8             self.RightSwitch.setOn(!value, animated: true)  // 设置右侧Switch的状态值
 9         }else{  // 如果当前点击的是RightSwitch
10             self.LeftSwitch.setOn(!value, animated: true)    // 设置左侧Switch的状态值
11         }
12     }

  然后按住control,将右侧的Switch也拖拽到上面这个方法上,这样,两个Switch的Action就绑定在一个方法上了:

  运行效果如下:

3. 滑块控件Slider

  如上案例效果图所示,从对象库中拖拽一个滑块控件Slider到设计器中,并摆放在屏幕中央的位置。

  打开它的属性检查器,将其最小值、最大值、初始值依次设定为0.0、1.0、0.5。

  在iOS中,滑块的值是0.0到1.0之间的浮点数。

  在滑块上方如图所示,放置两个Label标签控件,将左侧的标签文本改为“滑块当前值:”,将右侧的文本设置为50。

  (因为滑块默认就是在中间的0.5,我想在Label上显示0~100,所以默认就50了)

  为右侧要显示值的Label添加Outlet输出口,并命名为SliderValue:

  在弹出的窗口中设置名称为SliderValue,如下:

  设置Slider的Outlet输出口后代码如下:

1 @IBOutlet weak var SliderValue: UILabel!

  右侧的这个Label是用来显示滑块当前值的,这里我们需要为滑块实现一个Action动作:

  将其命名为sliderValueChanged:

  滑块的Action代码如下:

1     @IBAction func sliderValueChanged(sender: AnyObject) {
2         let slider = sender as! UISlider    // 当前拖动的滑块
3         let value = Int(slider.value*100)   // 获取当前值(0.x)乘以100后的Int值
4         let showText = NSString(format: "%d", value)    // 将数据格式化
5         self.SliderValue.text = showText as String  // 显示在Label上
6     }

  运行效果如下:

4. 分段控件Segmented Control

  分段控件(Segmented Control)也是一种选择控件,其功能类似于Windows中的单选按钮。

  它由两段或多段构成,每个段相当于一个独立的按钮。

  它有三种样式:Plain、Bordered和Bar样式,在iOS 7之后,这三种样式没有什么太大的区别,大家可以试试看。

  如上案例效果图所示,拖拽一个分段控件(Segmented Control)到设计器中,将左段文本设置为Left,右段文本设置为Right。

  然后添加Action方法touchDown:

 1     @IBAction func touchDown(sender: AnyObject) {
 2         if (self.LeftSwitch.hidden){    // 如果当前开关控件是显示的
 3             // 将两个开关都隐藏
 4             self.LeftSwitch.hidden = false
 5             self.RightSwitch.hidden = false
 6         }else{  // 如果当前开关控件是隐藏的
 7             // 将两个开关都显示
 8             self.LeftSwitch.hidden = true
 9             self.RightSwitch.hidden = true
10         }
11     }

  效果如下:

时间: 09-04

iOS系列 基础篇 09 开关、滑块和分段控件的相关文章

iOS系列 基础篇 08 文本与键盘

iOS系列 基础篇 08 文本与键盘 目录: 1. 扯扯犊子 2. TextField 3. TextView 4. 键盘的打开和关闭 5. 打开/关闭键盘的通知 6. 键盘的种类 7. 最后再扯两句 1. 扯扯犊子 与Label一样,TextField和TextView也是文本类控件,是可以编辑文本内容的. 在控件内容编辑方面,三者都可以通过代码.双击该控件和属性检查器中的Text属性来实现,但是TextField和TextView比Label多了一个键盘的使用. 另外,TextField和T

iOS系列 基础篇 03 探究应用生命周期

iOS系列 基础篇 03 探究应用生命周期 目录: 1. 非运行状态 - 应用启动场景 2. 点击Home键 - 应用退出场景 3. 挂起重新运行场景 4. 内存清除 - 应用终止场景 5. 结尾 本篇主要探讨的是iOS应用中各种状态的跃迁过程,建议大家通过修改AppDelegate.swift,在每个过程中添加日志输出代码,从而观察其变化. 作为应用程序的委托对象,AppDelegate类在应用程序生命周期的不同阶段会回调不同的方法. 首先,咱们先来了解一下iOS应用的不同状态和他们之间的关系

iOS系列 基础篇 06 标签和按钮 (Label & Button)

iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single View Application模板创建一个名为“LabelAndButtonSimple”的工程 (PS:具体创建过程和各设置项介绍等可参见前面的文章,这里就截图简单带过了:) (1) 打开Xcode,选择Create a new Xcode Project: (2) 选择Single View Applic

iOS系列 基础篇 07 Action动作和输出口

iOS系列 基础篇 07 Action动作和输出口 目录:  1. 前言及案例说明 2. 什么是动作? 3. 什么是输出口? 4. 实战 5. 结尾 1. 前言及案例说明 上篇内容我们学习了标签和按钮,下面呢 我们通过一个具备用户交互功能的工程案例进一步练习这两个控件的使用,以及动作和输出口的控制. 此案例基于上篇内容的界面设计,功能的概念流程如图: 此案例的动作和输出口机制如图: 2. 什么是动作? 动作是为了响应一个控件的事件而定义的方法,类似于.NET中WinForm为控件某一事件添加的动

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选

【Windows编程】系列第二篇:Windows SDK创建基本控件

在Win32 SDK环境下,怎么来创建常用的那些基本控件呢?我们知道如果用MFC,简单的拖放即可完成大多数控件的创建,但是我们既然是用Windows SDK API编程,当然是从根上解决这个问题,实际上MFC的下层也是通过这些API完成的. 实际上控件也是窗口,只不过是被微软预先创建好的一种窗口类,比如button就是一个类名为“BUTTON”的类.既然控件实际上是窗口,当然也是用CreateWindow或者CreateWindowEx这个函数来完成的,第二个函数除了多一个扩展风格之外,其他完全

Java多线程系列--“基础篇”09之 interrupt()和线程终止方式

概要 本章,会对线程的interrupt()中断和终止方式进行介绍.涉及到的内容包括:1. interrupt()说明2. 终止线程的方式2.1 终止处于“阻塞状态”的线程2.2 终止处于“运行状态”的线程3. 终止线程的示例4. interrupted() 和 isInterrupted()的区别 转载请注明出处:http://www.cnblogs.com/skywang12345/p/3479949.html 1. interrupt()说明 在介绍终止线程的方式之前,有必要先对inter

DOM系列---基础篇

DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 产生于 网景公司及微软公司创始的 DHTML(动态 HTML) ,但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. DOM 中的三个字母: D(文档)可以理解为整个 Web 加载的网页文档: O(对象)可以理解为类似 window 对象之类的东西,可以调用属性

SQL Server调优系列基础篇(联合运算符总结)

前言 上两篇文章我们介绍了查看查询计划的方式,以及一些常用的连接运算符的优化技巧,本篇我们总结联合运算符的使用方式和优化技巧. 废话少说,直接进入本篇的主题. 技术准备 基于SQL Server2008R2版本,利用微软的一个更简洁的案例库(Northwind)进行解析. 一.联合运算符 所谓的联合运算符,其实应用最多的就两种:UNION ALL和UNION. 这两个运算符用法很简单,前者是将两个数据集结果合并,后者则是合并后进行去重操作,如果有过写T-SQL语句的码农都不会陌生. 我们来分析下