web-dev-qa-db-ja.com

FBSDKLoginKitのログインボタンの高さを変更できませんか？

IOSではSwiftでFBSDKLoginKitを使用しています。

最近までは完全に機能していましたが、ストーリーボードのボタンの高さを上書きすることはできませんか？

ボタンの高さが、何らかの理由ではるかに小さくなりました。ボタンの高さの制約を設定して、ボタンをスタックビューに配置し、比例して塗りつぶすように設定して、SDKでボタンの高さを上書きすることもできました。

ボタンを通常のUIButtonに変更すると、レイアウトの制約が完全に機能します。

これは、アプリを実行したときのボタンの外観です。

This is what the button looks like when I run the app.

これは私がボタンをどのように見せたいかです-サイズに関して。

This is how I would like the button to look - size wise.

iosswiftstoryboardfacebook-loginfacebook-ios-sdk
16
Ben Gilroy

私もこの問題に遭遇しました。この理由は 4.18.0 to 4.19.0アップグレードガイド で説明されています：

FBSDKLoginButton UIは4.19.0で変更されました。 「Facebookでログイン」の代わりに、ボタンに「Facebookで続行」が表示されるようになりました。ボタンの色が＃3B5998から＃4267B2に変更されました。 小さいフォントサイズと大きいFacebookロゴの周囲のパディングを使用するため、ボタンの高さが28に固定されました。

これまでに見つけた唯一の回避策はSDKバージョンを4.18.0にダウングレードすることです（これでうまくいきました）。

SDKの今後のアップデートの1つで、FBがこの問題（多くの人のために作成したもの）に対処する可能性があります。

より永続的な解決策に向けて、 これを引き起こした特定の変更、GitHubで を確認できます。私が最も疑わしいと思う変更は line 194 から始まります：

[self addConstraint:[NSLayoutConstraint constraintWithItem:self
                                                 attribute:NSLayoutAttributeHeight
                                                 relatedBy:NSLayoutRelationEqual
                                                    toItem:nil
                                                 attribute:NSLayoutAttributeNotAnAttribute
                                                multiplier:1
                                                  constant:28]];

上記の制約が削除/無効化されている場合、状況を逆転させるのに役立ちます。ほぼこのように見えるはずです（執筆時点でIDEは手元にありません）。

// 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
   }
}

上記をテストする機会を得たとき、またはより良い解決策を見つけた場合は、答えを更新します。

22
Dev-iL

Facebookボタンをオーバーライドするだけで、これを簡単に実現できます。

迅速：

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
    }

}

このコードサンプルでは、​​standardButtonHeightは、希望するボタンの高さで定義された定数です。

また、24.0のロゴサイズは、SDKのバージョン4.18で使用されているサイズと同じです。

10
cgossain

そこで、@ Dev-iLのソリューションを採用して、もう少し将来を見据えたものに調整しました。私はこれに非常に慣れていないので、理解するのに数時間かかりましたが、定数値ではなく高さ制約であることに基づいて高さ制約を明確に非アクティブ化するので、共有したいと思いました。

ストーリーボードでFacebookボタンとして分類されたサブビューを使用して、そこに新しい制約を設定しました。

私はこの方法を好み、よりクリーンなアプローチを感じています。

注：高さの制約では常に最初の値になると考えていますが、間違っている場合は修正して、編集して更新します。言ったように私はこれが初めてです

編集：ストーリーボードの高さの制約を削除中にスキップできるように、定数値28を含めることにしました。削除後にプログラムで制約を追加する場合、これは必要ありません。

for const in fbLoginButton.constraints{
  if const.firstAttribute == NSLayoutAttribute.height && const.constant == 28{
    fbLoginButton.removeConstraint(const)
  }
}
8
Xion

今のところ、Facebookボタンには高さの制約という制約が1つしかありません。ボタンのすべての制約を削除して追加できます。

facebookSignInButton.removeConstraints(facebookSignInButton.constraints)

しかしもちろん、これは将来変更される可能性があり、不要な制約を削除する可能性があります。おそらく、その問題のある制約のみを削除すると、より良い解決策になるでしょう。

