I am working with an app for macOS. So I want to set six Buttons in top of view using the complete width of view. When I resize the view the buttons should resize at the same time, so the width of the buttons should raise as the view is raising in same relation
How can I do that. Is it possible using the autolayout? Or do I need to change the position (x, y) and size programmatically? But how can I change the position?
Thank you for your help
Best regards
Programmatically, position and the size can be set by adjusting the .frame property of the NSView object.
https://developer.apple.com/documentation/appkit/nsview/1483713-frame
Also, it could be archived with Auto Layout by setting the left and right constrains of each element (and not specifying a width constrain) so the distance between each element, and the distance from the left-most element to the view.minX and right-most element to view.maxX are fixed (while the width is calculated dynamically). Additionally, add a height constrain so the heights remain the same.
Please follow up if you need more information ;)
Related
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.
I'm fairly new to Xcode and Swift. I dragged a horizontal NSSlider from Xcode's Object Library onto the View Controller of my Storyboard. Now I realize that I probably would have been better using a vertical slider. Is it possible to change my current slider into an actual vertical slider easily, keeping the max and min values, connections to my ViewController.swift file, etc. without having to reconfigure them?
I don't want to programmatically change it; I want it to be a static vertical slider.
I realize that in the documentation there is an isVertical variable to make it vertical, but that's not what I'm looking for. I want to it be vertical on my Storyboard, and be able to move it around – I don't want it to become vertical when viewDidLoad(). Actually I tried that out of curiosity and it didn't do a great job changing my horizontal slider into a vertical one.
Interface Builder derives the horizontal/verticalness of the slider based on whether it's wider or taller. So you can change this by editing the frame size of the slider to have a larger height than width.
One way do this is to view the storyboard document source (right click the file, Open As ▸ Source Code) and flip the width and height of the slider, e.g.:
When you open the document back as an Interface Builder Document, the slider will appear and act as a horizontal slider.
You can just drag a Vertical Slider in storyboard and remove the Horizontal Slider
I have an almost complete app. I want to use auto layout but even though I have searched a lot about this subject I could not find an answer that I could use. I can get it to show correctly on one screen size but not on another... Here is my question
How do I put the necessary constraints so that even if the counter is scaled for the different sized devices,the label and the button are at the same place on the image? (the image is a png image)
I would really be glad if you can answer or direct me to an answer that shows how to do a similar thing.
This is what I want
And this is what happens if I try doing it with auto layout and on a different screen size.
This is not the same image that I am using in my app but it will give you an idea.)
Thanks again
Edit:
Thanks for the answers but as pointed out in the comments, 1st answer does not provide a way to scale the image for different screen sizes.
Second answer provides a way but I could not understand the 2nd part of the answer.I need a little bit more detail. I would be glad if there is anyone out there who can help me on this issue.
I am still struggling with this issue. If I follow the 2nd answer Xcode says I need X position,width for the first filler view and Y position,height for the 2nd filler view.I am stuck at this point. I am not sure what value to give to these views.
You have to add constraints with respect to the image view. I have created a small project with your image. This should help you get started.
https://1drv.ms/u/s!Aq8sK_MQLIL9gxMl-lBOMHkToudU
Because the image size will change on different screen sizes, you can't set constant constraints. What you need is proportional constraints.
Set your UILabel and UIButton to have the width and height proportional to the UIImageView width and height respectively.
To do that: Click on your UILabel
and Ctrl Drag it over the UIImageView, selecting Equal Widths and Equal Heights.
Let's say your UILabel has a width of 100px and your UIImageView has a width of 500px. Edit the constraints that you have just set, and set the multiplier to be 100:500
This will make sure that any modifications on the UIImageView width, will affect the UILabel width accordingly. Do the same for height constraint.
Repeat same steps for UIButton.
The top/bottom/trailing/leading constraint cannot be set proportional to the UIImageView size unfortunately, but you can have filler views - transparent views that can mimic the layout constraints.
You will need two filler views: one for top constraint:
(set its height to be proportional to the UIImageView height)
and one for leading constraint
(set its width to be proportional to the UIImageView width)
I can make a small video for you if this is not clear enough.
I'd like to resize my app components when device is turned into left or right side - when it keep horizontal position
I'm checking device rotation in willRotateToInterfaceOrientation event and then I have to change width of searchBar and tableView. How should I do it? I tried some variants with components .frame and with CGRect, nothing works.
Update:
it can be done without any code. View my answer below
If you laid out your elements in Interface Builder then you can just add an outlet to the width constraint of your search bar. Then, change the constraint's constant property to change the bar's width.
I found the way to do I need
So, the task is that components will be resized in width when device turns horizontally.
1) Select items must be resized
2) Select "Leading Space to SuperView"
3) Without unselection, select "Add missing Constraints"
That's it. Now they will be resized correctly
For example, on a UIView, from left to right there are three buttons:,button1,button2,button3.
When button 1 become wider, such as its width become twice as its original width, is there any interface builder way that can make button2&3 move right automatically?
sorry for I didn't make my question clear.
I mean such kind of size change: I push button1, then I change it's frame in my code, not caused by the change of text in butotn1. I want button2&3 to move right automatically, keeping the width of the gap between button 1 and 2 unchanged.
Thanks everyone.
IB can be used only for initional positioning of views.
True, you can also define autoresizing masks of the views but that's about it.
Any additional laying out should be done in code.
I could be wrong, but I don't know of any way you can do this in IB. It's pretty straight forward in code though, just link the buttons to some IBOutlets and check the sizes of the images of the buttons (myUIImage.size), then adjust the frames of the buttons (do it in viewWillAppear).
Seen your edit - if you're adjusting its size using code, adjust its position too.
If your buttons are in a row at the bottom of the screen, consider using a UIToolBar. Its UIBarButtonItem objects automatically adjust to fit each other's width changes. For more generic cases, you'll need to recalculate positions and sizes as in Franklyn Weber's answer.
Yes - by using autoresizing masks. If you allow the margins to be flexible (no red lines connecting the frame to the superview's frame) and allow flexible width and height, the buttons will size and move proportionally.