How to make table view horizontally engage full width - ios

I'm developing an ios application which has a table view. when there is a long value in table cell, table column width size should be increase. I've develop a custom UI for this requirement as following images.
I have change the content size using following code, but it isn't increase
the table body size. you can see it in following image.
self.resultTableView.contentSize.width = self.cellWidth!
You can see the first image its appear as it is and when there is more indexes (columns) and user try to scroll horizontally towards right(as shown in second image), table view will not expand more than the viewport size.
How can I do table view fit to the scroll size?
and finally everything become invisible.
feel free to ask anything if you dont clear enough the quection.

I guess what you have to do is dynamically calculate the desired width and then set the tableView width (for example with a tableView.widtAnchor) to exactly this width.
For a table that scrolls into both dimensions, this could also be helpful:
http://www.brightec.co.uk/ideas/uicollectionview-using-horizontal-and-vertical-scrolling-sticky-rows-and-columns

Related

Is it possible to use constraints to specify a views height as percentage of the parent view, but also limit the maximum resulting height?

I am new to XCode and have set up a view controller using the interface builder. The root is a stack view set to Alignment: Fill and Distribution: Fill Proportionally.
Each item in the stack view is pinned to the parent stack view, and constraints are used to specify the height as percentage of the stack view (i.e. the entire screen) using multipliers of Superview.Height.
This part works great, all the views scale to the desired height percentage and it looks good on devices like iPhone 5s.
However, on devices like XS Max some of the controls, such as text fields, simply look too tall and the text inside gets too much space above and below (compared to the text field rectangle).
The desired result would be that all the views scale with the screen, but in case the resolution and aspect ratio is too great the text fields would remain a bit smaller and yield the remaining space to the other views.
My first idea was to add a second constraint to the text fields where the height is set as Less Than or Equal to (for instance) 30 in conjunction with the existing height percentage. But I have tried that out, and tried different Priority values, but no luck so far.
Is there any way to achieve the desired result using constraints and auto layouts on the current (flat) view hierarchy?
Or is it better to look into adding nested stack views and set the percentage height constraint on the nested stack view, while letting the text field inside handle its own height?
Suggestions appreciated!
Distribution: Fill Proportionally is perhaps the most misunderstood property of stack views, and is likely not doing what is expected (or what is wanted).
As per OP's comments... changing the Distribution property (I'm assuming it was changed to Fill) fixes the issue.

Why are my autolayout constraints conflicting?

I have an app using scroll view on a page with numerous icons within that scroll view. I don't understand auto layout very well, but I have constrained every single icon to its current canvas value to the view (after measuring and placing each icon in the correct spot). Why are there still conflicts (188 to be precise) and unambiguous positions?
As an example of what I have done in case the above is not clear, I have placed an icon in the top left of the scroll view. I have then constrained that icon on top, bottom, left and right of its current canvas value from the view.
This extremely hard to explain without showing (as in "live-demonstrating"), but I'll give it a try:
Autolayout for Scrollviews works differently than you probably think. You can't simply specify where to place its contents in relation to its bounds like that. After all, the "canvas" of the scroll view determines its size from the content you scroll over, whereas the size of the actual scroll view (lets call it its viewport, or "window onto the canvas") is determined in a different way (for example by constraining it to the elements around it).
This the opposite of how autolayout works for other views, since they are usually constrained by the size of their parent (up to the top view of a view controller and/or the screen bounds).
What you want to do is add all your items in a single view. From the smallest known size, constrain them to one another. Finally their container has a size resulting from its contents, i.e. your items. This is then the size of the "canvas" of the scroll view, so add it and constrain its position somehow (for example centering it horizontally and vertically). Now, the actual size of the scroll view and its position should be constrained by elements surrounding it.
It might take some thinking and training, so maybe you will want to test around in a small training project that only has a limited number of views to figure it out.
Add scroll view on the screen with constraints to parent view
Add content inside of scroll view
Put constraints between added view and parent view (NOT SCROLL VIEW)

How to add elements to ScrollView if the designer is too small?

