In highschool we're learning how to build User Interfaces with Xcode.
As homework we have to pick an existing App and rebuild it only using default controls and the Main.storyboard (no code and custom classes allowed).
I picked Twitter's UI:
As you can see there is a TabBarController on top with three TabBar Items (TOP, MENTIONS, VERIFIED).
According to other threads you can't change the position of a UITabBarController without using Custom Classes or some other code.
What would be an easy work around? I was thinking of using normal buttons instead of UITabBarItems but then I would have to implement code for buttons to react on user interaction.
Twitter is a tricky UI because they do a lot of custom things in it. However, a couple of comments here:
1) The buttons you reference (TOP, MENTIONS, VERIFIED) is not a TabBarController. The bottom bar with the 3 icons (ENGAGE, UNDERSTAND, POSTS) is a TabBarController and that wouldn't be too hard to create.
2) The buttons (TOP, MENTIONS, VERIFIED) could be created using a UISegmentControl. However, they have customized the look of it. By default, it will look something like this:
Apple Docs for SegmentControl
Here is a stackoverflow discussion on changing the look of it:
How to display only bottom border for selected item in UISegmentedControl?
3) The other items on that view could be created using a UITableView but those are custom cells that you'd have to build which sounds like would violate the rules of your assignment.
There are lots of examples out there on how to create and use custom uitableview cells such as this one:
Making Apple Pie
Hope this helps you!!!
Update#2:
As you can't use code, creating a tableview is out. You could just drop some controls in the storyboard to minic those tableview cells. For excample, drop UIImageViews (with pictures), UILabels (with text), the icons for reply, retweet, favorite would be UIImageViews as well. The gray lines can be created by dropping a UIView with a height of 1 and background color of grey.
The 3 UITabBarItem (Engage, Understand, Posts) are on the very bottom.
On the top are just 3 regular buttons in a view.
So what you thought will definitely work, use just normal buttons inside a SuperView, you do not need code for this, just use following constraints:
SuperView (Top, Leading, Trailing, Height(40-50) constraints)
Button-1 (Leading to superview, Width to superview (multiplier 0.33))
Button-3 (Trailing to superview, Width to superview (multiplier 0.33))
Button-2 (Leading to button-1, trailing to button-3)
2 constraints for all 3 buttons:
Top to superview
Bottom to superview
Related
Assume the following, simple layout:
Three views vertically stacked upon each other
Using simple vertical spacings between the views
Is it possible to hide the red view including its margins using constraints / AutoLayout only?
Settings redView.isHidden = true will hide the red view but will not change the position of the blue view. The blue view will stay at the same position as if the red view would be visible.
Using redView.removeFromSuperview() to completely remove the red view would show the desired result. Due to its optional spacing constraint to the gree view the blue view would move to where red view was. However it would be quite hard to re-show the red view because all its constraints would have to be set up from scratch.
In Android setting the visibility to View.INVISIBLE simply hides a view (as the first case described here) while View.GONE renders the remaining layout as if the view was not there at all.
Can this be done with iOS using constraints / AutoLayout only?
Of course I can achieve the same buy manually manipulating the constraints and setting up new constraints in code. But the question is, if there is a more convenient solution as in Android?
A VerticalStackView seems to fit your requirements. You can include all the views in the stack view and set the spacing directly on it.
Then, is one of the views is hidden, the stack view will automatically adjust all the constraints.
Take a look at the pictures:
If possible, wrap your views in a vertical UIStackView. You can then individual views and the other views will be rearranged as intended. You also don't need to add constraints between items, since the stackview handles the spacing between views.
The simplest way is to embed the views into a StackView and when one of them is hidden, the one below will move up into its place.
Follow these steps:
Add all the views you need in the storyboard/xib
Editor - Embed in stackView
Set the spacing in the stackView
Set the stackView constraints
Create outlets for the views you want to be hidden in a certain case
Set that views hidden property to true
Regarding the constraints, you can set them for the StackView and for the vertical one, just set the equal spacing and the space properties in the StackView.
Result:
I'm trying to make a row of buttons on the bottom of the screen and the buttons are images. I was having aspect ratio issues so a few sites recommended making image views and simply put transparent buttons on top of them. I've placed six image views in a stack view and constrained it to the bottom. I thought it would make sense to put six buttons in another stack view and then also constrain it to the bottom, but it always constrains to the nearest neighbor so now the images are actually on the bottom of the screen, but the transparent buttons are vertically sitting above them. Is it possible to have both constrained to the bottom of the screen so that they completely overlap? Thanks!
It is very much possible, from what you have written I assume that your second stackView is pinned to the top of First stackView. Change that constraint to bottom of your superView. This would be enough for your requirement.
Also Instead of using two different stackViews, I would recommend doing this in one single StackView, which will 6 UIViews inside and each UIView will have UIImageView and UIButton inside.
(Thanks, Sujith Chandran and Neil Hiddink for pointing the way!!)
Here is my solution: After selecting the bottom constraint for the stack view that contained the transparent button overlay, I went to the size inspector and changed the "Second Item" to superview, opened second item again and selected bottom, and then set Constant to 0. Eventually I had to change the value of constant to -70 to get the desired position because I previously set the button images to a height of 70.
I am trying to accomplish what the Imgur app has done in one of their UICollectionViewCells in their about view. See below:
I want 1 UICollectionViewCell but instead of 3 sections of views inside the cell, I just want two (comments and posts).
For my UICollectionView I am resizing the cell at runtime to make it fit almost the whole screen minus a bit for margin's sake because I want to make a card view like Imgur.
I followed this stackoverflow post to get 2 views side by side: iOS Autolayout: two buttons of equal width, side by side
and I am able to get 2 views side by side of equal width. Here's what they look like in the storyboard:
but when I run the app, my views get stretched because of the autoresizing. See below:
How can I get the views to both be of equal width and have equal spacing between, before and after the views?
You can use UIStackView. It provides an easy way to lay out a series of views horizontally or vertically.
Select the two views and click on the new Stack button in the Auto Layout toolbar at the bottom right of the storyboard canvas:
Give constraints to your stack view from top, left, right and bottom. Then make your Attributes Inspector of the stack view like this:
NB. If you want to learn more about Stack View, follow this fantastic tutorial in Ray Wenderlich: https://www.raywenderlich.com/114552/uistackview-tutorial-introducing-stack-views
Believe me most of the complexities associated with Autolayout will become trivial once you learned Stack View
I want to achieve consistent views across different screens. My layout constraints works on small screens perfectly but it scrambles on large screens.
I have made a view(Red Border indicating that view)and pin it in to the main super view. Then I have made sub views and put it inside that view. I have pinned the the top bottom trailing and leading edge of the layout which contains button of the it's parent view (Red Border indicating that view). The view containing button is looking like this in small screen (iPhone 5)
while it's looking in big screens like this (iPhone 6 and above)
I want this layout to have the same relative height in all the screens like the other views. How can I achieve this?
I guess you can use UIView that contains a button inside and set bottom,lead,trailing,top constraints for the UIView. Then you can set height constraint of that UIView and set multiplier values to have relative height to its superView(=Red box). Finally, you can set constraints for your button inside the UIView whatever you want. If you know how to use StackView, I recommend you to use it because it is easy and simple solution. Here is very good tutorial about StackView.
If height is constant for subview except that button view the layout will be like what you mentioned in the first image .If you kept height as constant for that button view the problem will be solved
I'm setting constraints in IB like
But when i run the app on iPhone4 it shows
Why last three buttons not shown properly on iPhone4 screen?is there any mistake in my constraints ?
Edit:- This is my view hierarchy:-
UITabbarControlle -> UINavigationController -> UIViewController and tab bar controller is rootviewcontroller.
Edit:- FYI there is no effect of any constraints on the screen(basically autolayout not working for me).
You have designed the buttons on 4 inch and you don't have enough space on 3.5 for all of them.
One way to do this is to place scroll view over your view controller's view and add the buttons on the scroll view.You have to add constraint on the scroll view , to be fixed on each side (without width/height).
After that grab all the buttons and add constrains on each side and sizes , so they will be fixed
If you , on other hand, have enough space for all the buttons to fit in 3.5' without any top/bottom margins you can add the button in UIView (instead of scroll view). Place the buttons in the view and set fixed width/height on that view.Center the view and it will keep his size (with the buttons inside on both screen sizes)
There is an issue in your constraints, you have to update them.
You can do as is shown on the image bellow:
Once done, you will see, the Orange lines under your buttons turned to blue.
I wish that helps you!
Your view is probably within a UIScrollView which will extend your total contentheight. It is not related to the absolute height of your viewport.
However, what do you expect? Your 3 buttons would overlay to the next buttons, if your theoretical approach would work.
What you need to to do is to wire all buttons to each other and give the view a top and bottom constraint to the top and bottom layout. You probably need to adjust your view to be on full screen and not to extend to the bottom.
Hint: as long as something is 'yellow' you need to add further constraints.