Autolayout in tabs - swift

Tab Bar
I want Chat image in between that menu and people image and fire image in between menu and notification image using autolayout.
I have applied leading, center vertical, fix width and fix height o Chat image
For fire image I have given trailing and remaining same as chat image.
Note: This is not tab bar this is custom view.
Above problem solved but now in iPhoneX am getting
that bottom bar is hidden
How can i come out from this issue?

Create a container with leading and trailing - 0 - to surrounding images(people and menu), and center horizontally the image (chat) inside this container.
or:
chat.center = CGPoint(menu.frame.minX - people.frame.maxX)

If you are creating view programatically then make sure buttons in view have aspect ratio with screen width.
Why don't you use Horizontal Stack View.
See below image

Related

UIBarButtonItem Custom Image is Stretched (Xcode)

I'm creating a side menu in Xcode, and to open it I'm using a navigation view controller like the following:
I need the left bar button item to be on the left.
I added a left bar button item. Without changing it to a custom image, it is aligned to the left, as desired. When I change it to the custom image (the three lines) it stretches and aligns itself in the center. I have not written any code for this view controller yet, so none exists for the bar button item.
How can I get this aligned to the left as it should be? (Above the "Home" text).
Thanks for any help.
This is because your menu icon size is bigger.I have added two images one is with 64*64 px size which is perfect and in another icon with 512*512 px size
Hope it will help.Thank you.
You can’t use any image size for UIKit tab bar or navigation items.
Please read this guideline from Apple:
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/

Swift - How to make a StackView 100% width

Im trying to create a profile screen for an App. The only element that i cant get the width set dynamically is a 3 x 1 button grid in a stackview.
You can see in the second screenshot how it resizes rather than dynamically resize like every other element
This is my approach. I made stack view which trailing and leading constraints are 0 and image height is set to 30 with aspect ratio 1:1 (this can be customized). Each image has its own View where its centered and then stack view aligment is set to center and distribution to fill equally. This can be used for buttons too.

alignment issues when using stack views

I have a label in the top left corner that say "Categories", a back button in the bottom left corner.
In the center of of the view is a stack view containing four other stack views. All of them with 3 buttons.
Each time I run it in a simulator the category label in the top left disappears.
I've attached several photos to show current constraints and what my layout should look like and what shows in the simulator.
Thanks
View in interface builder
Constraints view
So it appears it was the image I was using as the "background picture" of each button that was causing my layout issue. I removed it and everything fits now. Thanks

why is there a margin introduced at the top as I move from iPhone startup image to same image as background on UIView?

why is there a margin introduced as I move from iPhone startup image to same image as background on UIView?
So I have:
image used for background/startup on iPhone, it's size is: 320 x 480
after startup I have a UIView that displays the same image (idea is not to have any difference the user can see when transisiton from start up image to the UIView background image)
the first view is "inside" a UINavigationController, however I set the MenuBar and Toolbar to hidden
There is however blank grey margin introduced at the top of the screen, between the signal strength bar and the top of the background image? The height of this grey margin I wasn't expecting looks to be about the height of the top signal strength bar. So this margin/bar effectively drops the background image downwards...
How can I remove this?
Before (i.e. iPhone startup image):
After (background image of first view):
Your launch image contains an imitation of the status bar. The launch image takes up the whole 320x480, but the background image is placed at the top of the main view which is below the status bar. So you can see the imitation status bar still.
Just decrease the y of the background image view to -20.
found two things required to fix it:
setting the View Mode to "bottom" and
found the imageview was slightly off positioned within the XIB designer itself

iPhone App Phone Call Situation

When a phone call occurs, my app moves down, and the bottom of the app is cut off slightly. Is there anyway to shrink or resize that whole view when a call occurs.
Preferably through interface builder.
Indeed, your application window does shrink its subview. For example, if you have a status bar so the frame of your root view is (0,20,320,460), then if the in-call status bar is on, then the frame becomes (0,40,320,440).
Then why does the bottom of your app seem to be cut off? It's simply because the root view autoresizes its content in that way. For example, its autoresizingMask property says it has a fixed top margin and a fixed content height. So,
If you want to 'squeeze' the view, try fixing both top and bottom margins and having flexible content heights.
If you want the in-call status bar to look as if it goes over your app, fix the content heights and the bottom margin, and have a flexible top margin.
If you have a fixed top margin and a fixed content height, then your app will seem to slide down.