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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS系列 基础篇 06 标签和按钮 (Label & Button)相关的知识,希望对你有一定的参考价值。

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

 

目录:

  1. 标签控件
  2. 按钮控件
  3. 小结

 

  标签和按钮是两个常用的控件,下面咱们逐一学习。

 

1. 标签控件

  使用Single View Application模板创建一个名为“LabelAndButtonSimple”的工程

 

  (PS:具体创建过程和各设置项介绍等可参见前面的文章,这里就截图简单带过了:)

 

  (1) 打开Xcode,选择Create a new Xcode Project:

技术分享

 

  (2) 选择Single View Application模板,点击Next:

技术分享

 

  (3) 设置项目相关信息,点击Next保存并完成创建:

技术分享

 

  (4) 打开Main.storyboard文件,从对象库中拖拽一个Label控件,并将其摆放在设计视图的居中位置:

技术分享

 

  从上图可以看出,Label标签的属性检查器中包涵Label和View两个分组:

  • Label组主要是设置文本相关的属性,例如文本内容、字体颜色、字体类型、对齐方式等。
  • View组主要是从视图的角度对控件进行设置,例如背景、外观等。

 

  所有的视图都具有View组。

 

  之前的文章介绍过,我们可以通过双击或者设置属性来实现Label控件的文本输入,这里的属性指的就是Label组下的Text属性。

  当然,你也可以使用代码操作Label控件的这一属性,从而实现文本的设置和编辑。

 

  需要说明的是,对象库中包涵了控制器、基本控件、高级控件和手势等很对对象。

  随着版本的升级,对象库还在不断的扩充和完善,短时间内可能无法找到指定的控件,此时我们可以在对象库中直接闭着眼输入控件名,或者借助对象库下方的搜索栏来查找。

  如图:

技术分享

 

 

 

2. 按钮控件

  按照上面操作Label控件的方式,从对象库中拖拽一个Button控件并放到Label标签的正下方,如图:

技术分享

 

  双击该按钮,输入文本OK:

技术分享

 

  现在按钮的状态是默认状态(未点击的正常显示状态),我们运行瞅一下效果:

技术分享 

 

  为了美观,一般还要通过属性检查器优化一下该按钮。

  打开属性检查器,找到Type设置项:

技术分享

 

  展开Type下拉列表,可以选择很多按钮类型,如图:

技术分享

 

  其中,各项含义如下:

  • Custom:自定义类型。如果我们不喜欢圆角按钮,可以使用此类型。
  • System:系统默认属性,表示该按钮没有边框。在iOS 7之前,按钮默认为圆角矩形。
  • Detail Disclosure:细节展示按钮(一个圈,里面一个字母i),主要用于表视图中的细节展示。
  • Info Light和Info Dark:这两个是信息按钮,和上面的细节展示按钮一样,表示有一些信息需要展示,或者有可以设置的内容。
  • Add Contact:添加联系人按钮(一个圈,里面一个+)。

 

  如果希望点击按钮时按钮中央高亮显示,可以勾选Drawing中的Show Touch On Highlight复选框,如图:

技术分享

 

  为了能突出高亮的效果,我们可以把按钮背景设置为深颜色,这可以到属性检查器的View - Background中设置:

技术分享

 

  这里,我设置的是黑色,为了观察高亮的效果嘛。呵呵,运行结果如下:

技术分享 技术分享

 

 

 

3. 结尾

  这里我们虽然还没有任何点击等动作事件的代码,但是到目前为止,我们已经学习了如果创建并设置Label与Button的相关属性。

  也算是小有成就感吧。呵呵。

 

  下一篇咱们就学习一下如何给他们添加动作事件,做一个小案例出来。加油、??

 

以上是关于iOS系列 基础篇 06 标签和按钮 (Label & Button)的主要内容,如果未能解决你的问题,请参考以下文章

Qt入门系列开发教程基础控件篇框架QFrame

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

iOS基础——属性篇

Qt入门系列开发教程基础控件篇QLabel文本标签

Qt入门系列开发教程基础控件篇单选按钮QRadioButton

PyQt5快速上手基础篇4-将lineEdit输入框数据同步显示再label和LCD屏上面