Add UITableView with dynamic content in an XIB file - uitableview

Is there a way to add a UITableView (not a Table View Controller, but a TableView within another view) and set its content to "Dynamic Prototype" in an XIB file?
This works fine when adding a UITableView in a view controller within the storyboard. However, when I try to do the same in an XIB file, I cannot set its content to "Dynamic Prototype".

Update
In thinking about this recently, there is a fairly straightforward solution to the problem, which is to use the container view pattern.
Basically, add a container view to your xib (or storyboard).
Select the view controller attached by default to the container view.
Delete the selected view controller and drag in a normal uitableviewcontroller onto the IB canvas.
Next, control-drag from the container view to the uitableviewcontroller and select 'Embed' from the available segues types.
Resize the container view to your liking and create the appropriate code file for the table view controller.
Refactor the uitableviewcontroller to a separate storyboard/xib.
Note - The table view controller will be accessible as a child view controller of the view controller that holds the container view in code.
Why is this the correct pattern? 1 Storyboard, 1 Controller. The TableView has it's own controller because it is complex enough to warrant a separate controller. Using the container view pattern allows you to maintain a single responsibility pattern. Avoids controller bloat.
Workaround for original answer
Please be aware of a gotcha where if you resize the tableview; the xml will be regenerated by Xcode and require you to re-add the attribute. I have confirmed that this edit still works in version 9.3+. A sample stub is available at https://github.com/mingsai/test-stub-tableviewdynamic-inxib.git.
Original Answer
Open the file navigator
Right-click on the YourCustomView.xib file
Open As > Source Code
Find the XML beginning with
Within the XML tableview tag locate the style attribute
Leaving an empty space before the style tag, paste in
dataMode="prototypes"

Not 100% sure on this, but I don't think there is a way to set the UITableView content to "Dynamic Prototype" in a XIB file.
However you can achieve the same functionality by creating another XIB file, called something like "MyTableViewCell.xib", that only contains a UITableViewCell, give the cell an identifier, go to File's Owner and in the identity inspector set it to the same view controller class as your table view xib, then create an IBOutlet in your view controller like this:
#property (nonatomic, assign) IBOutlet UITableViewCell *customCell;
then in the XIB, click on the File's Owner and control-drag to the uitableviewcell and set the cell's outlet to the "customCell" property.
(This might be done a lot easier if you find the button that looks like a play button inside a circle in the bottom left hand corner of the graphic editor, click on it, then do your dragging in that column).
After all that, in cellForRowAtIndexPath use code similar to this:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"CustomCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
[[NSBundle mainBundle] loadNibNamed:#"MyTableViewCell" owner:self options:nil];
cell = customCell;
}
// Other cell configurations....
}
Hope that makes sense and suits your needs!

Related

Custom cell class in UITableView with static cells

I have a UITableView with static cells in a Storyboard. The static cells are of a custom class. I would like to wire up the outlets for the cell but it seems like this is not supported?
Wiring the views onto the ViewController works, but is rather messy (there are lots of cells). A workaround would probably also be to tag the views, but also not ideal. Any other ideas?
You cannot control-drag your UIView to the source file. However, you can link up the other way around.
In Storyboard, select your static cell, and setup the Custom Class.
In your custom class, add all the #IBOutlet as you need.
Go back to Storyboard, select your static cell, and in Inspector, select Show the Connections Inspector (the last tab).
Drag the Outlets there to your UIView(s).
If you use "assistant editor", you will see the circle in front of #IBOutlet is now filled (hooked).
have you checked custom class of that UITableViewCell. it should be custom file and subclass of UITableviewCell you are created.

UITableView - how to register a cell from secondary view?

