Storyboards Tutorial 02

Adding a Table View Controller

连接到tab bar controller中的两个窗口都是regular UIViewControllers.你将使用UITableViewController来替换第一个tab

选择第一个view controller然后delete它。拖一个table view controller。

选择table view controller,然后在xcode上方的菜单栏中选择Editor\Embed In\Navigation Controller。这就会添加另外一个view controller

当然你也可以从库中拖一个navigation controller,但是这个更方便。

因为navigation controller也是一个container view controller,它也有一个关系箭头指向table view controller。可以在Document Outline中查看这些关系。

注意现在table view controller有了一个navigation bar。Interface Builder自动做到。

让我们连接这两个窗口到tab bar controller。 Ctrl-drag从tab bar controller 到navigaiton controller。一个小窗口pop menu会出现。

选择Relationship Segue – view controllers,这个就在这两个窗口间创建了新的关系。

你 会发现在tab bar controller中新出现了一个tab。你可以将这个对应也navigation controller的tab和另外一个通过拖拉的方式换位置,这样第一个出现的就是navigation controller中的table view了。

启动app后

修改tab的名字-第一个tab修改为“players”,第二个修改为“gestures”。但是并不是你想象的在tab bar controller内部去修改,而是在这两个tab所关联的view controllers中去修改才会有效果。

当你连接一个view controller到tab bar controller的时候,会给他一个tab bar item的选项,你就要利用这个来修改tab的title和image

添加图片,首先请先下载图片资源,resources for this tutorial 包含一个叫做Images的文件夹。添加到工程中去。在player tab bar item中选择players.png图片,给gesture item选择gestures.png文件。

嵌 入到navigation controller中的view controller都有一个navigation item的对象来配置navigation bar。选择table view controller中的navigation item并且修改他的title为players。或者双击navigation item来修改。

运行app后效果:

Prototype cells

prototype cells允许你轻松的为你的table view设计一个自定义的layout。在Attributes inspector中设置style选项为subtitle,会即刻出现一个含有两行的cell。

在Accessory中选择Disclosure Indicator,在Identifier中设置PlayerCell.所有的prototype cells依然是regular uitableviewcell objects因此需要一个复用标示符。

运行app,发现没有任何的改变。这并不奇怪,你还需要为这个table设置data source然后它才会知道需要显示什么。

选择新建文件,选择Objective-C class模版。将类命名为PlayersViewController并且继承自UITableViewController. With XIB for user interface选项不应该勾选因为你已经设计好了view controller。

到storyboard中选择table view controller,在Identity inspector中将class设置为PlayersViewController。这个是关键的一步,将storyboard中的窗口和你自己的view controller子类连接起来!

PlayersViewController.h:中添加mutable array property

这个数组将保存app的mian data model,包含player 对象。新建立一个Player类继承自nsobject。

AppDelegate.m中improt 这个player和playersviewcontroller类并且添加一个新的变量_players

修改application:didFinishLaunchingWithOptions:方法

你可以从上面的代码中注意到

Note: This is one of the limitations of storyboards. With nibs you always had a reference to the App Delegate in your MainWindow.xib and you could make connections from your top-level view controllers to outlets on the App Delegate. That is currently not possible with storyboards. You cannot make references to the app delegate from your top-level view controllers. That’s unfortunate, but you can always get those references programmatically, which is what you do here.

注 意:这个就是storyboards中其中一个限制。使用nibs文件的时候你总是可以在mainwindow.xib中一个app delegate的饮用并且你可以通过outlets来建立app delegate和view controllers的连接。但是在storyboards中不行。你不能使用引用但是依然可以通过编码实现。

UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;storyboard的initial view controller是一个tab bar controller。因此你可以查找到window的rootViewController及是这个uitabbarcontroller。
UINavigationController *navigationController = [tabBarController viewControllers][0];

playersviewcontroller在一个navigationcontroller内,而这个navigation contoller又是在第一个tab中,所以通过这个索引就可以查找到uinavigationcontroller对象。
PlayersViewController *playersViewController = [navigationController viewControllers][0];

然后查找anvigationcontroller的root view controller,就是playersviewcontroller到此为止我们就拥有了一个有内容的player 对象群了。打开PlayersViewController.m
#import "Player.h"
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.players count];
}关键的地方是这个cellforrowatindexpath方法,之前的标准写法是

意思是你会询问table view去复用一个cell并且如果没有free的cells可以重用就返回nil然后你可以创建一个新的cell类的实例。但是现在不再需要这样做了!

唯一需要做的就是获取一个新的cell。如果没有可以复用的cell,会自动创建一个prototype cell的副本并返回给你。所有你需要做的就是使用在storyboard编辑器中设置的re-use identifier。可以查看前面有关的设置。

PlayerCell是之前设置的identifier。千万不要忘记设置这个identifer,否则这个复用功能不会工作的!

再次运行就可以看到效果了

Designing Your Own Prototype Cells

Main.storyboard中选择prototype cell设置他的style属性为custom。可以使用Row Height设置cell的高度。拖两个Label对象和一个Image View,设置宽度为81,设置mode为center。

因为是自定义的,所以不再使用UITableViewCell’s textLabel and detailTextLabel。给Name label tag 100, the Game label tag 101,and the Image View tag 102.

PlayersViewController.m中添加一个新的方法imageForRating

