View hierarchy before addSubview:
View > TableView
View hierarchy after addSubview:
View > TableView && View > CustomView
After calling addSubview, CustomView is shown on top of TableView as its frame is smaller and it was added after TableView. However, I have buttons and textfields in the CustomView, none of which are working. Even when I tap on the CustomView the TableView's scrollView seems to be capturing the tapGesture. How can I make it so that the CustomView's buttons and textfields to accept touches?
Also, background color of the CustomView is clear, showing the tableView underneath when the customView is added to the view hierarchy. I tried setting background color in the storyboard and programmatically, but it's still stuck at clear. How can I fix this?
class masterViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
//blah blah
#IBOutlet weak var tableView: UITableView! // tableView is added in the storyboard
let newForm = NewFormView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
newForm.backgroundColor = UIColor.white
self.view.addSubview(newForm)
newForm.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
newForm.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
newForm.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
])
}
newForm is a UIView nib with buttons and textFields added in the nib storyboard
You need to add width and height constraints
NSLayoutConstraint.activate([
newForm.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
newForm.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
newForm.widthAnchor.constraint(equalToConstant:300),
newForm.heightAnchor.constraint(equalToConstant:300)
])
As when you do
newForm.translatesAutoresizingMaskIntoConstraints = false
your frame becomes invalid and not active in receiving touches
Related
I am trying to add a 'close' button to a table view controller page that is displayed via popup. I just want the x (close) button to remain in the top left corner when the user scrolls down through the page. I have found code to add the floating action button using cocoapods but that's not what I want. Any help would be great.
I have tried to add a UIView outside of the table view so that I could constrain the button to that but table views do not let you add UIViews outside of it.
You can't add floating UIButton to UITableViewController, but you have three other options:
Change UITableViewController to UIViewController and add UITableView and UIButton to view controller
Create UIViewController container and add your UITableViewController as embedded, child view controller. Then you can add UIButton to container
Add UIButton to UINavigationController, but it will work only if you have navigation controller:) also, in this approach, you need to remove button manually, when you close your table view controller.
If you embed the UIButton in a UIView, then you can use a UITableVIewController.
Here is the stripped down code of one of my UITableViewController instances. There is a UITableView and on the bottom of the page there is a UIView with a UIButton on it:
class ViewController : UITableViewController
{
#IBOutlet private weak var floatingView: UIView!
override func viewDidLoad()
{
super.viewDidLoad()
self.initSaveView()
}
override func viewWillLayoutSubviews()
{
super.viewWillLayoutSubviews()
self.tableView.bringSubviewToFront(self.floatingView)
}
fileprivate func initSaveView()
{
self.tableView.contentInset = UIEdgeInsets(top: 0.0, left: 0.0, bottom: self.floatingView.frame.height, right: 0.0)
self.tableView.scrollIndicatorInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: self.floatingView.frame.height, right: 0.0)
self.floatingView.frame.origin.y = self.tableView.bounds.origin.y + self.tableView.frame.height - floatingView.frame.height
self.floatingView.autoresizingMask = .flexibleTopMargin
self.view.addSubview(self.floatingView)
}
}
extension ViewController
{
override func scrollViewDidScroll(_ scrollView: UIScrollView)
{
floatingView.frame = CGRect(x: self.floatingView.frame.origin.x, y: self.tableView.bounds.origin.y + self.tableView.frame.height - floatingView.frame.height, width: self.floatingView.frame.size.width, height: self.floatingView.frame.size.height)
}
}
Hopefully this will get you started. The floatingView was added using the Interface Builder (Simply drag a UIView to the top of the UITableViewController bar, then add your Outlet).
So I maybe successfully created a scroll view following a tutorial but something is terribly wrong. So I'm trying to create a scroll view with a table view inside and some buttons and labels and everything works fine but as soon as I add a single constraint it all goes just white with no explanation. I would assume content view is messing things up but I'm not sure, thx in advance!
So following some other people problems I tried filling constraints programmatically and doing views and subviews programmatically aswell, keep in mind tho that rest of constraints I did on storyboard. Btw I have tried equal width and height on newView --> scroll view and nothing seems to change.
my view hierarchy looks like this
myViewController -> View -> scrollView -> newView
class ThirdViewController: UIViewController {
#IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
scrollView.addSubview(newView)
newView.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true
newView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
newView.rightAnchor.constraint(equalTo: scrollView.rightAnchor).isActive = true
newView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
//tableView1.dataSource = self
//tableView1.delegate = self
//tableView1.register(UITableViewCell.self, forCellReuseIdentifier: "cell1")
}
#IBOutlet weak var newView: UIView!
override func viewWillLayoutSubviews() {
scrollView.contentSize = CGSize(width: 375, height: 1950)
}
}
Sorry, if question is layout pretty badly - I'm not that pro!
I'm trying to add a custom UIView after adding a UICollectionView because I wanna show the custom bar view above the collection view. This is my code:
func loadFilters() {
let categoriesFlowLayout = UICollectionViewFlowLayout()
categoriesFlowLayout.scrollDirection = .vertical
categoriesCollection = UICollectionView(frame: CGRect(x: 10, y: getY(yAxis: searchField) + 10, width: view.frame.size.width - 20, height: (view.frame.size.height * 9 / 10) - getY(yAxis: searchField) - 10), collectionViewLayout: categoriesFlowLayout)
categoriesCollection.register(categoriesCell.self, forCellWithReuseIdentifier: "categoriesCell")
categoriesCollection.delegate = self
categoriesCollection.dataSource = self
categoriesCollection.backgroundColor = UIColor.clear
categoriesCollection.showsVerticalScrollIndicator = false
categoriesCollection.showsHorizontalScrollIndicator = false
view.addSubview(categoriesCollection)
addBar()
categoriesCollection.isUserInteractionEnabled = true
}
The addBar() function is declared in the custom superclass ViewController
if addBar() is called before view.addSubview(categoriesCollection) it looks like the image below but if it is called after then my collection view does not scroll or recognize touches. Is there anyway that will make the collection view scroll and bring the custom bar to front?
I've used sendSubviewToBack() and bringSubviewToFront() functions as well but the result is the same
When you insert a view above another view, the top view gets all touch events. So the UICollectionView does not receive any touch events anymore since another view is above it.
As I see from your post, you just want the bar at the bottom of the screen. So check the size of your custom UIView. It probably fills the entire screen and is completely above the UICollectionView. Just give the UIView some sort of background color and see, how much space it fills.
If this doesn't work, you can use a UIGestureRecognizer on the custom UIView and forward the touch events to the UICollectionView.
I'm writing an app in Xcode 9 with Swift 4 and I've added a UIScrollview to a view which is intended to show a jPeg which is 3030 pixels in height. I've added the scrollview to my view and assigned the delegate in Outlets in IB. I've attached the IBOutlet called scrollView to the UIScrollview and added a UIImageView with the jPeg to the UIScrollview. I've set the size of the UIScrollView to 375W and 620H and then set the UIImageView to 375W and 3030H. this should complete the work in Interface builder.
In the Controller I've added UIScrollViewDelegate to the Class and added the code below to ViewDidLoad
//scrollView.delegate = self
scrollView.contentSize = CGSize(width: 375, height: 3040)
I've commented out the delegate line as I've done that in IB. When I run the app, the screen comes upon with the image but when I try to scroll it barely scrolls more than one screen. What have I missed?
You need to add a UIView inside your scrollview and then add that view top/bottom/leading/trailing 0 to scrollview then add your image view inside view and add image view bottom constraint to that view, So your scroll view will work properly.
Please refer below image for more details.
You have to place your scroll view inside a UIView and another UIView inside your scroll view.
Outer view Constraints: Leading,trailing,top and bottom - 0
Scroll view Constraints: Leading,trailing,top and bottom - 0
Inner view Constraints: Leading,trailling and top to Superview, Equal width to Outer view , Bottom space to -250 and Height equals 900(Height of your content)
Set your contentsize now.
You can implement as below image screen shots
//Height Constant of image
#IBOutlet weak var ConstHeight: NSLayoutConstraint!
override func viewDidLoad() {
super.viewDidLoad()
if #available(iOS 11.0, *) {
self.scrollView.contentInsetAdjustmentBehavior = .never
}else{
self.automaticallyAdjustsScrollViewInsets = false
}
//You can change height on here too
self.ConstHeight.constant = 800
}
Situation: I've got a UITableViewController loading some data asynchronously from a service. During this time I would like to place a full screen (except navigation bar) view over the table view showing my custom indicator and text.
Problem: The problem I'm facing is that when my custom view (it has a red background) is placed over the UITableView the lines of the table view are shown trough my custom view (see image below).
What I tried:
I tried to use insertBelow and above, didn't work. I also tried to do: tableview.Hidden = true, but this also hides the custom view for some reason as seen on image 2.
Image1: For some reason I can see the lines threw my view.
Image 2: Tableview + custom view gone when hidden = true used.
My code:
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
UIView view = new UIView (new RectangleF (0, 0, this.TableView.Frame.Width, this.TableView.Frame.Height));
view.BackgroundColor = UIColor.Red;
this.TableView.AddSubview (view);
TableView.Source = new SessionTableViewSource ();
}
You can use self.navigationController.view as view for adding subview.
The issue is that the View of a UITableViewController is a UITableView, so you cannot add subviews to the controller on top of the table.
I'd recommend switching from a UITableViewController to a simple UIViewController that contains a UITableView. This way the controller main view is a plain UIView that contains a table, and you can add subviews to the main UIView and they will be placed on top of the table view.
You can try to add the view to the window instead of nesting it in the table view like this:
UIWindow* mainWindow = [[UIApplication sharedApplication] keyWindow];
[mainWindow addSubview: overlayview];
UIWindow* window = [[UIApplication sharedApplication].delegate.window;
[window addSubview: your-overlayview];
Swift / Storyboard Solution
Note: The code below assumes one has a custom view (ratingView in my case) that is to be presented over a UITableView.
I've read many answers to this and similar questions on SO. The other answers from these sources worked to varying degrees for me (e.g.,view loaded but not shown or not accessible,...). I am using Swift 2.0+ and I am sharing the complete solution for doing this using a UITableViewController.
Create an outlet to the Navigation Bar and the view, which you want to bring over the tableview.
//MARK:Outlets
#IBOutlet weak var navBar:UINavigationBar!
#IBOutlet var ratingView: MNGStarRating!
In my case I also wanted to animate the view over the tableview so I used a class variable to hold a reference to the inflection point and a point above the scene (off-screen).
var centerYInflection:NSLayoutConstraint!
var aPointAboveScene = -(max(UIScreen.mainScreen().bounds.width,UIScreen.mainScreen().bounds.height) * 2.0)
Then in viewDidLoad I called a function (configureRatingViewAutoLayout) which configures and adds the constraints for the new view to be animated over the tableview.
func configureRatingViewAutoLayout() {
//REQUIRED
self.navBar.superview?.addSubview(self.ratingView)
var newConstraints:[NSLayoutConstraint] = []
newConstraints.append(self.ratingView.leadingAnchor.constraintEqualToAnchor(self.view.leadingAnchor,constant: 10))
newConstraints.append(self.ratingView.trailingAnchor.constraintEqualToAnchor(self.view.trailingAnchor,constant: 10))
newConstraints.append(self.ratingView.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor))
//hides the rating view above the scene
self.centerYInflection = self.ratingView.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor, constant: self.aPointAboveScene)
//the priority must be set below 1000 if you intend to change it after it has been added to a view
self.centerYInflection.priority = 750
newConstraints.append(self.centerYInflection)
//constraints must be added to the container view of the two items
self.ratingView.superview?.addConstraints(newConstraints)
}
Nota Bene - On a UITableViewController; the self.view is the
self.tableView. They point to the same thing so I guess one could also
use the self.tableView reference above.
Sometime later... In response to a UIControl event I call this method.
#IBAction func toggleRatingView (sender:AnyObject?){
//REQUIRED
self.ratingView.superview?.layoutIfNeeded()
UIView.animateWithDuration(1.0, delay: 0.0, usingSpringWithDamping: 0.37, initialSpringVelocity: 0.99, options: [.CurveEaseOut], animations: { () -> Void in
if CGRectContainsRect(self.view.frame, self.ratingView.frame) {
//in frame ~ animate away
//I play a sound to alert the user something is happening
self.centerYInflection.constant = self.aPointAboveScene
self.centerYInflection.priority = UILayoutPriority(950)
//I disable portions of the UI
self.disableUIElements(nil)
} else {
//out of frame ~ animate in
//I play a different sound here
self.centerYInflection.constant = 0
self.centerYInflection.priority = UILayoutPriority(950)
//I enable the UI fully
self.enableUIElements(nil)
}
//REQUIRED
self.ratingView.superview?.setNeedsLayout()
self.ratingView.superview?.layoutIfNeeded()
}) { (success) -> Void in
//do something else
}
}
These helper methods can be configured to control access to elements in your scene during the presentation of the view.
func disableUIElements(sender:AnyObject?) {
//UI
}
func enableUIElements(sender:AnyObject?) {
//UI
}
Caveats
My view is a custom view in the Storyboard (sitting outside of the
tableview but connected to the TableView Controller). The view has a
required user runtime attribute defined layer.zPosition with a Number value set to 2 (this ensures that it presents in front of the
UITableView).
One could also try playing around with bringSubviewToFront:
and sendSubviewToBack: methods if you don't want to set the zPosition
(I think zPosition is simpler to use)
Try this to hook a button at bottom of the UITableViewController
declare button as a variable:
var submitButton: UIButton!
and in viewDidLoad:
submitButton = UIButton(frame: CGRect(x: 5, y: UIScreen.main.bounds.size.height - 50, width: UIScreen.main.bounds.size.width - 10, height: 50))
submitButton.backgroundColor = UIColor.init(red: 180/255, green: 40/255, blue: 56/255, alpha: 1.0)
submitButton.setTitle("Submit", for: .normal)
submitButton.titleLabel?.font = UIFont(name: "Arial", size: 15)
submitButton.titleLabel?.textColor = .white
submitButton.addTarget(self, action: #selector(submit), for: .touchUpInside)
submitButton.layer.cornerRadius = 5
self.view.addSubview(submitButton)
and implement this method:
override func scrollViewDidScroll(_ scrollView: UIScrollView) {
submitButton.frame = CGRect.init(x: submitButton.frame.origin.x, y: UIScreen.main.bounds.size.height + scrollView.contentOffset.y - 50, width: submitButton.frame.width, height: submitButton.frame.height)
}
This works for me:
if let myTopView = Bundle.main.loadNibNamed("MyTopView", owner: self, options: nil)?.first as? MyTopView {
if let view = UIApplication.shared.keyWindow{
view.addSubview(myView);
myTopView.translatesAutoresizingMaskIntoConstraints = false
myTopView.topAnchor.constraint(equalTo: view.topAnchor ).isActive = true
myTopView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
myTopView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
myTopView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
}
}