web-dev-qa-db-ja.com

FBLoginVIewをカスタマイズする方法は?

IOSアプリでFacebookに接続するには、 Facebook SDK for iOS のFBLoginVIewを使用しています。

Nice FB Login Buttonが表示されていますが、ログインボタンに自分の画像とテキストを使用したいです。問題は、それをカスタマイズする方法がどこにも見当たらないことです。

FacebookSDKResources.bundle/FBLoginView/imagesの画像をオーバーライドすることでログインボタンの背景画像を変更できましたが、ログインボタンのテキストと位置を変更する場所が見つからなかったため、「ログイン」のままです...

解決策はありますか?

ありがとうございました

34
ozba

答えは、FBLoginViewサブビューを調べて、ボタンとラベルを見つけてカスタマイズすることです。

コードは次のとおりです。

FBLoginView *loginview = 
[[FBLoginView alloc] initWithPermissions:[NSArray arrayWithObject:@"publish_actions"]];


loginview.frame = CGRectMake(4, 95, 271, 37);
for (id obj in loginview.subviews)
        {
            if ([obj isKindOfClass:[UIButton class]])
            {
                UIButton * loginButton =  obj;
                UIImage *loginImage = [UIImage imageNamed:@"YourImg.png"];
                [loginButton setBackgroundImage:loginImage forState:UIControlStateNormal];
                [loginButton setBackgroundImage:nil forState:UIControlStateSelected];
                [loginButton setBackgroundImage:nil forState:UIControlStateHighlighted];
                [loginButton sizeToFit];
            }
            if ([obj isKindOfClass:[UILabel class]])
            {
                UILabel * loginLabel =  obj;
                loginLabel.text = @"Log in to facebook";
                loginLabel.textAlignment = UITextAlignmentCenter;
                loginLabel.frame = CGRectMake(0, 0, 271, 37);
            }
        }

loginview.delegate = self;

[self.view addSubview:loginview];
67
ozba

UIBarbuttonとしてFBLoginviewショーになりたかったので、簡単なアプローチを作成しました。

最初に、FBLoginViewをプロパティとして追加しました。

@property (nonatomic, strong) FBLoginView* loginView;

そして、ビューの外側にログインビューを追加しました。

    self.loginView = [[FBLoginView alloc] init];
    self.loginView.frame = CGRectMake(-500, -500, 0, 0);
    [self.view addSubview:self.loginView];
    self.loginView.delegate = self;

そして、標準システムUIbarbuttonItemを追加しました

    UIBarButtonItem* fbButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(fireFbLoginView)];
    [self.navigationItem setRightBarButtonItem:fbButton];

そして、FBLoginViewのクリックアクションを起動するようにバーボタンを設定します;)

-(void)fireFbLoginView{
for(id object in self.loginView.subviews){
    if([[object class] isSubclassOfClass:[UIButton class]]){
        UIButton* button = (UIButton*)object;
        [button sendActionsForControlEvents:UIControlEventTouchUpInside];
    }
  }
}
9
dreampowder

私がこれを書いているとき、FacebookはすでにiOS用SDKのバージョン3.0をリリースしています。

ozbaの答えは一種の働きですが、私の意見からは、それはするべきではないを使用します。

  • まず、最も重要なことは、SDKコンポーネントのサブビュー/スーパービューを反復処理することは悪い習慣であるという一般的なルールです。これは、SDKバージョン間で階層が変更される可能性があるそして、修復します。
  • 次に、ボタンがクリックされると、1〜2秒で元のテキストに戻ります。

私の解決策は本当に簡単です。 FacebookのダウンロードしたフォルダーFacebookSDKには、Samplesという名前のフォルダーがあります。そこで、SessionLoginSampleを調べる必要があります。通常のRound Rect Buttonがあり、それを所有するViewControllerを介して、FBLoginViewDelegate 、FBSessionの状態に応じてテキストを変更できます。私を信じて、それは本当に簡単です。

8
Bogdan Raducan

または、Facebookのドキュメントを読んで自分のボタンを作成します。

https://developers.facebook.com/docs/ios/login-tutorial/#login-apicalls

このような:

- (void) buttonSelector
{
[FBSession openActiveSessionWithReadPermissions:@[@"basic_info"]
                                       allowLoginUI:YES
                                  completionHandler:
     ^(FBSession *session, FBSessionState state, NSError *error) {

         if (FBSession.activeSession.state == FBSessionStateOpen) {

             //To get the use
             [[FBRequest requestForMe] startWithCompletionHandler:^(FBRequestConnection *connection,NSDictionary<FBGraphUser> *user, NSError *error) {
                 NSString *token = [[[FBSession activeSession] accessTokenData] accessToken];


             }];

         }
     }];

}
6
Damien Romito

