- 浏览: 1481491 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (419)
- XMPP (19)
- Android (180)
- Java (59)
- Network (4)
- HTML5 (13)
- Eclipse (9)
- SCM (23)
- C/C++ (4)
- UML (4)
- Libjingle (15)
- Tools&Softwares (29)
- Linphone (5)
- Linux&UNIX (6)
- Windows (18)
- Google (10)
- MISC (3)
- SIP (6)
- SQLite (5)
- Security (4)
- Opensource (29)
- Online (2)
- 文章 (3)
- MemoryLeak (10)
- Decompile (5)
- Ruby (1)
- Image (1)
- Bat (4)
- TTS&ASR (28)
- Multimedia (1)
- iOS (20)
- Asciiflow - ASCII Flow Diagram Tool.htm (1)
- Networking (1)
- DLNA&UPnP (2)
- Chrome (2)
- CI (1)
- SmartHome (0)
- CloudComputing (1)
- NodeJS (3)
- MachineLearning (2)
最新评论
-
bzhao:
点赞123!
Windows的adb shell中使用vi不乱码方法及AdbPutty -
wahahachuang8:
我觉得这种东西自己开发太麻烦了,就别自己捣鼓了,找个第三方,方 ...
HTML5 WebSocket 技术介绍 -
obehavior:
view.setOnTouchListenerview是什么
[转]android 一直在最前面的浮动窗口效果 -
wutenghua:
[转]android 一直在最前面的浮动窗口效果 -
zee3.lin:
Sorry~~
When I build "call ...
Step by Step about How to Build libjingle 0.4
http://www.iphonedevcentral.com/customize-that-uiviewcell-part-1-using-interface-builder/
Customize that UIViewCell – Part 1: Using Interface Builder
If you followed my first tutorial on UITableView (link | source code ), you now have a very simple app that shows a list of DVD titles and clicking any of the titles shows you a detail view page with more information about the DVD. That’s all nice but we really want to make it a little bit prettier. We could display the length of each movie right on the listing page. Also, we have this coverImage field in our data set, let’s use it.
What we want is for our home screen to look like this:
We can accomplish that by customizing UITableViewCell. There are 2 ways of going about it:
- Using Interface Builder
- Programmatically
In reality, you can also choose a hybrid approach where you create some UI elements in the Interface Builder and some programmatically.
Which option to choose?
The two approaches both bring some advantages and disadvantages with them.
Interface Builder
If you decide to go the Interface Builder route, you’ll find it very easy to create and customize your cells. Any subsequent edits can also be done quite easily since you’re simply rearranging elements visually. The downside is speed and performance since the system needs to render each view in a cell individually. If your table view has thousands of rows in it, this may/may not affect the performance of your app, depending how complicated your cell is.
Programmatically
This one involves a lot more work. You are responsible for creating each UI element by hand in the code. That can be very tedious and any edits you need to make in the future require code changes. Also, you’ll need to set up all the autosizing masks yourself. The upside is performance. Since the system will draw each cell as one view, the performance gain can be very significant.
Ok, let’s get to it…
1. Subclass UITableViewCell
Create a Cocoa Touch Class file and make it a subclass of UITableViewCell . Let’s name it DVDListingViewCell.m . We’ll use this class as a placeholder for our labels and the cover image. In DVDListingViewCell.h add the following code:
@interface DVDListingViewCell : UITableViewCell { IBOutlet UILabel *titleLabel; IBOutlet UIImageView *coverImageView; IBOutlet UILabel *featureLengthLabel; } @property (nonatomic, retain) UILabel *titleLabel; @property (nonatomic, retain) UILabel *featureLengthLabel; @property (nonatomic, retain) UIImageView *coverImageView; @end
We use the IBOutlet annotation here to later let Interface Builder know we want to connect these properties with the actual UI elements we’ll lay out.
We also need synthesize the properties we’ve just defined. This will create all setters and getters for us. Add this to DVDListingViewCell.m right below the @implementation directive.
@synthesize titleLabel, featureLengthLabel, coverImageView;
2. Design the cell in Interface Builder
In Xcode, double-click on any of the nib files (they should all be listed under NIB Files magic folder). Once in Interface Builder, choose New… from the File menu. You should be presented a dialog with several templates in it. From the Cocoa Touch category on the left, choose Empty .
You should now see an “Untitled” window with File’s Owner and First Responder in it. One thing missing right now is the actual cell view, let’s add it. From the Library window (Tools -> Library) locate Table View Cell . Drag it to the “Untitled” window. You should now see something like this:
Double clicking on the Table View Cell object will open up the actual cell view where we’re going to add our UI elements. Make the cell 120 pixels in height (you change the dimensions under the size tab in the properties window or by pressing Command + 3 ). Drag a couple Lable s and an Image View to the cell to lay it out as shown below. Once done, save the file as DVDListingView . Make sure to save the file in your project directory and check the checkbox when prompted if you want to add the file into your project.
3. Prepare the RootViewController
Return back to Xcode and open up your RootViewController.h header file. We will add a cell instance variable of type DVDListingViewCell that we’ve created earlier. We will use this cell to actually draw on the screen. Modify your header file to make it look like this:
@interface RootViewController : UITableViewController { DvdLibraryDao *dao; IBOutlet DVDListingViewCell *_cell; }
You may notice the IBOutlet annotation again. That is because we will be connecting this variable to the actual cell we created in Interface Builder.
Let’s switch to the implementation file of our RootViewController (RootViewController.m ). You may remember the method cellForRowAtIndexPath from the first tutorial . That’s the method that controls what cell is drawn at which row. We’ll want our cell to be a DVDListingViewCell so let’s modify the current version of it to this:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"LibraryListingCell"; DVDListingViewCell *cell = (DVDListingViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { [[NSBundle mainBundle] loadNibNamed:@"DVDListingView" owner:self options:nil]; cell = [_cell autorelease]; _cell = nil; } cell.titleLabel.text = [[dao libraryItemAtIndex:indexPath.row] valueForKey:@"title"]; cell.featureLengthLabel.text = [NSString stringWithFormat:@"%@ minutes", [[dao libraryItemAtIndex:indexPath.row] valueForKey:@"featureLength"]]; cell.coverImageView.image = [UIImage imageNamed:[[dao libraryItemAtIndex:indexPath.row] valueForKey:@"coverImage"]]; return cell; }
There are few things going on so let’s analyze them line by line.
Line #5 was changed to initialize the cell local variable to the DVDListingViewCell instead of the generic UITableViewCell .
Lines #6-#10 contain the meat of the cell creation. It first loads the nib file we created. You can see we’re setting the owner to self . That is because the _cell instance variable will get initialized via the nib file, which I’m going to cover a little later.
And finally, Lines #12-#15 assign proper values to the labels and image view in our custom cell.
4. Connect everything in Interface Builder
Return back to Interface Builder and click on the File’s Owner icon. Open up the Identity Inspector (Tools -> Identity Inspector) and look at the Class drop-down menu. Locate RootViewController and select it. In the same window, you should now see the _cell instance variable that belongs to RootViewController . When the nib file is loaded, we’ll want the cell we designed in Interface Builder to be assigned to our _cell . Let’s do that next.
Open up Connections Inspector (Tools -> Connections Inspector) with File’s Owner icon still selected. You should see our _cell in the Outlets section. Next to it is a little hollow circle that turns into a plus (+) sign when you hover it. Click on the circle and drag over to the Listing View Cell window. When you drag over it, the cell should highlight with a label that says “Listing View Cell.” Release the mouse to complete the connection (the cell will blink).
Note: There is an alternate way of creating the connection; Click on the File Owner’s icon while pressing down the Control key and Ctrl-drag to the Listing View Cell icon. A little black pop-up window “Outlets” will appear. Select _cell and let go of the mouse.
Now let’s connect our two labels and the image view. Highlight the Listing View Icon and open up Identity Inspector (Command+4). Under the Class drop-down find and select our DVDListingViewCell . Once done, you should see all the outlets we defined earlier in the DVDListingViewCell class: coverImageView , featureLengthLabel and titleLabel . Open up Connections Inspector (Command+2) and check out the Outlets section. Just as before, drag a connection from the hollow circle next to titleLabel to the “My DVD” label, featureLengthLabel to the feature length label and finally coverImageView to the UIImageView object in our Listing View Cell .
Alternatively, you can Control-drag from the Listing View Cell icon to the Listing View Cell window and connect the three objects that way.
Save all your changes and return back to Xcode.
5. Set the cell height in RootViewController
After you’ve saved your changes in Interface Builder and return back to Xcode, go ahead and run the project. You’ll see that everything works well except one thing – the cells are all crammed together.
This is because we need to explicitly set the height of cells in each row when it differs from the default. We can correct that by implementing the heightForRowAtIndexPath delegate method in the RootViewController.m file.
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 120.0; }
Rerun your project and you should now see the cells correctly sized and looking good.
Conclusion
Remember that this is just one of a couple ways to customize your cells. You can do all of this by hand, programmatically which is more work but may result in a better performance. We will cover that in the second part of this tutorial.
You can download the complete source code to this tutorial here: My DVD Library Xcode Project 02 .
- MyDVDLibrary02.zip (95.6 KB)
- 下载次数: 2
发表评论
-
Nuance - Dragon Mobile SDK - Speech Kit
2012-07-02 15:57 1368http://dragonmobile.nuancemobil ... -
iOS的开源库和开源项目
2012-06-14 10:54 982http://www.cocoachina.com/iphon ... -
[iOS开发教程-5]Create Indexed UITableView
2012-06-13 16:31 1705http://www.iphonedevcentral.com ... -
[iOS开发教程-4]Create a UITabBarController from scratch
2012-06-13 15:20 1386http://www.iphonedevcentral.com ... -
[iOS开发教程-3]Create a Detail View Page using UIImageView, UITextView and UILabel
2012-06-13 14:11 2088http://www.iphonedevcentral.com ... -
[iOS开发教程-1]Hello UITableView!
2012-06-13 11:12 2025http://www.iphonedevcentral.com ... -
Window 7主机与VMware中Mac虚拟机共享文件夹
2012-06-08 23:28 190971. 确保针对Mac虚拟机的VMware Tools的安装 ... -
VMware 8.02虚拟机安装MAC lion 10.7.3教程 附送原版提取镜像InstallESD.iso!
2012-06-08 23:14 6327http://www.winthink.net/thread- ... -
[iOS]深入浅出 iOS 之多线程 NSThread
2012-06-08 15:30 21243http://www.cocoachina.com/bbs/r ... -
Object-C中的Selector概念
2012-06-08 15:25 1051selector可以叫做选择器,其实指的就是对象的方法,也 ... -
CodeBlocks集成Objective-C
2012-06-05 23:35 1158http://www.jxva.com/?act=blog!a ... -
用ultraEdit打造自己的Objective-C IDE for Windows
2012-06-05 21:41 1451http://blog.csdn.net/tomatofly/ ... -
Windows下UltraEdit查看Objective-C代码高亮工具
2012-06-05 21:26 2446http://www.cocoachina.com/bbs/r ... -
Objective-C 编程教程(全)
2012-06-04 23:32 1243http://www.youku.com/playlist_s ... -
iPhone开发学习笔记
2012-06-04 22:15 2621http://blog.csdn.net/huanglx198 ... -
Installing and using GNUstep and Objective-C on Windows
2012-06-04 16:49 1013http://www.techotopia.com/index ... -
GNUStep
2012-06-04 16:45 1211http://www.gnustep.org/ T ... -
Objective C programming in Windows – GNUStep & ProjectCenter
2012-06-04 16:12 1118http://www.jaysonjc.com/program ... -
The Objective-C Programming Language
2012-06-03 19:31 988http://developer.apple.com/libr ...
相关推荐
Adobe Experience Manager 6 扩展:自定义管理控制台 这是一个示例包,展示了如何自定义现有的 AEM 6 管理控制台。 此软件包提供站点管理的更新。 建造 本项目使用 Maven 进行构建。 常用命令: ...
在iOS中自定义选项卡栏控制器您可以上找到完整的教程本教程由The App Guruz提出-印度最好的之一
npm install -D react-app-rewired customize-cra customize-cra-react-refresh 创建或更新您的config-overrides.js const { override } = require ( "customize-cra" ) ; const { addReactRefresh } = require ( ...
1、如果你的VC6.0安装在C盘,请拷贝 VC6LineNumberAddin.dll 文件 到如下目录: C:\Program Files\Microsoft Visual Studio\Common\MSDev98\AddIns 2.、注册 双击 VC6LineNumberAddin.reg 进行注册; 3、启用 打开...
将插件安装在Redmine插件目录中,将此存储view_customize为view_customize : cd {RAILS_ROOT}/plugins git clone https://github.com/onozaty/redmine-view-customize.git view_customize cd ../ bundle install -...
Chapter 2: Your First Angular App Chapter 3: Putting Angular in Context Chapter 4: An HTML and CSS Primer Chapter 5: JavaScript and TypeScript: Part 1 Chapter 6: JavaScript and TypeScript: Part 2 ...
Like music and movies, video games are rapidly becoming an integral part of our lives. Over the years, youve yearned for every new gaming console, mastered each blockbuster within weeks after its ...
使用在线生成器生成的CKEditor 5编辑器该存储库显示了由“生成的CKEditor 5编辑器构建快速开始在浏览器中打开sample/index.html页面。 如果您选择了实时协作插件: 用正确的令牌,websocket和上载URL端点填充对话框...
**步骤1:使用所需的属性(例如ItemsSource和Mapping属性)初始化GanttControl。 [XAML] <gantt:GanttControl x:Name="Gantt" Margin="50" ItemsSource="{Binding TaskDetails}" UseAutoUpdateHierarchy=...
如何使用WPF SkinManager自定义主题? 此示例使用SkinManager 加载具有自定义主题外观的和 ,并注册主题设置支持。
Chapter 2: Core Data, What, Why and How Chapter 3: A Super Start Chapter 4: The Devil in the Detail View Chapter 5: Preparing for Change: Migrations and Versioning Chapter 6: Custom Managed Objects ...
打开VC6.0,菜单栏:Tools -> Customize -> Add-ins and Macro Files 选中 VC6LineNumber Developer Studio Add-in,之后按 Close 按钮关闭即可! 第三步注册失败问题解决: 1。右键vb6.0快捷方式→属性→兼容性 2...
-iOS(+ IL2CPP 64 bit, IPv6), tvOS, Android -Windows Phone 10, Windows Store Apps, UWP -Windows, Mac OS X, Linux Most notable HTTP features are: -Customize all parts of your requests: -+Methods(GET, ...
SineView SineView allows you to paint and animate a sine ...sv_sine_alpha: to apply an alpha to the sine (0-1) sv_sine_phase: Sine phase parameter sv_sine_amplitude: Sine amplitude para
* The exact version of Delphi or C++ Builder you are using. * The name and exact version of your operating system (e.g. NT4 SP5). * The exact version of the Internet Explorer installed on your ...
前端开源库-customize-engine-handlebars自定义引擎把手,将把手用作自定义引擎
Chapter 2: Core Data, What, Why and How Chapter 3: A Super Start Chapter 4: The Devil in the Detail View Chapter 5: Preparing for Change: Migrations and Versioning Chapter 6: Custom Managed Objects ...
Part 2: Simple scheduling basics Chapter 3. Start a new plan Chapter 4. Build a task list Chapter 5. Set up resources Chapter 6. Assign resources to tasks Chapter 7. Format and share your plan Chapter...