修改tableView:cellForRowAtIndexPath

最终运行后的效果:

Using a Subclass for the Cell

虽然table view运行的不错了但是还是不太喜欢用tags来访问labels和其他的subviews。所以使用outlets会更容易操作。

首先新建立一个class叫PlayerCell,继承自UITableViewCell

PlayerCell.h中修改为:

Main.storyboard中选择prototype cell并且将class设置为playercell。到此每次问table view一个新的cell时候dequeueReusableCellWithIdentifier返回的就是一个playercell

的实例而不是regular uitableviewcell了。

然后将labels和image view连接到和谐outlets上去。

Important:
You should hook up the controls to the table view cell, not to the view
controller! You see, whenever your data source asks the table view for a
new cell with dequeueReusableCellWithIdentifier, the table view doesn’t give you the actual prototype cell but a copy (or one of the previous cells is recycled if possible).

This means there will be more than one instance of PlayerCell
at any given time. If you were to connect a label from the cell to an
outlet on the view controller, then several copies of the label will try
to use the same outlet. That’s just asking for trouble. (On the other
hand, connecting the prototype cell to actions on the view controller is
perfectly fine. You would do that if you had custom buttons or other UIControls on your cell.)

PlayersViewController.m

Where To Go From Here?

Check out part two of this tutorial, where we’ll cover segues, static table view cells, the Add Player screen, a game picker screen, and the downloadable example project for this tutorial!

时间: 2024-07-29 15:02:07

Storyboards Tutorial 02的相关文章

dx11 入门 Tutorial 02: 数据传入GPU的设置 和绘制一个三角形 DirectXSampleBrowser(June 2010)

烦...一年前看过教程,但全忘掉了,这一年我都干什么了... 教程2遇到的两个error: error 1:ID3DBlob调用不成功 ,是重复调用版本冲突的原因?ID3DBlob在D3DCommon.h中, 因为window include里和SDK里各有一份,造成了冲突,修改头文件的调用,先调用SDK内的即可.参考:http://www.cnblogs.com/Wilson-Loo/archive/2013/01/20/2797902.html 那为什么先后顺序就解决问题呢> error 2

Vulkan Tutorial 02 编写Vulkan应用程序框架原型

操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 General structure 在上一节中,我们创建了一个正确配置.可运行的的Vulkan应用程序,并使用测试代码进行了测试.本节中我们从头开始,使用如下代码构建一个基于GLFW的Vulkan应用程序原型框架的雏形. #include <vulkan/vulkan.h> #include <iostream> #include <stdexcept>

Java tutorial 02

一.EnumTest.java枚举类型 1 public class EnumTest { 2 public static void main(String[] args) { 3 Size s=Size.SMALL; 4 Size t=Size.LARGE; 5 //s和t引用同一个对象? 6 System.out.println(s==t); // 7 //是原始数据类型吗? 8 System.out.println(s.getClass().isPrimitive()); 9 //从字符串

Storyboards Tutorial (三)

这一节主要介绍segues,static table view cells 和 Add Player screen 以及 a game picker screen. Introducing Segues 开启 Main.storyboard拖拉一个Bar Button Item到Players窗口导航栏的右侧.在Attributes inspector中改变Identifier为Add,就会出现一个+号button. 当用户点击时会弹出一个模态窗口来输入新的player的详细信息. 拖拉一个新的

Storyboards Tutorial 04

设计好后运行发现没有任何变化,是空白的.这是因为你的tableview相关的delegate方法还在.所以首先要屏蔽或者删除在PlayerDetailsViewController.m 如下的操作 #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {#warning Potentially incomplete method impleme

Swift语言Storyboard教程:第二部

本文由CocoaChina翻译小组@TurtleFromMars翻译自raywenderlich,原文:Storyboards Tutorial in Swift: Part 2 更新记录:该Storyboard教程由Caroline Begbie更新iOS 8和Swift相关内容.原文作者为教程编纂组的成员Matthijs Hollemans. 2014/12/5更新:更新至 Xcode 6.2 Beta. 如果你想学习Storyboard,你来对地方了! 在本系列Storyboard教程的第

OpenGL学习--02--绘制一个红色三角形

1.tutorial02.cpp // Include standard headers #include <stdio.h> #include <stdlib.h> // Include GLEW #include <GL/glew.h> // Include GLFW #include <glfw3.h> GLFWwindow* window; // Include GLM #include <glm/glm.hpp> using names

在iOS 7中使用storyboard(part 1)

原文:Storyboards Tutorial in iOS 7: Part 1 感谢翻译小组成员heartasice热心翻译.如果您有不错的原创或译文,欢迎提交给我们,更欢迎其他朋友加入我们的翻译小组(联系qq:2408167315). ========================================================================================== Storyboard是一项令人兴奋的功能,在iOS5中首次推出,在开发app的

一步步学OpenGL(2)-《你好顶点》

教程 2 你好顶点 原文: http://ogldev.atspace.co.uk/www/tutorial02/tutorial02.html CSDN完整版专栏: http://blog.csdn.net/column/details/13062.html 背景 这里要第一次开始使用GLEW(the OpenGL Extension Wrangler Library)库.GLEW可以帮助我们解决一些伴随OpenGL扩展库管理出现的一些头疼的问题,初始化之后,它会检索你平台中所有可用的扩展库,