他のプロジェクトでリサイクルする必要がある場合に備えて、カスタムFBボタンクラスを作成しています。これはまだ最初のバージョンですが、ログの状態に応じてボタン画像を変更し、サイズを簡単に管理できます。

一部のメソッドは、ジャストインケース用です。

注として、クラスをFBCustomLoginViewとそのデリゲートに設定することにより、NIBファイルからボタンビューを配置することもできますが、設定したサイズは常にFBLoginViewのデフォルトサイズにリセットされるため、コードで常に特定のサイズを設定する必要があります。 (これを避けるためにNSCoderからフレームのサイズを取得する方法がわかりません)

コードは現状のままであり、あなたはそれを編集することができ、その中のバグの責任を負います。私が見つけたらこの答えを編集します。それが誰かに役立つことを願っています。

NIBから追加する場合は、目的のテキストと画像で調整するだけで、残りはFBLoginViewのように機能します。

    _facebookLoginButton.label.text = nil;
    [_facebookLoginButton setLoggedImage:  [UIImage imageNamed: @"ic_link_fb_on.png"] notLoggedImage:  [UIImage imageNamed: @"ic_link_fb_off.png"]];
    [_facebookLoginButton wrapButtonToSizeWidth: IS_IPAD ? 38 : 30 height: IS_IPAD ? 38 : 30 ];

FBCustomLoginView.h

#import <Foundation/Foundation.h>
#import <FacebookSDK/FacebookSDK.h>

@interface FBCustomLoginView : FBLoginView <FBLoginViewDelegate>

/** The button actual button */
@property (nonatomic, strong) UIButton* button;

/** The button label */
@property (nonatomic, strong) UILabel* label;

/** To a single button without label, set the same frame for the login button view and the actual button */
- (void)setWrappedButtonFrame:(CGRect)frame;

/** Wraps button to specified size, maintaining frame Origin */
- (void)wrapButtonToSizeWidth: (CGFloat) width height: (CGFloat) height;

/** Sets a default background image for all states */
- (void) setBackgroundImage: (UIImage*) image selectedImage: (UIImage*) selectedImage highlightedImage: (UIImage*) highlightedImage disabledImage: (UIImage*) disabledImage;

/** Sets a default background image */
- (void) setBackgroundImage: (UIImage*) image;

/** Resizes the background image to specified size */
- (void) setBackgroundImageSizeWidth: (CGFloat) width height: (CGFloat) height;

/** Place images to manage and differentiate between logged in and out states */
- (void) setLoggedImage: (UIImage*) loggedImage notLoggedImage: (UIImage*) notLoggedImage;

@end

FBCustomLoginView.m

#import "FBCustomLoginView.h"

@interface FBCustomLoginView() {
    id<FBLoginViewDelegate> _delegate;
    UIImage* _loggedImage;
    UIImage* _notLoggedImage;
}

@end

@implementation FBCustomLoginView

@synthesize button = _button;
@synthesize label = _label;

#pragma mark - View lifecycle, superclass override
- (id)init {
    if (self = [super init]) {
        [self getReferences];
    }
    return self;
}

- (id)initWithFrame:(CGRect)frame {
    if(self = [super initWithFrame: frame]) {
        [self getReferences];
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder: aDecoder]) {
        [self getReferences];
    }
    return self;
}


- (void) getReferences {

    for (id obj in self.subviews) {
        if ([obj isKindOfClass:[UIButton class]]) {
            self.button = obj;
        }

        if ([obj isKindOfClass:[UILabel class]]) {
            self.label =  obj;
        }
    }

}

- (void)setDelegate:(id<FBLoginViewDelegate>)delegate {
    _delegate = delegate;
    [super setDelegate: self];
}


#pragma mark - FBLoginViewDelegate

- (void)loginViewShowingLoggedInUser:(FBLoginView *)loginView {
    if (_loggedImage) {
        [self setBackgroundImage: _loggedImage];
    }
    [_delegate loginViewShowingLoggedInUser: loginView];
}

- (void)loginViewFetchedUserInfo:(FBLoginView *)loginView
                            user:(id<FBGraphUser>)user {
    [_delegate loginViewFetchedUserInfo: loginView user: user];
}

- (void)loginViewShowingLoggedOutUser:(FBLoginView *)loginView {

    if (_notLoggedImage) {
        [self setBackgroundImage: _notLoggedImage];
    }
    [_delegate loginViewShowingLoggedOutUser: loginView];
}

