I am using FBSDKLoginKit in iOS with Swift.
Up until recently it has been working perfectly, however I now cannot override the height of my button in the Storyboard?
The height of the button is now much smaller for some reason. I have tried setting height constraints for the button, putting the button in a stack view and set to fill proportionally and even override the button height in the SDK with no luck.
If I change the button to a normal UIButton the layout constraints work perfectly.
This is what the button looks like when I run the app.
This is how I would like the button to look - size wise.
I've also run into this problem. The reason for this is explained in the 4.18.0 to 4.19.0 upgrade guide:
The FBSDKLoginButton UI has changed in 4.19.0. Instead of "Log in with Facebook", the button now displays "Continue with Facebook". The button color is changed to #4267B2 from #3B5998. The button height is now fixed at 28 due to use of smaller font size and paddings around a larger Facebook logo.
The only workaround I found so far is to downgrade the SDK version to 4.18.0 (it did the job for me).
It is possible that FB will address this issue (...that they've created for many people) in one of the future updates to the SDK.
Towards a more permanent solution, we can see the specific changes that caused this, on GitHub. The change I find most suspicious starts on line 194:
[self addConstraint:[NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1
constant:28]];
If the above constraint is removed/disabled, it could help reverse the situation. It should look approximately like this (I don't have an IDE at hand at the time of writing):
// Obtain all constraints for the button:
let layoutConstraintsArr = fbLoginButton.constraints
// Iterate over array and test constraints until we find the correct one:
for lc in layoutConstraintsArr { // or attribute is NSLayoutAttributeHeight etc.
if ( lc.constant == 28 ){
// Then disable it...
lc.active = false
break
}
}
When I get a chance to test the above or if I find a better solution, I'll update the answer.
You can conveniently achieve this with a simple override of the facebook button.
Swift:
class FacebookButton: FBSDKLoginButton {
override func updateConstraints() {
// deactivate height constraints added by the facebook sdk (we'll force our own instrinsic height)
for contraint in constraints {
if contraint.firstAttribute == .height, contraint.constant < standardButtonHeight {
// deactivate this constraint
contraint.isActive = false
}
}
super.updateConstraints()
}
override var intrinsicContentSize: CGSize {
return CGSize(width: UIViewNoIntrinsicMetric, height: standardButtonHeight)
}
override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
let logoSize: CGFloat = 24.0
let centerY = contentRect.midY
let y: CGFloat = centerY - (logoSize / 2.0)
return CGRect(x: y, y: y, width: logoSize, height: logoSize)
}
override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
if isHidden || bounds.isEmpty {
return .zero
}
let imageRect = self.imageRect(forContentRect: contentRect)
let titleX = imageRect.maxX
let titleRect = CGRect(x: titleX, y: 0, width: contentRect.width - titleX - titleX, height: contentRect.height)
return titleRect
}
}
In this code sample standardButtonHeight is a defined constant with the desired button height.
Also note that the logo size of 24.0 is the same size used in version 4.18 of the SDK.
As for now the Facebook button has only one constraint which is the height constraint and you can just remove all constraints of the button and add yours.
facebookSignInButton.removeConstraints(facebookSignInButton.constraints)
But of course this can change in the future and you might remove a constraint that you don't want to. Maybe a better solution would be if you remove only that problematic constraint.
if let facebookButtonHeightConstraint = facebookSignInButton.constraints.first(where: { $0.firstAttribute == .height }) {
facebookSignInButton.removeConstraint(facebookButtonHeightConstraint)
}
So I took #Dev-iL's solution and tweaked it to something a bit more future proof. I'm very new to this so it took me a few hours to figure it out, but I thought I'd share since it specifically deactivates the height constraint based on being a height constraint instead of based on the constant value.
I've used a subview classed as the Facebook button in my storyboard and have set the new constraint there.
I prefer this method and feel its a cleaner approach.
Note: I believe for a height constraint it will always be the first value however please correct me if I'm wrong and I'll update with an edit. As I mentioned I'm new to this
Edit: I decided to include the constant value of 28 to allow for my storyboard height constraint to be skipped during the removal. This isn't needed if you add the constraint programmatically after the removal
for const in fbLoginButton.constraints{
if const.firstAttribute == NSLayoutAttribute.height && const.constant == 28{
fbLoginButton.removeConstraint(const)
}
}
This little autoclosure in Swift 4.0 also works perfectly if you have no reason to remove the constraint, just override it.
let facebookLoginButton = FBSDKLoginButton()
if let constraint = facebookLoginButton.constraints.first(where: { (constraint) -> Bool in
return constraint.firstAttribute == .height
}) {
constraint.constant = 40.0
}
Or if you hate let statements:
let facebookLoginButton = FBSDKLoginButton()
facebookLoginButton.constraints.first(where: { (constraint) -> Bool in
return constraint.firstAttribute == .height
})?.constant = 40.0
If you are after just changing the height of your button, you can simply adjust the constant of the already present height constraint on the button, after adding the button in your Storyboard:
for constraint in facebookButton.constraints where constraint.firstAttribute == .height {
constraint.constant = YOUR_Height
}
This code can be placed in viewDidLoad().
I could manage to change the height of the button this way:
I added a view facebookButtonView to the storyboard with the size that i want, and then in the viewDidLoad i simple do this:
let loginButton = LoginButton(frame: self.facebookButtonView.frame, readPermissions: [ .publicProfile ])
self.view.addSubview(loginButton)
The Facebook button take the same size as the facebookButtonView. I tested with height 50 and it's working.
As a last resort, try implementing your own custom button to act as a Facebook Login button. They might be preventing the customization of the button from the SDK.
https://developers.facebook.com/docs/swift/login
-- There is a section here with example code - "Custom Login Button". It doesn't seem complicated.
We had the same problem. We solve this problem by creating the button in code with initWithFrame method.
from documentation
FBSDKLoginButton has a fixed height of #c 30 pixels, but you may change the width. initWithFrame:CGRectZero
will size the button to its minimum frame.
this solution is working for us
let facebookButton = FBSDKLoginButton(frame:facebookButtonPlaceholder.bounds)
facebookButton.readPermissions = ["email"]
facebookButton.backgroundColor = UIColor.clear
facebookButtonPlaceholder.addSubview(facebookButton)
facebookButtonPlaceholder.backgroundColor = UIColor.clear
Realising this is an old question, I've found a solution and am posting it as an answer for future reference.
After you have installed the FBSDKLoginKit via a Pod, look in your directory on the left in XCODE and open your PODS -- not your Podfile. Open FBSDKLoginKit, and open FBSDKLoginButton.m file.
You will now see an alert indicating that you are editing. Ignore the alert, that is take notice of the message and make sure that you don't change anything other than your target info. Change the two fields that dictate Facebook button height in the file as seen below:
Pictures to help you through the guide above:
project structure files to open
first field to change
second field to change
EASIEST SOLUTION, no need to deal with programmatic rects, just do it in storyboard
Autolayout does not work on Facebook button(FBSDKButton) anymore. I changed its height using buttons frame.
let fbLoginbutton = FBSDKLoginButton()
view.addSubview(fbLoginbutton)
fbLoginbutton.frame = CGRect(x: 38, y: 397, width: 300, height: 38)
You can set it according to your requirement. Although I'm still not able to change its font & Logo size.
Xamarin.iOS example using Linq.
I created the button in the storyboard file, and assigned a height there. However, I could not just remove all height constraints because the one I set in the storyboard was getting removed as well. I had to check to see if there is an existing height constraint of size 28 - and remove that one
var contraint = this.FacebookLoginButton?.Constraints?.Where(x => x.FirstAttribute.Equals(NSLayoutAttribute.Height) && x.Constant == 28f)?.FirstOrDefault() ?? null;
if (contraint != null)
{
this.FacebookLoginButton.RemoveConstraint(contraint);
}
Related
I want the text field to do the next when the keyboard appears on the screen:
Move above the clave
Stretch to the width of the screen
The first item works, but the second one - doesn't.
When opening the application, the text field is attached with snap kit constructs
My code:
#objc private func keyboardWillShow (notification: NSNotification) {
guard let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue else { return }
UIView.animate(withDuration: 0.2) {
self.textField.widthAnchor.constraint(equalToConstant: self.view.frame.width).isActive = true
self.textField.frame.origin.y = keyboardSize.origin.y - self.textField.frame.height
}
}
You cannot change the weight of the text field with rounded corners.
Consider to use the UITextView or change text field border style to:
textField.borderStyle = UITextBorderStyleRoundedRect;
UPD:
I'm really sorry, I made mistake and read the question incorrectly.
In this case, you need to check the logs for autolayout errors. This issue can appear because you have conflicting constraints:
You have added the width constraint using a storyboard or xib it may conflict with the constraint you are setting in the keyboardWillShow method.
You have added trailing constraint and getting the next conflict. Thus, the trailing constraint trying to make the width smaller than you set to the width constraint:
Solutions:
If you are using storyboard constraints create an outlet of the constraint from the storyboard and change it in the next way:
self.widthConstraint.constant = self.view.frame.width;
Make trailing constraint less than or equal rather than equal. In this way, the width will be changed but the trailing constraint will prevent the text fields to be bigger than the desired paddings. Another way will be to update the trailing constraint instead of the width constraint, but you will need more calculations.
I have a problem that I can't create a view that can collapse it's contents that may be dynamic height , i know it's easy to collapse it with height constant = 0 , but i can't figure out how to make it expand again as the content of that view is dynamic and sub-itmes may be added later
I want that behavior
Your answer has massively overcomplicated a very simple solution.
You should first create your zeroHeightConstraint as a property.
let zeroHeightConstraint: NSLayoutConstraint = dynamicView.heightAnchor.constraint(equalToConstant: 0)
You could do this as an outlet from the storyboard too if you wanted.
Now add your button action...
#IBAction func toggleCollapisbleView() {
if animationRunning { return }
let shouldCollapse = dynamicView.frame.height != 0
animateView(isCollapse: shouldCollapse,
buttonText: shouldCollapse ? "Expand" : "Collapse")
}
private func animateView(isCollapse: Bool, buttonText: String) {
zeroHeightConstraint.isActive = isCollapse
animationRunning = true
UIView.animate(withDuration duration: 1, animations: {
self.view.layoutIfNeeded()
}, completion: { _ in
self.animationRunning = false
self.button.setTitle(buttonText, for: .normal)
})
}
Always avoid using view.tag in your code. It should always be seen as "code smell". There is almost always a much more elegant way of doing what you are trying to do.
Regarding the bottom constraint. You should really be using a UIStackView to layout the contents of the inside of the view here. By doing that you no longer need to iterate the subviews of your contentView you can access the UIStackView directly. And do the same thing there. In fact... a much better way would be to create the bottomConstraint against the view using a priority less than 1000. e.g. 999.
By doing that you don't have to remove or add that constraint at all. When the zeroHeightConstraint is not active it will be there and work. When the zeroHeightConstraint is active it will override the bottom constraint automatically.
Here is my app with the profile on the left (ProfileViewController) and a containerView on the right (ContainerViewController). What I am trying to achieve is once the containerViewController has done its job, it will update the height of the UIView.
// ContainerViewController.swift
let heightConstraint = self.view.constraints.filter { $0.identifier == "Height" }.first
heightConstraint?.constant = height
When browsing the list of constraints, they're all emtpy, and I did set up some constraints in the storyboard. So Why ? Is there any way to access the UIView within the ContainerViewController ?
Ps:
DispatchQueue.main.async {
self.view.frame = CGRect(x: 0, y: 0, width: width, height: height)
}
Sounds to work, but I think that modify constraint is proper ? Nope ?
What I would do, is to set IBOutlet for the constraint, and store it inside ContainerView.
This way, you don't depend on order number or anything else, to get this constraint, even if code (or storyboard) will changed in the future.
And Yes, the right way is to set the constraint constant, and not changing frame.
But be aware, that even constraint constant change need to be put on the main (UI) thread - (by the look of your code, I assume, you are dealing with the threads).
I'm learning swift with cs193p and I have a problem with UITextView.sizeThatFits(...). It should return a recommended size for popover view to display an [int] array as a text. As you can see in Paul Hegarty's example (https://youtu.be/gjl2gc70YHM?t=1h43m17s), he gets perfectly-fit popover window without scrollbar. I'm using almost the same code that was in this lecture, but instead i've got this:
the text string equals [100], but the sizeThatFits() method is returning a size that is too small to display it nicely, even though there is plenty of free space.
It is getting a bit better after I've added some text, but still not precise and with the scrollbar:
Here is the part of the code where the size is being set:
override var preferredContentSize: CGSize {
get {
if textView != nil && presentingViewController != nil {
// I've added these outputs so I can see the exact numbers to try to understand how this works
print("presentingViewController!.view.bounds.size = \(presentingViewController!.view.bounds.size)")
print("sizeThatFits = \(textView.sizeThatFits(presentingViewController!.view.bounds.size))")
return textView.sizeThatFits(presentingViewController!.view.bounds.size)
} else { return super.preferredContentSize }
}
set { super.preferredContentSize = newValue }
}
What should I do so this will work in the same way as in the lecture?
It looks like there are 16 pt margins between the label and its parent view. You need to take that into account when returning the preferred size of the popover.
You should try both of the following:
Add 32 to the width that's returned from preferredContentSize
In Interface Builder, clear the layout constraints on your UILabel, then re-add top, bottom, leading, and trailing constraints and make sure that "Constrain to Margins" option is not enabled.
Finally, instead of overriding preferredContentSize, you can simply set the preferredContentSize when your view is ready to display, and you can ask Auto Layout to choose the best size:
override func viewDidLayoutSubviews() {
self.preferredContentSize = self.view.systemLayoutSizeFitting(UILayoutFittingCompressedSize)
}
If your layout is configured correctly, systemLayoutSizeFitting(UILayoutFittingCompressedSize) will return the smallest possible size for your view, taking into account all of the margins and sub-views.
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)
}
}
}