iOS: AutoLayout a dynamic number of items - ios

I'm trying to recreate the view shown below. The difficulty for me is that some of these elements will have a different number of instances.
First item is a UILabel with variabel multi lines. There will always be axactly one of this item.
UIImageView. This there can be zero or one item of.
UIButton zero or more (at least up to 3-4).
How to achieve this?
What would be a best practice to achieve this? I had one idea to use UITableView and just put each element in a table view cell. But it feels like a bit hacky solution. Especially since I then have to remove the default styling of the table (borders and padding).
Another solution is to maybe use a UICollectionView with only one column.
Third solution is to build on the autolayout solution I have, and achieve it with a lot of if statements and for-loops. This seems like a bad solution.
So how would I achieve this (using best practices)? And is it generally a bad idea for instance to use UITableView for pure layout purposes?

Create a UIStackView and inside it another one for every item with zero or more instances
Add when you want to append say a button to the buttons stackView use this
btnsStackView.addArrangedSubview(btn)
same for UILabels and UIImageViews
Check this it may help
for i in 0...5
{
let headerView:UIView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.size.width, height: self.view.bounds.size.height))
if(i % 2 == 0)
{
headerView.backgroundColor = UIColor.blue
}
else
{
headerView.backgroundColor = UIColor.yellow
}
self.stttq.addArrangedSubview(headerView)
}
let headerView:UIView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.size.width, height: self.view.bounds.size.height))
headerView.backgroundColor = UIColor.black
self.stttq.insertArrangedSubview(headerView , at:0)

Related

Is it possible to set the alignment of segmented Control titles to the left?

I have been looking around for a way to set the alignment of the segmented control titles to the left but I don't seem to be able to achieve what I want.
I have created this little function to change the frame of the subviews of the segment control.
It works at first.
func modifyFrameOfSegment() {
for segment in segmentedControl.subviews {
guard segment.subviews.isNotEmpty else { return }
segment.contentMode = .left
for label in segment.subviews where label is UILabel {
label.frame = CGRect(x: 0, y: label.frame.origin.y, width: label.frame.size.width, height: label.frame.size.height)
(label as! UILabel).textAlignment = .left
}
}
}
But everytime I select a new segment it resets the frames of all the subviews and center align all the titles again.
Is there a way to achieve a permanent left alignment for the segment titles in a segmented control?
Any tips or advice would be greatly appreciated.
Thank you for your time.
Let's use this method
self.segmentedControl.setContentPositionAdjustment(UIOffset(horizontal: -20, vertical: 0), forSegmentType: .left, barMetrics: .default)
And you can do what you want (Of course, you can change the horizontal & vertical value by your needs). Here is the result:
Update:
There's apparently no way to set the alignment of the items, but you can fake it by adjusting the position of each individual item using setContentOffset(_ offset: CGSize, forSegmentAt segment: Int). Here's a kludgy example:
class LeftSegmentedControl: UISegmentedControl {
var margin : CGFloat = 10
override func layoutSubviews() {
super.layoutSubviews()
leftJustifyItems()
}
func leftJustifyItems() {
let fontAttributes = titleTextAttributes(for: .normal)
let segments = numberOfSegments - 1
let controlWidth = frame.size.width
let segmentWidth = controlWidth / CGFloat(numberOfSegments)
for segment in 0...segments {
let title = titleForSegment(at: segment)
setWidth(segmentWidth, forSegmentAt: segment)
if let t = title {
let titleSize = t.size(withAttributes: fontAttributes)
let offset = (segmentWidth - titleSize.width) / 2 - margin
self.setContentOffset(CGSize(width: -offset, height: 0), forSegmentAt: segment)
}
}
}
}
Here's what it looks like:
There are a few caveats:
This version sets the segments to all have equal width, which might not be what you want.
I used a fixed left margin of 10px because it seems unlikely that you'd want to vary that, but you can obviously change it or make it a settable property.
Just because you can do this doesn't mean you should. Personally, I don't think it looks great, and it suffers in the usability department too. Users expect segmented control items to be centered, and left-justifying the items will make it harder for them to know where to tap to hit the segment. That seems particularly true for short items like the one labelled "3rd" in the example. It's not terrible, it just seems a little weird.
Original answer:
UIControl (of which UISegmentedControl is a subclass) has a contentHorizontalAlignment property that's supposed to tell the control to align its content a certain way, so the logical thing to do would be to set it like this:
let segmented = UISegmentedControl(items: ["Yes", "No", "Maybe"])
segmented.frame = CGRect(x:75, y:250, width:250, height:35)
segmented.contentHorizontalAlignment = .left
But that doesn't work — you still get the labels centered. If you've got a compelling use case for left-aligned segments, you should send the request to Apple.
One way you could work around this problem is to render your labels into images and then use the images as the segment labels instead of plain strings. Starting from the code in How to convert a UIView to an image, you could easily subclass UISegmentedControl to create images from the item strings.