- (void)loginView:(FBLoginView *)loginView handleError:(NSError *)error {
    if ([_delegate respondsToSelector: @selector(loginView:handleError:)]) {
        [_delegate performSelector: @selector(loginView:handleError:) withObject: loginView withObject: error];
    }
}


#pragma mark - Custom methods

/** To a single button without label, set the same frame for the login button view and the actual button */
- (void)setWrappedButtonFrame:(CGRect)frame {
    [super setFrame: frame];

    if (_button) {
        [self setBackgroundImageSizeWidth: frame.size.width height: frame.size.height];
    }

}

/** Wraps button to specified size, maintaining frame Origin */
- (void)wrapButtonToSizeWidth: (CGFloat) width height: (CGFloat) height {
    [super setFrame: CGRectMake(self.frame.Origin.x, self.frame.Origin.y, width, height)];
    if (_button) {
        [self setBackgroundImageSizeWidth: width height: height];
    }
}


- (void) setBackgroundImage: (UIImage*) image selectedImage: (UIImage*) selectedImage highlightedImage: (UIImage*) highlightedImage disabledImage: (UIImage*) disabledImage {

    [_button setBackgroundImage:image forState:UIControlStateNormal];
    [_button setBackgroundImage:selectedImage forState:UIControlStateSelected];
    [_button setBackgroundImage:highlightedImage forState:UIControlStateHighlighted];
    [_button setBackgroundImage:disabledImage forState:UIControlStateDisabled];
}

- (void) setBackgroundImage: (UIImage*) image {
    [self setBackgroundImage: image selectedImage:nil highlightedImage:nil disabledImage:nil];
}

- (void) setBackgroundImageSizeWidth: (CGFloat) width height: (CGFloat) height {
    _button.frame = CGRectMake(0, 0, width, height);
}

- (void) setLoggedImage: (UIImage*) loggedImage notLoggedImage: (UIImage*) notLoggedImage {
    _loggedImage = loggedImage;
    _notLoggedImage = notLoggedImage;

    [self setBackgroundImage: notLoggedImage];
}


@end
3
htafoya

すべてのログイン機能を含む完全にカスタマイズされたボタンをゼロから作成することなく、たとえばFBSDKLoginButtonのテキストをカスタマイズするはるかに簡単な方法を見つけたと思います。 FBSDKLoginButtonがすべての作業を行うため、これは素晴らしいことです。テキストを変更するだけです。申し訳ありませんが私はスウィフトを知っています...ここにコードがあります:

var fbButton = FBSDKLoginButton()
var titleText = NSAttributedString(string: "Your new button title")
fbButton.setAttributedTitle(titleText, forState: UIControlState.Normal)

楽しい!

3
Matt Schwartz

facebookリソースバンドルen.lproj Localizable.stringsのテキストを変更します...動作すると思います

3
Luca Rocchi