If you drag a UITableViewCell onto the top toolbar of a view controller, it appears above the view controller in IB as a secondary view. This is nice because you can do all the layout there. But how do you then get a table view to load the cell from there?
This doesn't work:
[self.tableView registerClass:[MyCustomTableViewCell class] forCellReuseIdentifier:#"MyCell"];
And since it's not in a separate nib file, registerNib doesn't seem appropriate either. Any ideas?
Although that may be possible you have several options when designing tableview cells. You can either design it in a separate .xib file or you can use a prototype cell. Below is an example of a separate .xib file. When you use a separate .xib you would use the registerNib method.
Or with a prototype cell in which the cell is automatically registered with the tableView.

Connect UIView in XIB and load it using View Controller in the Story board

I have a XYZViewController (simple UIViewController in storyboard) that is loaded up with the default view. I have a type XYZView for which I have UIView in a .xib file.
In the XYZViewController class, I have defined property for XYZView as an IBOutlet. What is tricky is I don't know how to connect this property to the UIViewController in storyboard (or UIVIew in .xib file) such that —
the IBOutlet is connected to the right UIView
the view in the xib becomes an added subview for the default view of the UIViewController.
(I under the question sounds dodgy and/or I may not have the very right way to explain it, but that's the best I could.)
EDIT: Further clarification may make it easier. I just don't want to myself say:
XYZView *xyzView = [[XYZView alloc] initWithFrame...];
or
[self.view addSubview:xyzView];
Maybe that helps.
OK, from what I tell you have the following...
XYZViewController
The code of this is in XYZViewController.h and .m files.
A .storyboard file
In the storyboard file you have a view controller that you have set the subclass to XYZViewController.
A .xib file
In the xib file you have a single view that you have defined as the subclass XYZView.
Right?
I'm guessing what you have done is the following...
In the .xib file you have laid out the XYZView and put labels, buttons, etc... on it.
The view controller is being created by the storyboard. But now you want to attach the labels and buttons to it.
Right?
If all this is correct then you have a couple of options.
The easiest option
Drop the xib file. Unless that XYZView is being used in multiple places in the app (i.e. inside different view controllers) then you should really be doing all of that layout in the storyboard. Add the buttons and labels to the XYZViewController in the storyboard.
This will then allow you to connect the IBOutlets and IBActions and it will all just work because the storyboard is creating and then setting the outlets and actions.
Next option
Because you have created the view in a xib file you have to load it from that xib file in code and then add it to you view controller.
Something like...
- (void)viewDidLoad
{
[super viewDidLoad];
self.xyzView = [[[NSBundle mainBundle] loadNibNamed:#"XYZView" owner:self options:nil] objectAtIndex:0];
[self.view addSubview:xyzView];
}
Then you can do stuff like ...
self.xyzView.someLabel.text = #"This is the text";
You still won't be able to connect outlets and actions but that's because the view controller is not being created by the xib. It's being created by the storyboard.
This can get all messy though. I'd really only recommend creating a view in a separate xib if it's something that you reuse over and over (like a 5star rating view or something).
What you absolutely can't do
OK, I think I may have thought of what you are doing.
In the storyboard you have set the subclass of the view as XYZView and you are expecting it to pick up the labels and buttons etc... that you have defined in the xib file for XYZView.
This absolutely will not work, ever.
The storyboard and the xib are completely separate objects. If you want to use them together then code is involved in loading a view from a nib and then adding it to a view controller created in a storyboard.

ios 7 customizing UITableViewCell's content view

Using storyboard in ios7 the content view is explicitly viewed under the Table View Cell in the story board editor (opposed to previous versions where it was hidden from the interface).
The problem is that I cannot connect the cell's custom elements to my custom cell's ib outlets anymore (subclass of UITableCellView) and can only connect them to the table's content view (UIView) which CANNOT be customized (i.e. its custom class attribute is grayed)
This leaves me with the option to use tags which I find inconvenient and less elegant.
I could also create a custom view in a xib, do all the connections and then manually add this custom view as the content view of the table but I am looking for a way doing it via the story board editor.
Is there a way to connect UI elements to a custom cell's content view in the story board editor in ios7 ?
Ok I found an Xcode bug.
If you complete the following this will replicate the issue:
- Create new UIViewController in storyboard
- Drag a UITableView to the VC
- Update the UITableview to have 1(as many) dynamic prototype cells
ISSUE: The cells are added but without a contentView.
RESOLUTION:
Rather than updating the amount of cells in the storyboard.
Drag a custom cell from the objects part of Xcode, the Cell will be added with a contentView.
I was able to do this by doing the following:
Select the cell in the document outline
Change its custom class in the Identity Inspector
Place whatever elements you want into the content view
Connect the IBOutlets to the elements inside the content view using the Connections Inspector
I don't really know the answer, but I can suggest work around this issue:
1) Copy existing cell from other tableview to the one you're working on.
2) You will have contentView under your cell now. Design this cell by adding your views.
3) Create a class for your cell, e.g NewCell, then manually create IBOutlet in this class:
#property (nonatomic, strong) IBOutlet UILabel* mainLabel;
4) Assign the cell class in storyboard to the class you just created. After this step, you can drag the outlet from storyboard to class.
I'm not sure if this is a bug for XCode 5 or it is intended, and I'm looking for better solutions as well.
Create new uiviewcontroller with xib interface and add the required sub-views .Also,establish the iboutlet connections.
Now ,rename the viewcontroller : UIViewcontroller to viewcontroller : UITableviewcell in .h file of your newly created view controller.
Your tableviewcell was created and ready to use with any UITableview of any class.
Hope it helps.
I might be duplicating someone else's answer but I found this workaround which helped bypass this silly XCode bug. Short solution: When you build your custom cell in Storyboard, do NOT drag your UI elements inside the cell or content view.
Instead, drag them OUTSIDE so that they're child elements of the parent table view!
It's easiest to do this drag and drop if you use the little hierarchy menu on the left to make sure your elements wind up in the right spot.
Once the elements are dragged in, just control-click and drag from the custom cell to the UI elements to make your connections. Woo hoo!
Once your connections are set, then (finally) drag the UI elements back INTO the custom cell's content view and lay them out as you normally would.
UPDATE: While my method works, look for a comment by thomasdao in an answer below where he just drags the connections directly into the .h file (the little circles in the left margin where you declare your IBOutlets) -- this is actually the easiest solution but unfortunately it's stuck as a comment.

