I've been playing around with the Universal design in Xcode and actually quite like it.
While playing I can't seem to work out how to get equal spacing between certain items.
In the above image I would like to have the 3 x red bars equally spaced inside the light blue view.
The best I can do is set the middle red bar to be in the centre of the light blue view and then fix the distance between the other red bars.
Is there any other way to space them out?
For example when you have a UIToolbar you can just place all of the items in the toolbar and then use flexible spaces to equally distribute the items.
Hope this makes sense.
You could do something along the lines of: place the first bar in the center, and then have two clear UIViews filling the space on top and below the middle bar. And then the top and bottom bars could be centered on those clear UIViews (vertically centered in container).
You could also do something very similar to what you need to do with Toolbars. i.e. place 5 clear views between and outside of the three bars that you care about, and then set them to be equal height. This will force the three bars to be spaced evenly.
I think you should define a method, in which you check the light blue view height, and update the three red views' constraints, then call self.view's setNeedLayout and layoutIfNeeded.
then call the method in your controller's viewDidLayoutSubViews, and it should be call through the
performSelector: withObject: afterDelay: method, the delay can be 0.
hope this helps.
Related
well am trying to make this UI :
the above UI contains a ProgressView on UITableViewCell and the vertical line is a UIView (if i should use something else then a UIView for this vertical line then please do provide your suggestions ) well am stuck in moving this vertical line ? how can i place this line at the point where the bar is filled as shown in the image , if anybody knows then please let me it'll be so helpful for me
the pseudocode for what i need will be like
verticleLine.xAxisPostion = progressBar.progress.xAxis
Trying to think out of the box here: maybe you could use a UISlider instead with userInteractionEnabled set to false? With UISlider you can specify not only the track color, but also the thumb image (being a tiny plain grey vertical bar in your case).
To expand a little bit: you set the minimumTrackTintColor to green, the maximumTrackTintColor to red (or stretchable images for minimum/maximumTrackImage), minimumValue to 0, maximumValue to 1. Instead of progress you can now use value — and it should give you roughly the same behaviour with the thumb (grey bar) following the value.
the above UI contains a ProgressView
Don't use a UIProgressView. Just create your own self-drawing view that looks exactly the way you want it to. The view that you've designed — green to the left of the progress point, red to the right of the progress point, and a vertical line right at the progress point — is trivial to draw, and trivial to redraw when progress happens (i.e. when the value changes).
I've added a view to a tableView and there is a gap between the view which is 44px high and the first cell.
Here's a screen shot from IB:
I've tried a few things such as changing the heightForHeaderInSection's value and also disabled adjust scroll view insets. None of these work properly. The view seems to be within the tableView and scrolls with it.
This is how things are looking in simulator:
Would appreciate some help here as I don't understand what exactly is causing this gap.
Thanks for your time
A great way to debug these types of problems is to set a background color. You could set the cells to red and the view to green. It would then be interesting to see if the red and green edges are flush with no white in between.
Based on your screenshot, it looks like nothing is wrong. And by that I mean it looks about right for a view height of 44 points and a cell immediately beneath it with no separator line above it (so it's hard to tell where one ends and the other begins).
I have a UIView, defined in a nib, and I need to be able to show/hide a middle button in that view. When I show the button, I need to reposition the two bottom buttons below it, as well as make the view taller to make room for everything. When I hide the middle button, I need to move the two bottom buttons up and vertically resize the view to make it less tall. I do NOT need to animate any of this since it the changes will never occur while the view is visible to the user.
I'm new to iOS and I'm used to using Autolayout, but I can't use Autolayout in this case to handle this automatically, so my current approach is to hardcode the frame position and dimensions for the two bottom buttons for each of the two different situations. I'm also hardcoding the two different frame sizes for the view itself. In viewDidLoad, I determine if I need to show/hide the middle button and set the frames for the view and bottom buttons appropriately. This works, but if feels hacky. Is there a better way I should be doing this?
Thanks in advance for your wisdom!
You don't need to hardcode your frame sizes in viewDidLoad. The only thing you should take care of is determining that whether you need to show you middle button or not. Within the implementation file where you are allocating your UIButtons, check if the middle button has to be shown, if Yes allocate it, if not then don't. The frames of two buttons and the view should contain a factor which can set/size them accordingly.
You'd basically be managing the Auto-layout programmatically. And if you're not even allowed to that then whatever else you'd end up doing would pretty much be a hack.
I'm creating a view controller that uses a web view which slides behind the navigation bar and status bar. To do this, I'm setting the webView.scrollView.contentInset property to have a top inset of 64.
However, this doesn't shrink the amount of area the web view wants to take up, so if a page is less than a screenful, it has 64 px of white space at the bottom to scroll through. The web views are in a vertical UIPageViewController, so this disrupts paging. Is there some way to get rid of this extra space?
Have you tried something like adjusting the webview's scrollview content insets? Example:
webView.scrollView.contentInset = UIEdgeInsetsMake(0, 0,64, 0)
It sounds like what you need is to adjust the webView.scrollView.contentSize and adjust the height by 64. You may need to provide more information about how it slides behind the nav bar and status bar to help me answer this. I would take a look at this section of the Scroll View Programming Guide:
http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/UIScrollView_pg/CreatingBasicScrollViews/CreatingBasicScrollViews.html
Change the clipsToBounds.
webView.clipsToBounds = NO;
This will make its content visible outside its frame, so set its frame like normal, right under the navigation bar. The navigation bar will be translucent and you will see its content under it.
Don't forget to disable Autolayout for the web view!
I've sort of made an end-run around this problem by disabling scrolling on short pages. Basically, I use -stringByEvaluatingJavaScriptFromString: to run some JavaScript inside the page that walks down from document.body and computes the position of the bottom of the bottommost element. (document.body itself is always at least as large as the viewport, so I can't look at its size.) Then, back in Objective-C-land, I compare that to the height of the web view (less the inset), and if it's less, I disable scrolling. This is not a perfect solution, but it covers the worst symptoms.
If someone can come up with a better solution than this, I'd love to hear about it! Either way, I can't award the bounty to myself, so someone will be getting it.
I have a UIScrollView over an image at the bottom of my app that acts as a dock with icons that can be scrolled through horizontally. Instead of the harsh edges of the UIScrollView, I would like the icons to fade out for a more aesthetically pleasing look. Being new to iOS development, I don't know if either of these would be valid options:
Create a faded image to use as an overlay on the scrollview so the
icons only appear through the visible portion.
Actually change the
alpha of the images based on their distance from the center (or from
each edge).
I suspect the first idea would be the most simple, but I'd like to throw this out there for any other ideas.
Note: I did see this tutorial, however that technique assumes that the background is a solid color. If I were to do it programatically, I would probably need to fade the individual images.
You can definitely implement something along the lines of #2. It'd be something similar to what the tutorial describes. The alpha transition however won't be as smooth as using the gradient layer mentioned in the tutorial or using an image since the entire icon would have the same alpha. How much discernible the difference is depends on the size of your icons. Smaller icons, very few will be able to tell the difference. Larger icons the difference would be quite clear.
You'd have to implement the
(void)scrollViewDidScroll:(UIScrollView *)scrollView
method in your scroll view's delegate class. This method will get called every time the scroll view changes the location of its content. In this method you can call its subviews and adjust their alphas as required. To optimize it a bit instead of calling the alpha adjustments on all the elements you can just update the subviews which are still partially/completely visible.
EDIT: to figure out which views to adjust you'll use the contentOffset property of the scrollView that gets passed as a parameter in the above method.