ログインを押した後のラベルを含むすべての問題に対する答えは非常に簡単です。OZBAの答えがUILabelを完全に削除するようなものです(追加:[loginLabel removeFromSuperview];

これは完全に動作するコードです:

- (void)setFacebookConnectButton{
    self.loginView.readPermissions = @[@"public_profile", @"email", @"user_friends"];
    [self.loginView setDelegate:self];
    for (id obj in self.loginView.subviews)
    {
        if ([obj isKindOfClass:[UIButton class]])
        {
            UIButton * loginButton =  obj;
            UIImage *loginImage = [UIImage imageNamed:@"fb_connect"];
            [loginButton setBackgroundImage:loginImage forState:UIControlStateNormal];
            [loginButton setBackgroundImage:nil forState:UIControlStateSelected];
            [loginButton setBackgroundImage:nil forState:UIControlStateHighlighted];
            [loginButton setTitle:nil forState:UIControlStateSelected];
            [loginButton setTitle:nil forState:UIControlStateHighlighted];

            [loginButton sizeToFit];
        }
        if ([obj isKindOfClass:[UILabel class]])
        {
            UILabel * loginLabel =  obj;
            loginLabel.text = @"";
            loginLabel.textAlignment = NSTextAlignmentCenter;
            loginLabel.frame = CGRectMake(0, 0, 271, 37);
            [loginLabel removeFromSuperview];
        }
    }
}
2
Amir Foghel

ログインボタンを押すと、ボタンのテキストが更新されるという答えを見つけました。私も同じ問題を抱えていました。

ボタンラベルのフレームをCGRectMake(0,0,0,0)に設定してみてください。

私はそれを試しましたが、うまくいったと思います。

このコードをozbaの答えに追加してください。

[loginLabel setFrame:CGRectMake(0, 0, 0, 0)];

お役に立てれば。

1
jmac

Facebook SDKのREADMEファイルをお読みください。info.plistに行-FacebookBundleNameを追加し、バンドルの名前を入力する必要があります。次に、これでバンドルをプロジェクトに追加します名前を付けて「lang.lproj」という名前のフォルダーに入れます。例:en.lproj-it.lproj-fr.lproj-es.lproj ....このフォルダーにLocalizable.stringsファイルを追加する必要があります。次のような多くのフレーズをローカライズします。

"FBLV:LogOutButton" = "Log Out";
"FBLV:LogInButton" = "Log In";
"FBLV:LoggedInAs" = "Logged in as: %@";
"FBLV:LoggedInUsingFacebook" = "Logged in using Facebook";
"FBLV:LogOutAction" = "Log Out";
"FBLV:CancelAction" = "Cancel";

それがあなたを助けることを願っています!

1
Mellaito

FBビューを画面外に配置するか、サイズを0x0にします。次に、ボタンのアクションを設定して、メッセージbuttonPressed:をFBビューに送信します。これが最も簡単な方法だと思います。

0
pachun

IOSバージョン2.3の最新のFacebookログインによると。

次のコードスニペットを使用して、任意のカスタムUIButtonを介してログインできます。

- (void)loginWithFacebook:(id) sender {
   FBSDKLoginManager *login = [[FBSDKLoginManager alloc] init];
   [login logInWithReadPermissions:@[@"public_profile",@"email"] handler:^(FBSDKLoginManagerLoginResult *result, NSError *error) {
    if (error) {
        // Process error
    } else if (result.isCancelled) {
        // Handle cancellations
    } else {
        // Login Successful here

        // Check for any particular permissions you asked
        if ([result.grantedPermissions containsObject:@"email"]) {
            // Do work
        }
     }
  }];
}

リンクは次のとおりです。 https://developers.facebook.com/docs/facebook-login/ios/v2.3#login-apicalls

0
n.by.n

私は問題について考えました、そして、私は個人的に受け入れられた答えが本当に好きでありませんでした...さまざまな理由で。彼が好きなソリューションは誰でも無料ですが、私は自分のソリューションを共有することにしました。

for (UIButton *view in loginView.subviews) {
    if ([view respondsToSelector:@selector(addTarget:action:forControlEvents:)]) {
        [view setBackgroundImage:nil forState:UIControlStateNormal];
        [view setBackgroundImage:nil forState:UIControlStateHighlighted];
    }
}

クラスは将来カスタムになる可能性があるため、respondsToSelectorの代わりにisKindOfClassを使用しました。

0
Dumoko

最も簡単な解決策

let FB_LoginButton = FBSDKLoginButton()

let imgV = UIImageView(frame: FB_LoginButton.frame)
img.image = UIImage(named: "Your Image Name")

let textV = UILabel(frame: CGRect(x: 0, y: 0, width: FB_LoginButton.frame.size.width, height: 20)) // Set Frames as you need
textV.text = "Your Text"
textV.font = textV.font.fontWithSize(20)

// Swift 3
textV.font = textV.font.withSize(20)

imgV.addSubview(textV)
FB_LoginButton.addSubview(imgV)
0
ZAFAR007

https://github.com/facebook/facebook-ios-sdk/blob/master/src/UI/FBLoginView.m を参照すると、299行目でテキストが提供されていることがわかります。 FBLoginViewのインスタンスメソッドによって。したがって、FBLoginViewから独自のクラスを派生させ、logInTextの独自の実装を提供することにより、このテキストを変更できます。

@interface CustomFBLoginView : FBLoginView

@end

@implementation CustomFBLoginView

-(NSString*) logInText {
    return @"Some custom text";
}

@end

内部実装の詳細に依存するため、これは少し危険です。

0
Ian Newson

私の場合、Photoshopで見栄えの良いButtonを作成し、faceBookボタンの上に配置しました。 (私は知っているAppleはボタンにビューを置くことを勧めていないが、サブビューを繰り返すことは私にはよく見えない)。それを行う方法。

UIImageView *fbImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"facebookButton.png"]];
CGRect newFrame = fBButtonFrame;
newFrame.Origin.x = 0; newFrame.Origin.y = 0;
[fbImageView setFrame:newFrame];
[fbImageView setUserInteractionEnabled:NO];

FBLoginView *loginView = [[FBLoginView alloc] init];
[loginView setFrame:fBButtonFrame];
[loginView addSubview:fbImageView];
[self.view addSubview:loginView];
0
Mike.R

最新バージョン4.X Facebook SDK以降、

カスタムログインが簡単になりました。FBSDKLoginManagerを使用します

0
Vineeth Joseph