十年专注于网站建设与互联网应用开发,低调、有情怀的网络应用服务商!
南昌百恒科技微信公众号 扫一扫关注
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒科技微信公众号

IOS开发之静态表与控制界面布局

百恒网络 2018-11-06 15:59:03 66
       分组表视图的另外一个重要应用就是控制布局,这类似于我们在HTML网页中使用Table标签进行页面布局。图1是苹果官方的即时聊天工具iMessage应用的登录界面,如果这个界面没有采用表视图来控制布局,界面会非常难看。

       可以看到,图1中的表视图是一个静态表,使用我们刚刚学到的知识就可以实现。我们需要将表视图分为三组,第一组有两个单元格,每一个单元格有一个文本框,文本框有输出口;第二组有一个单元格,其中放置一个登录按钮;第三组有一个单元格,其中包含标签控件和扩展指示器。这些工作基本上都是通过代码实现的,包括每一个控件的位置、动作事件等,这是一项比较繁重的工作。幸运的是,iOS 5之后的故事板技术可以帮助我们构建静态表。

       下面我们把图1的界面简化一下,采用静态表技术实现如图2所示的案例。

IOS开发之静态表与控制界面布局一

       使用Single View Application模板创建一个名为StaticTableGroup的工程。打开Interface Builder设计界面,在View Controller Scene中删除View Controller,然后从控件库中拖曳一个Table View Controller到设计界面,设置界面Size Class的值为wCompact | hAny。

       接着选择View Controller Scene→Table View,打开其属性检查器,如图3所示,从Content下拉列表中选择Static Cells(即静态表),将Sections的值设为3(即3节),从Style下拉列表中选择Grouped。

       然后再选择View Controller Scene中的Section-1(选中第一节),打开它的属性检查器,如图4所示,将Rows的值设为2,即该节中包含两个单元格。我们还可以根据需要设定Header(节头)和Footer(节脚),这里我们不设定Header和Footer。

IOS开发之静态表与控制界面布局二

       再将两个TextField控件分别拖曳到该节中的单元格上,如图5所示。然后设置TextField控件的属性,打开其属性检查器,如图6所示,设置Placeholder为“用户名”,Border Style为无边框样式。最后,不用忘记为TextField添加Auto Layout约束。

IOS开发之静态表与控制界面布局三

       第一节中的第二个单元格是密码,输入的密码需要掩码显示。参考第一个单元格,拖曳TextField控件并设置其属性,然后选中Secure Text Entry复选框,如图7所示。
       在静态表的第二节中,有一个按钮,可以按照上面的方法设定。
       在静态表第三节的单元格中,有标签和扩展指示器,其中扩展指示器的设定如图8所示。选择Table View Controller Scene中的单元格,打开其属性检查器,从Accessory下拉列表中选择Disclosure Indicator(扩展指示器)。
       最后,还要拖曳一个Label控件到单元格中,将其内容设置为“创建新账户”。

IOS开发之静态表与控制界面布局四

       这样整个界面就设计好了,可以与图2的效果对比一下。要完成该案例,还需要为登录按钮定义动作事件,为TextField定义输出口,这些操作与普通控件一致,这里不再赘述。

       我们再看看代码部分,ViewController的代码如下:

IOS开发之静态表与控制界面布局五

       在上述代码中,login:方法用于响应登录按钮的点击事件,这里我们将登录验证规则“硬编码”了。不知道大家是否发现,上面的代码没有实现表视图数据源的tableView:numberOfRowsInSection:和tableView:cellForRowAtIndexPath:方法。是的,在静态表中可以不实现数据源和委托协议的方法。 

       关于静态表与控制界面的布局就先介绍到这里,如果还有哪些不明白的地方,可随时来电咨询,百恒网络专业为你解答!
400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
备案专线 备案专线
 
售后服务 售后服务
 
×