logo标签列表

定制Android Facebook登录按钮

androidandroid-facebook
84
我想要自定义 Facebook 登录按钮的外观，这个按钮是通过 Android 上的 Facebook sdk（facebook-android-sdk-3.0.1）获得的。我想要一个简单的 Android 按钮，上面有标题“使用 Facebook 登录”。我找不到相关文档。
如果任何人知道如何以简单的方式实现，请告诉我或指导我如何实现。
1
我从未使用过Facebook SDK……但是如果登录按钮有关联的图像文件，你可以修改它……如果没有，请完全忽略我的评论。 - brendosthoughts
这不仅仅是一个与图像文件相关联的按钮。它还有很多功能，例如：根据用户是否登录更改其文本。 - dora
13个回答
175
为了完全自定义 Facebook 登录按钮而不使用 com.facebook.widget.LoginButton。
根据 Facebook SDK 4.x，现在有新的登录概念。

LoginManager 和 AccessToken - 这些新类执行 Facebook 登录

因此，现在可以在没有 Facebook 登录按钮的情况下访问 Facebook 身份验证。

layout.xml

    <Button
            android:id="@+id/btn_fb_login"
            .../>

MainActivity.java

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        FacebookSdk.sdkInitialize(this.getApplicationContext());

        callbackManager = CallbackManager.Factory.create();

        LoginManager.getInstance().registerCallback(callbackManager,
                new FacebookCallback<LoginResult>() {
                    @Override
                    public void onSuccess(LoginResult loginResult) {
                        Log.d("Success", "Login");

                    }

                    @Override
                    public void onCancel() {
                        Toast.makeText(MainActivity.this, "Login Cancel", Toast.LENGTH_LONG).show();
                    }

                    @Override
                    public void onError(FacebookException exception) {
                        Toast.makeText(MainActivity.this, exception.getMessage(), Toast.LENGTH_LONG).show();
                    }
                });

        setContentView(R.layout.activity_main);

        Button btn_fb_login = (Button)findViewById(R.id.btn_fb_login);

        btn_fb_login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                  LoginManager.getInstance().logInWithReadPermissions(MainActivity.this, Arrays.asList("public_profile", "user_friends"));
            }
        });

    }

@Override 
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    callbackManager.onActivityResult(requestCode, resultCode, data); 
}
6
错误：logInWithReadPermissions(this, Arrays.asList("public_profile", "user_friends"));无法解析符号。 - Shaktisinh Jadeja
@Ilario，感谢你的建议。现在我已经编辑了我的答案。 - TejaDroid
3
@ShaktisinhJadeja，这里涉及到 OnClickListener 上下文。logInWithReadPermissions 需要将一个活动或片段作为第一个参数。因此，请使用 YourActivityName.this 或 YourFragmentName.this 替代。 - crubio
1
这个答案很好用。有人能告诉我在Android应用程序中登录后如何退出Facebook吗？ - BABU K
1
不再需要调用 FacebookSdk.sdkInitialize(this.getApplicationContext()); 了。 - Isaac Sekamatte
显示剩余5条评论
86

您可以使用样式来修改登录按钮，如下所示

<style name="FacebookLoginButton">
    <item name="android:textSize">@dimen/smallTxtSize</item>
    <item name="android:background">@drawable/facebook_signin_btn</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginBottom">10dp</item>
    <item name="android:layout_gravity">center_horizontal</item>
</style>

并且在布局中

<com.facebook.widget.LoginButton
        xmlns:fb="http://schemas.android.com/apk/res-auto"
        android:id="@+id/loginFacebookButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        fb:login_text="@string/loginFacebookButton"
        fb:logout_text=""
        style="@style/FacebookLoginButton"/>
嗨@Filsh，这些属性有官方文档吗？我没有找到。 - Jorge E. Hernández
16
不再起作用。在构建时，Gradle会因错误而停止。请使用LoginManager和标准按钮。 - Cassio Landim
38

如果你想完全自定义按钮，我发现最好的方法是创建一个按钮或任何你想要的视图（在我的情况下是一个LinearLayout），并为该视图设置OnClickListener，然后在onClick事件中调用以下内容：

com.facebook.login.widget.LoginButton btn = new LoginButton(this);
btn.performClick();
2
它可以工作。但是不必要的。没有必要使用Facebook登录按钮并模拟其点击。请改用LoginManager。 - Vitor Hugo Schwaab
1
维托是正确的，自定义自己的按钮并使用登录管理器要容易得多。 - Jonathan Dunn
19

  1. 创建自定义的Facebook按钮并更改本地Facebook按钮的可见性：

    2. <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <Button
            android:id="@+id/facebookView"
            android:layout_width="300dp"
            android:layout_height="48dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="12dp"
            android:background="@drawable/btn_frame"
            android:gravity="center"
            android:text="@string/Sign_in_facebook_button"
            android:textColor="@color/colorAccent" />

    <com.facebook.login.widget.LoginButton
            android:id="@+id/facebookButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible"
            android:layout_marginBottom="12dp" />

 </LinearLayout>

  2. 为你的伪装按钮添加监听器并模拟点击：

    3. facebookView.setOnClickListener(this);