if let facebookButtonHeightConstraint = facebookSignInButton.constraints.first(where: { $0.firstAttribute == .height }) {
    facebookSignInButton.removeConstraint(facebookButtonHeightConstraint)
}
5
gasho

これは古い質問であることに気付き、解決策を見つけました。今後の参考のために回答として投稿します。

ポッドを介してFBSDKLoginKitをインストールした後、XCODEの左側のディレクトリを調べ、PodfileではなくPODSを開きます。 FBSDKLoginKitを開き、FBSDKLoginButton.mファイルを開きます。

編集していることを示すアラートが表示されます。アラートは無視してください。つまり、メッセージに注意して、ターゲット情報以外は変更しないようにしてください。以下のように、ファイル内のFacebookボタンの高さを指示する2つのフィールドを変更します。

上記のガイドで役立つ画像：

最も簡単なソリューション、プログラマティックなレクティングに対処する必要はなく、ストーリーボードで実行するだけです

0
jackson meyer

Swift 4.0のこの小さな自動閉鎖は、制約を削除する理由がない場合でも完全に機能し、オーバーライドするだけです。

let facebookLoginButton = FBSDKLoginButton()
if let constraint = facebookLoginButton.constraints.first(where: { (constraint) -> Bool in
    return constraint.firstAttribute == .height
}) {
    constraint.constant = 40.0
}

またはletステートメントが嫌いな場合：

let facebookLoginButton = FBSDKLoginButton()
facebookLoginButton.constraints.first(where: { (constraint) -> Bool in
    return constraint.firstAttribute == .height
})?.constant = 40.0
0
NoodleOfDeath

ボタンの高さを変更しただけの場合は、ストーリーボードにボタンを追加した後、ボタンに既に存在する高さ制約の定数を調整するだけです。

_for constraint in facebookButton.constraints where constraint.firstAttribute == .height {
    constraint.constant = YOUR_Height
}
_

このコードはviewDidLoad()に配置できます。

0
Andreas

私はこの方法でボタンの高さを変更することができました：

  • 必要なサイズのビューfacebookButtonViewをストーリーボードに追加し、viewDidLoadでこれを実行します。

    let loginButton = LoginButton(frame: self.facebookButtonView.frame, readPermissions: [ .publicProfile ])
self.view.addSubview(loginButton)

FacebookボタンはfacebookButtonViewと同じサイズになります。高さ50でテストしたところ、問題なく動作しました。

0
Gabriel Candia

最後の手段として、Facebookのログインボタンとして機能する独自のカスタムボタンを実装してみてください。 SDKからのボタンのカスタマイズを妨げている可能性があります。 https://developers.facebook.com/docs/Swift/login -ここにサンプルコードのセクションがあります-「カスタムログインボタン」。複雑に見えません。

0
Denislava Shentova

同じ問題がありました。 initWithFrameメソッドを使用してコードでボタンを作成することにより、この問題を解決します。

ドキュメントから

FBSDKLoginButtonの高さは30ピクセルに固定されていますが、幅を変更できます。 initWithFrame:CGRectZeroは、ボタンのサイズを最小フレームに合わせます。

このソリューションは私たちのために働いています

let facebookButton = FBSDKLoginButton(frame:facebookButtonPlaceholder.bounds)
facebookButton.readPermissions = ["email"]
facebookButton.backgroundColor = UIColor.clear
facebookButtonPlaceholder.addSubview(facebookButton)
facebookButtonPlaceholder.backgroundColor = UIColor.clear
0
Alex

AutolayoutはFacebookボタン（FBSDKButton）では機能しなくなりました。ボタンフレームで高さを変えました。

    let fbLoginbutton = FBSDKLoginButton()

    view.addSubview(fbLoginbutton)

    fbLoginbutton.frame = CGRect(x: 38, y: 397, width: 300, height: 38)

必要に応じて設定できます。それでもフォントとロゴのサイズを変更することはできませんが。

0
Suhail