Add labels to navigation bar

I am adding a calendar to my app and thought it would be cool to mimic the format of standard iOS Calendar app as per weekday labels:
In the Calendar app, these labels (S,M,T,W,T,F,S) seem to be integrated into the navigation bar, so I was wondering if there is a way to implement this or if this is something Apple left to themselves (as there seems to be no standard way to add anything but bar button items). Mind you, these labels should be dynamic - e.g. rearrange in case of day 2 as firstWeekDay for certain Locale.
Apple proposes not to resize navigationBar itself, but remove shadow from bar and add custom view under your navigationBar.
Please refer the apple recommended approach for extended navigation bars here - https://developer.apple.com/library/content/samplecode/NavBar/Introduction/Intro.html#//apple_ref/doc/uid/DTS40007418-Intro-DontLinkElementID_2
And your particular scenario - https://developer.apple.com/library/content/samplecode/NavBar/Listings/NavBar_ExtendedNavBar_ExtendedNavBarViewController_swift.html#//apple_ref/doc/uid/DTS40007418-NavBar_ExtendedNavBar_ExtendedNavBarViewController_swift-DontLinkElementID_13
You just need to set a view to your title view of navigationItem for example:
sampleLabel.textAlignment = .center
sampleLabel.textColor = UIColor.white
sampleLabel.font = UIFont.systemFont(ofSize: 12, weight: .medium)
sampleLabel.frame = CGRect(x: 0, y: 0, width: 40, height: 30)
sampleLabel.text = "T"
let titleView = UIView
titleView.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
titleView.addSubview(sampleLabel)
navigationItem.titleView = titleView
You can add labels to your navigationBar like sampleLabel wherever you want.

Issue with section header and table view cell in UITableViewController

