Ok, this post talks about how you go about creating UIView with nib files and load them. Sometimes people have queries about it.. So I thought it will be cool to write about it.
1. You add new files in your project.
2. As usual, you select objective-C class to create a UIView.
3. You choose UIView
4.Pressing next will popup another window where you enter name of your UIView subclass. I named it MIMSearchStringTable.
5. After you press Save, you will view new UIView subclass files created in the project.
6. Now you add a nib file. Add new file in your project You choose User Interface > Empty
7. Choose whether it will be for iPhone or iPad.
8. Give the name of you nib file same as your UIView subclass files. I name them same as MIMSearchStringTable and Save.
9. Now I drag a "View" element on the right panel to my drawing area(square check area).
11. We have to make MIMSearchStringTable class as it owner. Hence we choose it.
12. Now you just go to your .m file and load nib file you just created by writing 2 lines as described in this POST HERE . They are same as shown below but you can copy them easily from my post whose link I have provided.Make sure you put the name in front of loadNibNamed: same as your nib file name.
13. Now we gotta put some UI elements in our nib file. I want to put a tableview. Hence I will make an IBOutlet in my .h file.
14. I go to my nib file where I had dropped the View Element from right panel. Now its time to drag and drop the TableView element from the right panel.
15. I can resize the Tableview. as well as my View.
16. As you can see here, I resized my View as well as its child TableView.
17. Now I make the connection as following.
18.After connection is made you will be able see that Table View is connected to IBOutlet I created in my .h file earlier.
19. Now I need to set my delegates and datasource for the TableView. Hence I selected the TableView by tapping on it gently in View.
20. On the right panel. I have to connect the datasource and delegate to File's Owner. I did this only because I am connecting UITableView. You will know it if you have experience of doing IB connections already.
21. You can change the rowHeight of the cell as shown below. Well your rows will appear short in height depends on your requirement if you need to set it or not.
And write your tableview delegate and datasource methods. Important ones are :
1. You add new files in your project.
2. As usual, you select objective-C class to create a UIView.
3. You choose UIView
4.Pressing next will popup another window where you enter name of your UIView subclass. I named it MIMSearchStringTable.
5. After you press Save, you will view new UIView subclass files created in the project.
6. Now you add a nib file. Add new file in your project You choose User Interface > Empty
7. Choose whether it will be for iPhone or iPad.
8. Give the name of you nib file same as your UIView subclass files. I name them same as MIMSearchStringTable and Save.
9. Now I drag a "View" element on the right panel to my drawing area(square check area).
10. Press File's Owner as shown below. In right panel we have to set its owner. So under Custom Class, you see Class saying NSObject. We have to change it. Click on it and it will display the tableview with options available.
11. We have to make MIMSearchStringTable class as it owner. Hence we choose it.
13. Now we gotta put some UI elements in our nib file. I want to put a tableview. Hence I will make an IBOutlet in my .h file.
14. I go to my nib file where I had dropped the View Element from right panel. Now its time to drag and drop the TableView element from the right panel.
15. I can resize the Tableview. as well as my View.
16. As you can see here, I resized my View as well as its child TableView.
17. Now I make the connection as following.
18.After connection is made you will be able see that Table View is connected to IBOutlet I created in my .h file earlier.
19. Now I need to set my delegates and datasource for the TableView. Hence I selected the TableView by tapping on it gently in View.
20. On the right panel. I have to connect the datasource and delegate to File's Owner. I did this only because I am connecting UITableView. You will know it if you have experience of doing IB connections already.
21. You can change the rowHeight of the cell as shown below. Well your rows will appear short in height depends on your requirement if you need to set it or not.
And write your tableview delegate and datasource methods. Important ones are :
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
Thank you very much. You just saved me a lot of time!
ReplyDeleteThank you! I'm a beginner and this is just what I was looking for!
ReplyDeleteI have a few questions though. How would you use this custom UI object in a ViewController? What I mean by that is do I import as is normally done? Will the class work just like a drag and drop UI element like the TableView you dragged in? Is there a way to add this custom UI object to the right panel where your TableView came from?
The help is much appreciated