I have used storyboard with autolayout for my UI design. Basically in android there are three different properties will be there like Visible and Invisible and gone.
For Example:
1) Android
mTextView = (TextView) findViewById(R.id.textview);
mTextView.setVisibility(View.GONE);
2) Objective C
UIView *a = [self.view viewWithTag:2]
I want to process View.GONE...
for act as a gone in IOS i have searched from google but i can't able to find the Solution.
Shin,
Android does not make use of autolayouts to calculate the frame of view components and like CSS (Cascading style sheets) it uses relative values of view components with respect to parent, margin or other peer views to calculate the position of view.
But in iOS when u use auto layouts, you define the constraints which are mathematical expressions and iOS evaluates them to find the actual values for the frames of various components :)
Whats the Significance of it ?
Because auto layout constraints are maths expressions, you will have to provide iOS enough data to calculate the unknown values.
Lets consider,
As you can see the view with pink colour has a fixed horizontal spacing from the green view, so iOS calculates the x position of pink view from the maxX position of green view + horizontal spacing between green and pink view :)
Now assume you call view.GONE on green view and completely remove green view, now iOS will be baffled as it does not know what will be the x position of pink view, now it does not have enough data to calculate the x position of pink view :)
Does that mean I can never achieve View.GONE in iOS ?
You can!! only virtually though :P
HOW??
Two ways :
way 1
You can't remove a view because that will cause it to leave all other view depending on it for their frame calculation un handled. Hence consider setting width and height constraint's constants value of views to "0"
Add height and width constraints to the view which you want to hide and create a IBOutlet to height and width constraints.
Now when you want to hide simply say,
self.greenViewHeightConstraint.constant = 0
self.greenViewWidthConstraint.constant = 0
self.view.layoutIfNeeded()
Yeah!!! Now you have a view whose width and height 0, I mean view exists but does not exist!!
Way 2
But then, You dint remove it really using way 1 did you ??? Nope. You can actually remove the view using Way 2
What I want you to see here that, now I know that if I remove View1, view 2 could not calculate its x position, So I created a Leading constraint from View2 to Parent left margin and set its priority to High and set its constant to 0 :)
Now this constraint will not come into play, as long as required (1000) constraints are good enough to calculate the values, now assume you remove View 1, View 2's frame can't be calculated with Required constraints, hence high constraint kicks in and it says your pink view should be 0 pixel from parents left margin :)
Yeah :) You achieved what you wanted, now you actually removed green view and pink view still not lost its frame :)
How on earth did you remove green view ??
Wasn't that the question ?? Sorry, I got carried away :)
You can say self.greenView.removeFromSuperview()
On iOS, visible and gone are done with hidden = NO and hidden = YES
If you want it to be invisible, set the view alpha to 0.
edit: Making a view hidden doesn't make the layout hierarchy ignore it, unless it is in a stack view.
After some googling, I found this:
View.GONE - This view is invisible, and it doesn't take any space for layout purposes.
View.INVISIBLE - This view is invisible, but it still takes up space for layout purposes.
And its equivalent in ios is :
View.GONE - Uninstalling view. This can be done from storyboard as shown in the below image. You will have to uncheck the checkbox of Installed
View.INVISIBLE - View.hidden = true;
Related
I want to achieve this without adding height.
I tried using setHidden it works but leaves empty space.
is there any other way, after some googling i found that it is not possible?. i dont know may be .
There are multiple options to achieve this :
1) Use StackView with vertical orientation and add your views as arranged subviews in this stack view. Later you can remove the one you want and the height is adjusted automatically
2) Use constraints. Add a constraint from your 1st view to bottom with less priority initially. Later, when you call setHidden() on your second view, increase the priority of this constraint. In this way, the height will be adjusted.
You can try one the above approaches.
You can use view.alpha = 0 as an alternate to change its opacity to 0, which would "hide" the view from sight but the view will be loaded for all intents and purposes.
I have 3 elements in stackview.
-One is email - TextField,
-Other is password - Textfield;
-the last one is UIView and it has button in it.
When I run it, the button in that view doesnt respond, while the same view out of the stackview responds normally. ALSO when i put a button in that stackview, it acts but when it is in a view in stackview it doesnt.
I am missing something but what ?
thanks
Hey the problem is undefined constraints. Here I just created a simple solution to help you out. It is not perfect but it will helpful
When you are using stack view you need to keep few things in mind. There are two types of stackView horizontal and vertical stackView and stackView has some properties like
Axis - means you wan it horizontal or vertical
Alignment - It is simple you can understand when you see, fill leading centre and training
Distribution - In my thinking it is most important part of stack view
Fill will leave three of them their natural size, and make the fourth one take up the most space. It uses Auto Layout's content hugging priority to decide which one to stretch.
Fill Equally will make each subview the same size so they fill all the space available to the stack view.
Fill Proportionally uses the intrinsic content size of each subview to resize them by an equal amount. So view 1 was designed to have twice as much height as views 2, 3 and 4, that ratio will remain when they are resized – all the subviews get proportionally bigger or smaller.
Equal Spacing does not resize the subviews, and instead resizes the spacing between the subviews to fill the space.
Equal Centering is the most complicated, but for many people also the most aesthetically pleasing. It attempts to ensure the centers of each subview are equally spaced. This might mean that the right edge of view 1 is only 10 points from the left edge of view 2, while the right edge of view 2 is 50 points from the left edge of view 3, but what matters is that the centers of view 1, 2, 3 and 4 are all identically spaced.
Spacing - spacing is used to provide the space between objects like label, button etc.
I set the spacing between items 15 and distribution fill equally so they can fill the space available to the stack view.
here is the link to project https://github.com/waytorohit/SOreadytohelp so you can better understand.
References - https://www.hackingwithswift.com/read/31/2/uistackview-by-example
No need to give constraints
first delete view and button in your stack view and re-add then
create a viewController and of this viewController and connect it
#IBAction func clickMe(_ sender: UIButton) {
print("you click me")
}
and give some color of your button for checking and click on that
hope it's work fine.
No need for the extra view. If you delete this you can add a background colour to a normal button and change the background size and text size to make it appear the same.
If this isn't working you could go into your app design tool and make a coloured box and add this as an image into your button background.
After your button is set up you can add the #IBAction like any other normal button.
Hope it works, Toby
obs: sorry if it's confusing, I'm not too good at english
I've started programming in the early 2016, so my first language is Swift and I created new project just for training AutoLayout stuff.
I want the objects to fill the whole screen, so I did like this:
The buttons abc, 1-9, - and . measure 200x50. The reiniciar and calcular button (on the bottom) measure 300x50. The label delta is 600x120 and x1 & x2 are 600x60.
When I stack them individually, no problems. I got into this scene:
They're all stacked together and respecting the height x width
But I got in trouble when adding constraints to make them fill the hole screen. I set all the constraints margins to 0 (in order to stretch and fill) and I got this:
What am I doing wrong?
When you pin to the 4 edges of the superview, you will open the autolayout pin menu. When you open it, there is a checkbox beneath the 4 edges you can select.
Remove your constraints and add them again with that checkbox unchecked, it says something like: constrain to margins.
Also check whether your stack view has some edge insets in the settings pane when you have selected the stack view. Edge Insets are basically margins inside of your stack view, set them to 0.
Please comment if that didn't solve your problem.
I am developing an iPhone app in which, i have made this page using autolayout
but it shows unwanted spaces above Register Me(yellow button) in bigger iPhones
Constraints given are:
top,bottom, leading and trailing with respect to its subviews to all the controls. (there is no warning or misplaced constraints i see in xcode)
Here is the screenshot of iPhone 4s
Here is the screenshot of iPhone 6+
I want to minimize the empty spacing in bigger iPhones...
How do i solve this problem?
Please help and thanks in advance
Heres a suggestion for you. You have roughly seven regions of interest there. First one is the title 'Register Kano .. ' etc. Then there are 5 text entry areas - name, email, password, etc. Finally you have 3 small lines of info text - I would count this as one final area, so 7 in all.
What I would do is create 7 parent UIViews to put that stuff in. I would give them 'equal height' constraints, and make them sit above and below each other with no gap. Then as the iphone screen changes height, those areas stretch out height-wise to fill the area. Heres a rough mockup :
Select all those UIViews and select the 'equal heights' constraint :
Then every view except the bottom one needs these constraints (top, leading trailing to superview 0px)
Then your bottom view needs those plus 'bottom' too :
So all that remains to do is to put your content in each of those boxes, but centre them in terms of vertical position relative to their superview.
If your intent to target iOS 9 users, you should use UIStackView, the provide a lot of flexibility in terms of alignment and distribution.
If not, then you or your design team has to find a solution.
You can update the margin contraints of your controls on big devices.
This would add space between each rows on big screens, will looks better as you ask.
Something like :
myControl.heightConstraint.constant += 20.0f
This is how I would do, but you have to decide how you update your layout for big devices
#Krunal you can use the size class and set the constraints accordingly so it will give a brief idea how to fit the UI design for every device!!
you can set constraints relative to height of your base view. This will make your interface objects evenly distributed over layout. Lets assume you have 8 regions. for registerLabel
registerLabel.leading = baseView.leading
registerLabel.trailing = baseView.trailing
registerLabel.top = baseView.top
registerLabel.bottom = baseView.bottom * (1/8)// it will be always proportional to height of view
then for icons at the beginning firstIcon
firstIcon.leading = baseView.leading + 10
firstIcon.height = firstIcon.width
firstIcon.height = baseView.height*(1/9)// to give a gap between icons
firstIcon.bottom = baseView.bottom * (2/8)
and then you can set textfield's constraints according to firstIcon
for other icons you can go on with 3/8, 4/8, 5/8, 6/8 and set the relative textfields constraints according to that icon.
and lastly for registerMe button
registerButton.leading = baseView.leading
registerButton.trailing = baseView.trailing
registerButton.bottom = baseView.bottom
registerLabel.height = baseView.height * (1/8)
With this approach your icons size also decrease and increase relatively with height of view and all the page will be filled.
baseView is view of controller.
What is happening here, you kept the width according to superview ie phone width, but your height is fixed.
Do one thing instead of giving Height constraint, use aspect ration in combination with leading , trailing and top constraint. When view will stretch widthwise , your component's height will also Increase and fill the extra space for iphone 6.
This is the best thing you can do keeping the same layout and design pattern.
Seems you have given some fixed height in views.
As every element is depends on it above and below elements constraints, this might be possible of empty space.
So try to divide the View part then the dependency of constraints will reduce.
If you don't want to show empty space, then use center horizontally to one of the element which will look good, here it may be the third field.
Then start giving same constraints to Register button. Sure it will help you in resolving this issue.
Hey its the best solution for you is stackView
Combine your objects in single stackView.
You can combine your object vertically and also horizontally.
It will decrease your space and view will arranged in awesome manner.
You can select your objects like this.
Click here to make it stack.
Now you can reduce your space like this.
I have the most basic set up possible. See pic 1:
Believe it or not this is my first project using AutoLayout, I have created everything prior programatically. This basic set up is literally a UIWebView with 1 custom UIView positioned at the bottom. Previously I was using a tool bar that handled everything for me and had no issues with constraints whatsoever. However, the tool bar created discrepancies for event handling when adding a UILongPressGesture to the subview of the UIBarButtonItem so I decided to convert the tool bar to a UIView (Even inserting a UIView into a tool bar, it naturally converts to a button item) for easier handling. But run-time, the view gets pushed off screen by half of the UIView size (48px) See Pic 2. Then when I add buttons, it just gets worse:
I have reviewed the documents and the support HERE with no results. I've spent about 24 hours in total researching it and learned a lot, so my efforts aren't in vein. I KNOW by 'Adding Missing Constraints', the constraints are just recommendations based on the current set up, they aren't concrete in all cases, so I did try to create my own with control drag after reviewing the documents but my set up concluded with no different results, and exponentially more sloppy. So I decided to include the populated constraints by Xcode below :
UIWebView Constraints
Custom UIView (toolBar) Constraints
Any solid starting point recommendations? Does Intrinsic Size have anything to do with it?
EDIT : WORKING CONSTRAINTS I didn't realize you could simply omit a constraint. It seems the culprit was adding one to the top layout guide.
Just for answerer #Matt :
Constant 0 result : there are small gaps at edges
-16 for leading space/trailing space results as a true toolbar emulation in my case with no outstanding warnings or issues. Thanks
Let's talk about the view at the bottom of your interface and how you would use auto layout to position and size it the way a toolbar would be positioned and sized.
To use auto layout, you need to supply sufficient info to determine both position and size. This view is a subview of the view controller's main view. The main view will be resized depending on the screen, so we want to use auto layout to resize the subview ("toolbar") as well. This is what auto layout is for!
So constrain subview leading edge to the leading edge of the superview, and constrain subview trailing edge to the trailing edge of the superview, both with a constant of 0. Now the right and left edges match the superview!
That takes care of horizontal position and size.
Now let's talk about vertical position. The position should be the bottom. So constrain subview bottom edge to the bottom layout guide of the view controller, again with a constant of 0. Now the bottom of the view is at the bottom!
The only thing we don't know is the top of the subview. This, in our situation, is the same as knowing its height. So give the subview a height constraint, set its constant to a reasonable value like 40, and you're done.