I have a ViewController which contains a ScrollView and I'm trying to make a form menu so I need multiple labels and text fields.
I've been using the designer to do that.
The ScrollView will allow the user to scroll vertically, I already have many elements in the View but I need to add more.
The problem is that the size of the parent ViewController have a fixed size in the designer and because of that I reached the situation where I need to add elements under a label but there is just no space in the designer where I can put it.
hmmm.. not sure how this will carry over to tamarin/visual-studio, but in Xcode Interface Builder you can set the View Controller Simulated Size to "Freeform" --- and then set it as tall as you wish. Well, it may have a limit, but I just tested it and made it as tall as 5,000 pts. After laying everything out, you can set it back to "normal" size. At runtime, it will size itself however you've set the constraints.
Other alternatives...
Design your elements in "containing" views, and then add them in either dynamically via code or by manually setting the positions in the designer.
Use a single, tall "containing" view in your Scroll View. Make that view, say, 1500 its tall. In the designer, add the first few elements, then set the Y position of that view to a negative number. If your Scroll View is 500 its tall, set the Y position of the containing view to -400. The view will "slide up" in the Scroll View, and you can continue adding elements.

Xcode - Adding constraints to UITableView so that it fits all screen sizes

I've read quite a few tutorials and watched numerous videos on using constraints in Xcode. For some reason, I'm still missing certain aspects that are necessary to make the user interface look the way it's supposed to for all screen sizes.
Currently, I have a UITableView laying on a view controller. The view controller is set to "Inferred" size and I have all of the different sized devices open in Assistant Editor Preview to the right so I can view the changes. I've encountered multiple problems attempting to get the constraints correct for the different screen sizes.
Problem 1: The UITableView has a width set to 600. This causes dead space to the right of the table view on the iPad preview and it causes the UITableView to extend too far on the smaller devices. If I make the width of the table view smaller so that it fits within the preview of all screen sizes and then pin the left and right edges of the table view to the edge of the Superview by specifying 0 and unchecking constrain to margins, the result I'm seeing in preview is that the entire table view disappears completely from each device size. I was surprised by this because I thought by pinning the table view to the margins, it would make the table view fit within each of the screens.
Problem 2: (This is a completely different scenario from Problem 1, above.) In this situation, I've left the size of the table view to 600 and just specified constraints for the internal components of the cell contained within the tableview. In this case, the table view is still slightly not wide enough for the iPad dimensions and it extends too far on the smaller devices which makes components in the cells to be truncated and off of center.
I've primarily been working in Storyboard with Any width, Any height set. However, if I change the setting to Compact width, Any height, I can alter the constraints to fit the smaller devices a little better, but there's still a problem with getting things to work between the 5.5 inch screen and the smaller devices.
I would like to get my UITableView to extend all the way to the edges on each device and I would like to have the view inside of the cell remain centered and keep it's relative size on each of the devices. Does anyone have any suggestions on how I can accomplish this?
if you want to make your tableview to "fill" the whole screen (device-independent) the only thing you have to do is to pin its 4 edges (top, left, bottom, right) to its superview (the viewcontrollers view in your case) with a constant of 0.
you do not specify a specific width (like in your case 600) or height.
good luck :)

Reposition images within view based on size of text - iOS

I have been recently getting into iOS development, and I'm trying to build something that looks (very roughly) like this: http://falkendev.com/downloads/ios-sample.png
Basically, it's a page that shows simple text -- large header text that may span multiple lines, a separator line, and then smaller descriptive text that may be a variable length. This text does not need to be editable. I'm working using interface builder, but I imagine that what I want done may need to be done programmatically?
Two questions:
-- How do I go about creating these text fields so that they adjust their height based on the content? I'm assuming I would be using a standard "text" field for each, make them not editable, and then programmatically change their height? And then based on the height of the various text fields, I would need to adjust the positioning of the text fields and the divider line between them?
-- How do I go about making the page scrollable? It's possible that the descriptive text will be long and would extend off the edge of the screen. I would want the whole page to be scrollable, not just the descriptive text section. I'm assuming I would place all my elements within a scroll view... but currently when I do that and view it, the view just gets centered (cutting off both the top and the bottom) and I can't scroll it at all.
Thanks for any help!
set the scrollview content size to greater than its actual size to
make it scrollable like this :
scrollView.contentSize = CGSizeMake(YourWidth ,YourHEight ); // Here you can change either of height and width to make it more scrollable in that direction.
You can use UITextView object to have a scrollable text field...
which can scroll to show additional text..just set its editing
property to NO.
Otherwise to dynamically update label height yourself...use
NSString sizeWithFont method

Resources