Im adding a MKMapView to my tableview background in ViewdidLoad simply like this and its working.
override func viewDidLoad() {
super.viewDidLoad()
var myMapView = MKMapView(frame: CGRectMake(0, 0, 100, 500))
myMapView.mapType = MKMapType.Standard
self.tableView.backgroundView? = myMapView
}
This displays the map view in the background of the tableview but I wish for the MapView to only be displayed on the bottom of the tableview background and with the height of 250
Im guessing you have to add it as a subview and add constraints, could somebody show me some code as to how they would go about this?
Thanks!
Related
I have a view controller with some elements in it.
class MyViewController: UIViewController {
// ......
}
This is what I want:
example of what I want
This is what my app looks like:
I want to make the two elements (an imageView and a button) to be vertically scrollable like the example.
What should I do? I have checked UIScrollView, but still don't know how to do it. Can you show me some code? Thanks!
There is an UI Component inside UIKit called UIScrollView. This Component can be used to achieve the Scrolling Behaviour you probably aim for.
Check out the official Documentation by Apple
UIScrollView | Apple Developer Documentation
Another great resource for getting started with UIScrollViews is this one.
UIScrollView Tutorial: Getting Started
One way to do this is programmatically create an UIScrollView in your UIViewController.
To control the scrollability you can set the ScrollView contentSize property. In the following sample we match contentSize.width with self.view.frame.size.width to prevent horizontal scroll.
So, to achieve your goal, you must add your components inside the scrollView using scrollView.addSubview
This is a simple sample of a UIScrollView with a red UIView inside:
import UIKit
class MyViewController: UIViewController, UIScrollViewDelegate {
lazy var scrollView: UIScrollView = {
let scroll = UIScrollView()
scroll.translatesAutoresizingMaskIntoConstraints = false
scroll.delegate = self
scroll.contentSize = CGSize(width: self.view.frame.size.width, height: 1000)
return scroll
}()
lazy var redView:UIView = {
let redview = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
redview.backgroundColor = .red
return redview
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(scrollView)
scrollView.addSubview(redView)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let layout = view.safeAreaLayoutGuide
scrollView.centerXAnchor.constraint(equalTo: layout.centerXAnchor).isActive = true
scrollView.centerYAnchor.constraint(equalTo: layout.centerYAnchor).isActive = true
scrollView.widthAnchor.constraint(equalTo: layout.widthAnchor).isActive = true
scrollView.heightAnchor.constraint(equalTo: layout.heightAnchor).isActive = true
}
}
In my case, I have to add UIView in top of the Tableview but it should be inside Tableview because of scrolling. Here, I drag and dropped UIView on topside tableview. Now, some scenario I need to increase and reduce height of the UIView. I tried to add constraints but its not available. How to achieve this by codebase?
Tableview with UIView Storyboard Hierarchy
Storyboard Design
Disabled Constraints For UIView
Constraints is not working with table header view. you can set table header using custom view and update its frame
Set a custom view
Set table header and update it's frame
class ViewController: UIViewController {
#IBOutlet var tableView: UITableView!
#IBOutlet var tableHeader: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
loadHeader()
}
func loadHeader() {
tableHeader.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 300)
tableView.tableHeaderView = tableHeader
}
}
Programmatically i have created a View and added a label and buttons to it. its fine in vertical it aligns to centre but as i rotate the screen it does not aligns to centre rather it seems as left aligned.
This is my code:
override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 150))
headerView.layer.borderWidth = 1
headerView.layer.borderColor = UIColor.whiteColor().CGColor
headerView.backgroundColor = ClientConfiguration.primaryUIColor()
let myLabel = UILabel()
myLabel.frame = CGRectMake(-1, -1, tableView.frame.width, 30)
myLabel.font = UIFont.boldSystemFontOfSize(14)
myLabel.backgroundColor = ClientConfiguration.primaryUIColor()
myLabel.textColor = UIColor.whiteColor()
myLabel.text = "Select Time Zone"
myLabel.textAlignment = .Center
let frame = CGRectMake(1, 1,headerView.frame.width , 70)
self.btnTimeZone.frame = frame
headerView.addSubview(myLabel)
headerView.addSubview(self.btnTimeZone)
self.buttonTitileString = self.selectedZone.value
self.btnTimeZone.setTitle(buttonTitileString, forState: .Normal)
return headerView
}
In horizontal mode the button text and label are aligned to left
and when i set self.btnTimeZone.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Center
its fine in horizontal mode but in vertical mode they all are right aligned as;
enter image description here
How can i solve this issue i need both of them in centre aligned in both horizontal and vertical mode.
You just need to reload the table when rotate the phone. Implement following method and inside of this method reload the tableView
override func didRotate(from fromInterfaceOrientation: UIInterfaceOrientation) {
tableView.reloadData()
}
In case of the application should support both portrait and landscape modes, the good approach would be to work with NSLayoutConstraint.
Of course you have both options to create them programmatically or from the Interface Builder, I'd like to note that you are able to create the header view as a cell, without the need of doing it programmatically; That's -obviously- will leads to the ease of setup the desired constrains for the header subviews.
Try this also
change
tableView.frame.width
to
tableView.frame.size.width
You could try to set autoresizing for parent view.
headerView.autoresizesSubviews = true
myLabel.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.btnTimeZone.autoresizingMask = [.flexibleWidth, .flexibleHeight]
In Swift 5 (and 3, 4 too) you got to override viewDidLayoutSubviews() method of life cycle of view controller, it calls after viewWillTransition() method when rotating your device.
In viewDidLayoutSubviews() method you just need to reload the data of your tableView in order to redraw your section header for portrait to landscape or landscape to portrait, and it works perfectly.
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
self.tableView.reloadData()
}
Thanks to GayashanK for give me this idea with his answer.
I have created an IBOutlet of an UIView and I have a UITableViewController. I have set this but it is not loading any headerView. What I have done wrongly ?
#IBOutlet var headerView: UIView?
override func viewDidLoad() {
self.tableView.tableHeaderView = headerView
}
Create view programmatically like,
var headerView = UIView(frame: CGRectMake(0, 0, 320, 50))
and then set,
self.tableView.tableHeaderView = headerView
Hope this can help you. :)
If you want to add view from IB then Simply Drag UIView (your headerView) to top of tableView and add your stuff there. And don't set headerView by code.
I have created a view, CustomView.xib, and a dedicated class, CustomView.swift. I have added it to my ViewController in Storyboard by adding a view and setting the custom class to CustomView.swift and it works perfectly. The constraints I added in StoryBoard resize the nib like I want. Now I want to create copies of it, like cells/rows in a tableView (like a twitterfeed). How can I do that, while maintaining the constraints so that it resize correctly? I guess my question boils down to: How do you duplicate UIViews created in StoryBoard? I realise that the top constraint might have to be altered as row's are added. And second, since this is a nib, how can I change the label within it? The project is on GitHub
Any help would be very much appreciated! Thank you.
import UIKit
class ScrollViewController: UIViewController {
let scrollView = UIScrollView()
override func viewDidLoad() {
super.viewDidLoad()
let height = CGFloat(200.0)
self.scrollView.frame = self.view.bounds
self.scrollView.contentSize = CGSizeMake(self.view.bounds.size.width, height*3)
self.view.addSubview(self.scrollView)
var y = CGFloat(0.0)
for i in 0..<2 {
//DO I ADD IBOUTLET(s)?
// How do I set width of frame to the View in StoryBoard (that has constraints?
//Do I tag it, give it an ID - How can I create copies of the customView from StoryBoard
let customView = CustomView(frame: CGRectMake(0, y, 320, 200))
self.scrollView.addSubview(customView)
y += height
}
}
func createCustomView(index: Int) -> UIView {
//How do I instantiate the view here without setting the frame size?
let customView = CustomView(frame: CGRectMake(0, 0, 320, 200))
if index == 0{
customView.backgroundColor = UIColor.greenColor()
//How do I change the label text, like below?
//customView.label.text = "New York"
}
if index == 1{
customView.backgroundColor = UIColor.redColor()
//How do I change the label text, like below?
//customView.label.text = "Tokyo"
}
return customView
}
}