I'm trying to use a UISegmentedControl as a custom right button bar item. Using Interface Builder, when I drag the control into the navigation bar, it gets sized to be quite wide (too wide, considering the segment contents):
I've tried setting the widths of the segments to something that I think looks good and the overall control resizes, but it is pinned to the left side of the original space it was allocated. I can't seem to find a way of moving it from there. Here's a picture of what this looks like in IB in landscape:
and here's what it looks like running on an iPhone 7 Plus simulator in portrait mode:
As you can see, the segmented control is positioned way too far toward the center.
I tried a hack (suggested in this thread) of embedding the segmented control inside another view, leaving the containing view to be full width of the bar button item and constraining the segmented view to be on the right of it's container. That gets it over to the right, but here's the effect of running that on an iPhone 7 simulator (somewhat narrower than the 7 Plus):
Here the problem is that the title, which is supposed to be centered, has been pushed off to the left. I assume that this is because the (transparent) bar button item is taking up so much more width than what is needed just for the segmented control.
Is there some way of getting the right button area of the navigation bar to simply be smaller?
My steps are below:
1.Drag the segment control to navigationbar:
2.Change the segment width:
3.iPhone7 & iPhone 7Plus all looks good:
Related
I've created 4 subviews of white color & a yellow one as you can see in reference image I've shared below.
And I've programmatically changed the position of Tabbar from bottom to top just below to navigation bar as you can see in below image (When it is running in the simulator).
Now since I've constraints for that yellow view in image as follow
It is appearing just below to navigation bar but I want it to be displayed just below the Tabbar.
Since Tabbar is getting its position programmatically & other views (including yellow view) are getting their positions from the storyboard.
And since storyboard UIelements are get settled before any other UIelement which are coming from the program or at least get their position from programmatically.
What could be the best way to achieve what I want.
Please refer my storyboard as well to get more understanding. (Refer Below image)
I also want to fit all 5 subviews in the space between tabbar & bottom of the screen. I want to calculate 1/5th of that space & assign this height to each subview. I'd later reduce few pixels to separate them.
Why not add the height of the tab bar to the yellow view's top position? That way, you'd set the constraint something like:
Fajar.top = top + 44
If the tab bar is always visible, then that should work. But of course, if the tab bar only appears at times, you'd probably have to change that constraint programmatically depending on the change ...
I have a problem with a "double" navigation bar in a screen of my iPhone app.
Starting position:
Xcode 8, Swift
I have a TableView with static lines that is embedded in a navigation controller. From the first cell I then call a screen (Segue Show Detail), which is very complex (labels, text boxes, buttons, etc.). When I execute the "Reset to suggested constraints" function on the screen, the screen is supplied with "generated" constraints. This is still clear. When I run my app in the simulator (iPhone 6) or my own iPhone 6, I see on the above screen a status bar, then my right navigation bar (Back button, title) and below an "empty" 2.Navigation bar. This decreases the screen down and is no longer fully visible. If I delete the constraints for the screen with the "Clear Constraints" function, the screen in the simulator (i6) looks good as I develop in the storyboard for the iPhone 7. But when I connect my own iPhone 6 and test, the screen does not fit completely to my iPhone, because right and down is something truncated.
I suspect the error in the "generated" constraints.
Now my question:
How can I check the generated Contraints (well over 100) for errors?
In the Internet and the forum I found nothing, which could help me.
Workaround for me:
The top UI element on the screen is a label across the entire width of the screen. For this label, I set a constraint manually, in addition to the generated constraints
Label.top = Top Layout Guide.bottom + 44,
whose value I then change to the value
Label.top = Top Layout Guide.bottom
This causes the label to slide directly below the status bar in the storyboard. The navigation bar is then no longer visible in the storyboard. This makes the placement of UI-Elements at the bottom of the screen somewhat more difficult because you do not know exactly which space is still available.
The display in the simulator (i6) and on my iPhone 6 looks however through the workaround ok.
For your help I would be very grateful.
Greeting Reinhard
I am learning iphone app development and I am using swift. I took the lynda tutorial and I have created a very basic UI which is View Controller > View .
In the View I added a segmented control, two buttons(horizontal, facing each other), three labels, one textarea and two other buttons(horizontal, facing each other).
So I have these UIcomponents arranged vertically and I used 'Reset to suggested constraints' and made all the buttons equal width and equal height and everything is fine in potrait mode but as soon as I go to landscape mode the last two buttons disappear, if I add a constraint from bottom edges the whole UI gets messed up i.e. only one label and part of an upper button appears.
What should I do to make all the UI components visible both in potrait and landscape mode?
There are many ways to go about this. I've set up a github project to show you one way to achieve it.
Short resume of what I did manually without the help of the Interface Builder:
I've pinned the segmented control to the left, top and right of the parent view
The red button below has a vertical constraint to the segmented control and a leading constraint to the parent view. It also als a horizontal space constraint to the green button
The green button has a trailing constraint to the parent view, top aligned to the red button and widths set to equal to the red button.
This setup ensures, that the segmented control is responsible for specifying the distance to the top of the parent view and the red button specifies the width of itself and the green button (test it, by changing the value of the horizontal space constraint)
I've turned the same principle upside down. So the views in the bottom are always pinned to the bottom. But as I said, there are many ways to achieve this. You could also create 3 container views for the elements in the top, center and bottom and pin those to the top, center and bottom.
The running app looks like this:
If you would like to display your content differently in landscape mode, it is possible (and most likely preferable) to create an alternate landscape interface.
Quoting the Apple developer's page on the subject:
"To support an alternate landscape interface, you must do the following:
Implement two view controller objects. One to present a portrait-only
interface, and the other to present a landscape-only interface.
Register for the UIDeviceOrientationDidChangeNotification notification.
In your handler method, present or dismiss the alternate view controller based on the current device orientation."
For more information about this, check out this apple developer page and scroll down to "creating an alternate landscape interface".
https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/RespondingtoDeviceOrientationChanges/RespondingtoDeviceOrientationChanges.html
I have a UIToolBar at the top of one of my views and the shadowing shows up on the bottom of the tool bar as I'd expect. I know UIToolbarPosition is internally set to UIToolbarPositionTop.
When I rotate my device (iPad), the tool bar grows (using auto sizing in IB) and the UIToolbarPosition changes to UIToolbarPositionBottom which flips the shadow to be at the top of the bar. If I don't have the bar resize, it remains correct, but of course doesn't stretch to match screen width.
So, what gives? What would cause the UIToolbarPosition to flip on me? This is sitting at 0,0 the whole time and only changes width based on rotation.
Extra: I've considered work arounds like using a UINavigationBar. UIAppearance is probably a no go because I do have a toolbar at the bottom too and I do want my "top" different than my "bottom"
I eventually solved this using the UIBarPositioning protocol on UIToolBarand setting the barPosition = UIBarPositionTop
I have a requirement for a very simple Button Bar.
It should take up the width of the screen.
It should allow at least 3
buttons.
The buttons should be of equal width and together take up
the whole width of the bar.
Each button should be tappable, but not
have a selected state.
The bar will be overlaid on a MapView and positioned directly above a TabBar.
Tapping a button will launch a Modal ViewController.
I thought about using a UITabBar and not allowing its tabs to become selected, but the HIG is pretty clear that this is not correct usage and UIToolBar doesn't allow the button widths to be set.
This seems like a very simple requirement but I can't see an obvious solution. Is there something I'm missing? Can anyone suggest a solution?
What's wrong with just creating a simple view that draws an appropriate gradient, and then adding three buttons of the appropriate size?
If you're feeling ambitious, or if this is something that you're likely to use more than once, you could even have the view create the three buttons. Call it ThreeButtonBar or something. Give it a constant height and adjust the width to match that of its superview so that you can use it in portrait or landscape orientation.