@Override
public void onClick(View v) {
    if (v.getId() == R.id.facebookView){
       facebookButton.performClick();
    }
}
16

您可以像这样修改登录按钮

<com.facebook.widget.LoginButton
            xmlns:fb="http://schemas.android.com/apk/res-auto"
            android:id="@+id/login_button"
            android:layout_width="249dp"
            android:layout_height="45dp"
            android:layout_above="@+id/textView1"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="30dp"
            android:layout_marginTop="30dp"
            android:contentDescription="@string/login_desc"
            android:scaleType="centerInside"
            fb:login_text=""
            fb:logout_text="" />

而在代码中，我定义了背景资源：

final LoginButton button = (LoginButton) findViewById(R.id.login_button);
button.setBackgroundResource(R.drawable.facebook);
1
嘿@RINK，当尝试运行fb:login_text和fb:logout_text时会出现错误。这是错误信息:Error parsing XML: unbound prefix。你确定这是正确的语法吗？ - Etienne Lawlor
1
显然有点晚了，但是@toobsco42 - 确保你已经定义了xmlns:fb（为http://schemas.android.com/apk/res-auto），可以像这里所示在按钮中定义，也可以在布局文件的顶层定义。 - Eric Brynsvold
3
Facebook SDK 3.0或以上版本中，其facebook:login_text=""和facebook:logout_text=""。 - Dhaval Parmar
1
@RINK 写上这段代码，你就不会再遇到这个错误了xmlns:fb="http://schemas.android.com/apk/res-auto" - Yawar
Button.setCompoundDrawablesWithIntrinsicBounds(0,0,0,0);，同时请写下这个链接。 - Yawar
9
在较新的Facebook SDK中，登录和注销的文本名称为：
 <com.facebook.login.widget.LoginButton
 xmlns:facebook="http://schemas.android.com/apk/res-auto"
 facebook:com_facebook_login_text=""
 facebook:com_facebook_logout_text=""/>
1
它能工作，你是怎么发现的？深入挖掘SDK代码了吗？ - MD TAREQ HASSAN
5
//call Facebook onclick on your customized button on click by the following

FacebookSdk.sdkInitialize(this.getApplicationContext());

        callbackManager = CallbackManager.Factory.create();

        LoginManager.getInstance().registerCallback(callbackManager,
                new FacebookCallback<LoginResult>() {
                    @Override
                    public void onSuccess(LoginResult loginResult) {
                        Log.d("Success", "Login");

                    }

                    @Override
                    public void onCancel() {
                        Toast.makeText(MainActivity.this, "Login Cancel", Toast.LENGTH_LONG).show();
                    }

                    @Override
                    public void onError(FacebookException exception) {
                        Toast.makeText(MainActivity.this, exception.getMessage(), Toast.LENGTH_LONG).show();
                    }
                });

        setContentView(R.layout.activity_main);

        Button mycustomizeedbutton=(Button)findViewById(R.id.mycustomizeedbutton);

        mycustomizeedbutton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                  LoginManager.getInstance().logInWithReadPermissions(this, Arrays.asList("public_profile", "user_friends"));
            }
        });

    }
2

自定义com.facebook.widget.LoginButton

步骤1：创建一个Framelayout。

步骤2：设置com.facebook.widget.LoginButton

步骤3：使用可定制的Textview设置。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <com.facebook.widget.LoginButton
        android:id="@+id/fbLogin"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:contentDescription="@string/app_name"
        facebook:confirm_logout="false"
        facebook:fetch_user_info="true"
        facebook:login_text=""
        facebook:logout_text="" />

    <TextView
        android:id="@+id/tv_radio_setting_login"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:background="@drawable/drawable_radio_setting_loginbtn"
        android:gravity="center"
        android:padding="10dp"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
</FrameLayout>

必须记住

1> com.facebook.widget.LoginButton 和 TextView 的高度/宽度相同

2> 先声明 com.facebook.widget.LoginButton，然后再声明 TextView

3> 使用TextView的点击监听器执行登录/注销操作

2
 <com.facebook.widget.LoginButton
            android:id="@+id/login_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            facebook:confirm_logout="false"
            facebook:fetch_user_info="true"
            android:text="testing 123"
            facebook:login_text=""
            facebook:logout_text=""
            />

这对我很有帮助。要更改Facebook登录按钮文本，请按如下步骤操作。
2
<FrameLayout
    android:id="@+id/FrameLayout1"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_marginStart="132dp"
    android:layout_marginTop="12dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/logbu">


    <ImageView
        android:id="@+id/fb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/fb"
        android:onClick="onClickFacebookButton"
        android:textAllCaps="false"
        android:textColor="#ffffff"
        android:textSize="22sp" />

    <com.facebook.login.widget.LoginButton

        android:alpha="0"  <!--***SOLUTION***-->
        android:id="@+id/buttonFacebookLogin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="45sp"
        android:visibility="visible"
        app:com_facebook_login_text="Log in with Facebook" />

</FrameLayout>

定制Java和Kotlin的集成Facebook按钮最简单的方法

1
巧妙的答案 - Sayok Majumder
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接