Custom views with Storyboard

In complex screens (View Controllers) I used to separate the whole thing in smaller pieces (I call them widgets). These widgets consist basically of a MyWidget.h and a MyWidget.m file as well as a MyWidget.xib file, where the root element is a UIView and the MyWidget class is the File Owner of the UIView. In the init of this widget I do a loadNibNamed.
In my View Controller I then do a [[MyWidget alloc] init], which I add to View's Controller main view as a sub view. This, so far, works perfectly.
I'm now wondering, how to do the same with storyboard, because I cannot really start to drag in a UIView somewhere, I always have to start with an UIViewController, which I don't want to.
If there is no possible way doing this with a Storyboard, can I simply do it the old way, by using the Storyboard for my main screens and segues, and use a separate .xib file to define custom views?
Putting the widget/view in a separate .xib file works, and is appropriate especially if you might want to reference that same view from multiple View Controllers.
However, sometimes you do want to see the additional view/widget within the same storyboard, and it is possible. Here's how you do it:
Select your view controller in IB (click on the black bar below the view), then drag a UIView from the Object Library into the black bar:
When a view is in the black bar, it's instantiated like any other view in IB but just isn't added to your view hierarchy until you do so in code. Change the view's class to match your own subclass if necessary:
You can hook it up to your view controller like you would hook up any other view:
The added view shows up in your Document Outline and you can hook up actions and references there too:
Now, the problem that remains is that you can't actually see the view no matter how many times you try to click or double click, which would defeat the whole purpose of putting it in the same storyboard. Fortunately there are two workarounds that I know of.
The first workaround is to drag the view from the black bar back into your view controller's view, edit it, then drag it back into the black bar once you're done. This is troublesome but reliable.
The other workaround is more finicky, but I prefer it because it lets me see all my views at the same time:
Drag a UITableView from the Object Library into your newly added view.
Then drag a UITableViewCell into that UITableView.
Once you do that, your view pops out magically by the side, but you have a UITableView that you don't want. You can either resize that to 0x0, or you can delete it and your UIView will (usually) still stay visible.
Occasionally the secondary view will become hidden again in IB. You can repeat the above steps if you deleted the UITableView, or if the UITableView is still in the hierarchy you just need to click on the UITableViewCell and the view will appear again.
The second method works for UIViews but not so well for UIToolbars and is impossible for UIButtons, so the cleanest solution I've found when you need to include lots of different subviews is to attach a single secondary UIView to your view controller as a container that never gets shown, put all your secondary views in there, and use the UITableViewCell trick to make everything visible. I resize my dummy UITableView to 0x0 to make that invisible. Here's a screenshot of how it all looks like together:
If you're just looking to make your view controllers else-where(and not in your story-board), then there's a pretty simple way to accomplish this:
1) Create your CustomViewControllers(abcdController in the code I tried) with their individual xibs as usual.
2) Add a UIViewController(or whatever was the superclass of your CustomViewController) to the story-board.
3) Set the CustomClass to CustomViewController instead of UIViewController as shown here:
4) Finally, in your viewDidLoad, load the custom xib and you're done.
- (void)viewDidLoad
{
[super viewDidLoad];
[[NSBundle mainBundle] loadNibNamed:#"abcdController" owner:self options:nil];
// Do any additional setup after loading the view from its nib.
}
I think you can do something like this to get instance of specific viewcontroller from Storyboard and use view on top of it.
ex:
MyViewController* myViewController = [[UIStoryboard storyboardWithName:#"Main" bundle:nil] instantiateViewControllerWithIdentifier:#"myViewController"];
UIView* view = myViewController.view; //Get the view from your StoryBoard.
Hope this helps
Thanks
Vijay

Resources