I've done an experiment of creating a screen with the use of UITableviewController instead of using scroll view reason is the fields in screen may get dramatically change that's why I do that
Screen :
All of those cells are static cells.
section header code
let backgroundImage = UIImage(named: "main_bg")
let imageView = UIImageView(image: backgroundImage)
self.tableView.backgroundView = imageView
header.backgroundColor = UIColor.clear
let lblheader : appLabel = appLabel(frame: CGRect(x: 0, y: 20, width: UIScreen.main.bounds.width, height: header.frame.height - 20))
lblheader.text = "SIGN UP"
lblheader.textFontsize = 14
lblheader.textFontType = 2
lblheader.textFontColor = 1
lblheader.textAlignment = .center
header.addSubview(lblheader)
let btnback : appButton = appButton(frame: CGRect(x: 0, y: lblheader.frame.origin.y, width: 50, height: lblheader.frame.height))
btnback.backgroundColor = UIColor.clear
btnback.setImage(UIImage(named: "back_arrow"), for: .normal)
btnback.addTarget(self, action: #selector(self.btnBackTapped), for: .touchUpInside)
header.addSubview(btnback)
Now when I scroll the table It looks as below:
I want to scroll static cell of the table under header section.
I know I can also use combination of UIViewController which contains Container and represents the Table view controller (Ref : See this i used it already)
If any solutions other than that.
Please guide me!
Thank you
alternatively you can use UITableView's tableHeaderView instead of using UITableView's viewForHeaderInSection because Section Headers WILL always stick to the top of the tableview unless otherwise if you do some simple hacks
If you make your SectionHeader opaque and not transparent/translucent you'll understand. Try making a Custom Project (test project) where you create a TableView with a lot of Sections With Different Headers
Perfect example without creating the Sample Project would be the Phone Application (the green one) in your iPhone where the Letters are Section Headers and they stick at the top of your screen when scrolling
This is an example in Swift 2.3
let someHeader = NSBundle.mainBundle().loadNibNamed("", owner:self, options nil!)!.first as! SomeView
//this is not a real function just what you wanna do stuff
someHeader.customizeIfNeeded ... yadda yadda set frame assign values add targets etc
tableView.tableHeaderView = someHeader
tableView.reloadData()
Use UIViewController instead of UITableViewControllerand add a UIView as header in top of tableView
Refer this maintain the header of a tableView fixed
Just an easy approach, hope this helps
If you have to use 'UITableViewController' look at below solution also
UITableViewController (static cells/keyboard handling) and have a fixed header

How to center the subviews of UIScrollView

I'm a beginner in creating a custom view. I'm trying to create a custom UIView with a scrollview and buttons that will look like this:
I'm adding a view(view with label of page number) inside of scrollView depending on the the number of pages. Is that how it should be?
Currently it looks like this:
My question is how can I center the subviews of scrollview? and next is what's wrong with this code? Why is that I can only see 1 label inside the view? and the other doesn't show up. How can I scroll to the selected page if the page number is not visible already in the scrollview?
Here's my code:
func addPageNumberViewWithCount(count: Int) {
var pageNumberViewX: CGFloat! = 0
let pageNumberViewDistance: CGFloat! = 10
for i in 1...count {
let pageNumberView = UIView(frame: CGRectMake(pageNumberViewX, 0, 30, 30))
pageNumberView.backgroundColor = UIColor.redColor()
pageNumberView.layer.cornerRadius = pageNumberView.frame.height / 2
pageNumberView.layer.masksToBounds = true
pageNumberView.clipsToBounds = true
// add number label
let label = UILabel(frame: CGRectMake(pageNumberViewX, 0, 30, 30))
label.center = pageNumberView.center
label.text = "\(i)"
label.textAlignment = .Center
pageNumberView.addSubview(label)
// update x for next view
pageNumberViewX = pageNumberView.frame.origin.x + pageNumberView.frame.width + pageNumberViewDistance
// add view inside scrollview
scrollView.addSubview(pageNumberView)
if i == count {
scrollView.contentSize = CGSizeMake(pageNumberViewX + pageNumberView.frame.width, 30)
}
}
}
Part of my answer will go to providing a solution to your question,and another part of my answer will go toward strongly suggesting that this not be the method you use to complete your desired tasks.
At this point, AutoLayout and Interface Builder have come a long way. Where they used to be difficult to use because of their inconsistency and unpredictability, they are now highly predictable and consistent as long as you understand the tools and how to use them.
Apple's suggested method for completing this task (which I mostly stand behind) is creating a .xib file (nib) to lay out the base components of the design, and to load the nib into the view or view controller whenever that design should be used. My question for you: have you tried this, or have you determined for some reason that this would be an unsatisfactory solution to your problem? AutoLayout exists to solve these problems not just in allowing you to achieve your desired solution in this one situation but to achieve it in other situations as well, with varying screen sizes and device types.
Now, if you were to simply ignore all of that and continue on your path, there would be a few good ways to handle your problem. One suggested solution I have:
1) Wrap your pageNumberView in another view. Constrain that view to the size of the scrollView. Doing this gives the scrollView content with which to base its scrollable content size, and gives the inner pageNumberView something to compare itself to.
2) Center the pageNumberView horizontally in its container (the new view that we just created).
Doing this, the page numbers should now center themselves in the container until they reach a size where they exceed the width of the scrollView. At that point, they will then continue to expand, making the area horizontally scrollable.
I can provide code examples of how you would do this, but frankly I would much prefer if you scrapped the idea of doing things this way and instead opted for the AutoLayout method at least, and perhaps even the Interface Builder method. I started out with iOS the same way you did, trying to do everything in code. It really isn't the best way to do things, at least with regard to iOS.
Edit: I've provided an example of how this would look in Interface Builder using UINib. I've populated the view with an example of 5 pages to show what it is like. I will see if I can make a GIF or something similar to show what each of the subviews look like.
For the OP, my suggestion would be this: Use this for reference, and go learn the constraints system. It is extremely unlikely that you will find success with iOS if you do not learn and utilize the constraints system. Coding in X values to a UIView's frame is only going to create a product with poor, inconsistent performance across devices, and will take much, much longer than it would to take the time to learn constraints.
Perhaps you should have a UICollectionView with a cell for each of these buttons. That's a better way of doing this, and you can lay it out again when the screen rotates and it changes width.
Those cells will layout offset to the left. You can solve that this way:
let pageNumberViewTotalWidth = 30 * count + (pageNumberViewDistance * count - 1)
self.collectionView.contentInset.left = (self.collectionView.frame.size.width - pageNumberViewTotalWidth) / 2
The labels aren't showing up because you're setting their frame's x to be the same as the page number view's x. It's frame should be relative to it's superview, in this case pageNumberView.
First Question of yours "how can I center the subviews of scrollview?"
Solution: lets suppose you have in total 50 pages and you want to show 5 pages at a time in the scrollview.
Then make 10 subviews of equal widths where each subview width will be equal to visible portion of the collection view that is
self.view.size.width - 2*(width of toggle button)
Then in each container view add 5 of your pageNumberView placed at equal distance
lets pageNumberViewWidth = container.width/5 - 2*margin
now pageNumberView frame will be (margin,0,pageNumberViewWidth,height)
In this way in each container view your pageNumberViews will be placed equally and it will look as if you have centred them.
Second Question "Why is that I can only see 1 label inside the view?"
Answer : Its because you are setting label frame incorrectly
let label = UILabel(frame: CGRectMake(pageNumberViewX, 0, 30, 30))
Here label is the subview of pageNumberView So you have to set its frame according to its parent's view which is pageNumberView, so change it to
let label = UILabel(frame: CGRectMake(0, 0, 30, 30))
First time it was right because pageNumberViewX is 0 for first iteration after that it become some positive value which makes its frame shifted to right but its parent's width is small so its not visible to you.
Third Question : "How can I scroll to the selected page if the page number is not visible already in the scrollview?"
For this you need to find the frame of your selected page:
you can do that by using the offset that you used to create pageNumberView.
(width of each pageNumberView)*pageNumber = starting point of the required pageNumberView.
let frame : CGRect = CGRectMake(calculated offset above, 0,30, 30)
//where you want to scroll
self.scrollView.scrollRectToVisible(frame, animated:true)
I hope this will help you in solving your problem
Edit for first problem
func addPageNumberViewWithCount(count: Int) {
var containerViewX: CGFloat! = 0
let pageNumberViewDistance: CGFloat! = 10
let pageNumberViewPerSubview = 5
var numberOfSubview = count/pageNumberViewPerSubview
if(count % pageNumberViewPerSubview > 0){
numberOfSubview = numberOfSubview + 1
}
var pagesLeft = count
for i in 1...numberOfSubview {
var pageNumberViewX: CGFloat! = 0
let containerView : UIView = UIView(frame:CGRectMake(containerViewX,0,scrollView.frame.size.width,scrollView.frame.size.height))
if(pagesLeft < pageNumberViewPerSubview){
for k in 1...pagesLeft{
}
}
else{
for j in 1...pageNumberViewPerSubview{
let pageNumberView = UIView(frame: CGRectMake(pageNumberViewX, 0, 30, 30))
pageNumberView.backgroundColor = UIColor.redColor()
pageNumberView.layer.cornerRadius = pageNumberView.frame.height / 2
pageNumberView.layer.masksToBounds = true
pageNumberView.clipsToBounds = true
// add number label
let label = UILabel(frame: CGRectMake(0, 0, 30, 30))
label.text = "\(i)"
label.textAlignment = .Center
pageNumberView.addSubview(label)
// update x for next view
pageNumberViewX = pageNumberView.frame.origin.x + pageNumberView.frame.width + pageNumberViewDistance
containerView.addSubview(pageNumberView)
}
containerViewX = containerViewX + scrollView.frame.size.width
// add view inside scrollview
scrollView.addSubview(containerView)
pagesLeft = pagesLeft - pageNumberViewPerSubview
}
if i == count {
scrollView.contentSize = CGSizeMake(numberOfSubview*scrollView.frame.size.width, 30)
}
}
}

How do I set a layout margin for a text field in swift?

I am attempting to create margins in my text field so that when I go to type, the text isn't pressed so tightly against the edge.
I tried using this code (above viewDidLoad)
var insets = UIEdgeInsetsMake(10, 10, 10, 10)
Then putting this in my viewDidLoad()
textField.layoutMargins = insets
I ran the program and it still looked like there were no margins. How do I implement margins in a text field in Swift?
Subclass UITextField and implement textRectForBounds:. The simplest strategy is to call super, get the resulting rect, inset it as desired, and return it.
Here's an example result; note that the start and end of the text have considerable white space at the margin (of course the exact amount is up to you):
By creating new UIView with the right(your) values, you can set the padding in UITextField
textField.leftView = UIView(frame: CGRect(x: 30, y: 30, width: 100, height: 100))
textField.leftViewMode = UITextFieldViewMode.Always

Resources