Facebook登录按钮：应用自定义样式

Question

我在使用新的Facebook Android SDK 4时遇到了一个奇怪的问题。 之前我使用的是旧版SDK：

 <com.facebook.login.widget.LoginButton
    xmlns:fb="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fb_button"
    style="@style/FacebookLoginButton"
    android:layout_width="485dp"
    android:layout_height="64dp"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="-17dp"
    fb:login_text="@string/login_with_facebook"
    fb:logout_text="Logout" />

中的 部分如下：

<style name="FacebookLoginButton">
    <item name="android:background">@drawable/button_facebook</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">21sp</item>
    <item name="android:gravity">center</item>
</style>

drawable/button_facebook包含自定义按钮形状的PNG图像。 现在，旧版本的SDK一切正常，但是使用新版本的SDK出现了问题。我得到了这个：

如您所见，有两个Facebook图标：圆圈中的是Facebook按钮的图标，第二个（大的）属于button_facebook drawable。是否有方法隐藏圆圈中的图标？

- giozh

---

创建自己的按钮并设置背景图片。然后在单击按钮时调用Facebook。 - Abhinav singh

Answer 1

在最新的Facebook v4 API中，这是正确的答案：

<com.facebook.login.widget.LoginButton
    xmlns:facebook="http://schemas.android.com/apk/res-auto"
    facebook:com_facebook_login_text="LOGIN"
    facebook:com_facebook_logout_text="LOGOUT"/>

- Mythul

---

@Mythul...谢谢...但是你在哪里找到这个文档的？ - Johnny Wu

如果我没记错的话，它应该是藏在他们的官方文档中的某个地方。老实说，我花了1-2天的时间才找到它。 - Mythul

@Mythul... 你还有链接吗？提前感谢。 - Johnny Wu

Answer 2

在使用 Facebook 登录时，我遇到了同样的问题... 我通过添加以下代码解决了这个问题...

    fbLoginButton.setBackgroundResource(R.drawable.facebook);
    fbLoginButton.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
    fbLoginButton.setCompoundDrawablePadding(0);
    fbLoginButton.setPadding(0, 0, 0, 0);
    fbLoginButton.setText("");

这是我的XML布局：

<com.facebook.widget.LoginButton
            xmlns:fb="http://schemas.android.com/apk/res-auto"
            android:id="@+id/fbLoginButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            fb:login_text=""
            fb:logout_text=""
            android:scaleType="centerInside" />

希望对你有所帮助。 编辑1： Facebook 可能会更改其 SDK 中存在的 LoginButton 类的位置，因此您可能需要相应地更改 XML 标记。在我的情况下，它位于 com.facebook.widget.LoginButton 中，请仔细检查。

- Gowtham Raj

---

但是你正在使用com.facebook.widget.LoginButton，而我正在使用com.facebook.login.widget.LoginButton。 - giozh

无所谓......它表示类LoginButton在facebookSDK中的位置......我可能使用了旧版本的fb......添加Java代码将解决您的问题......我对此非常确定 - Gowtham Raj

不再是这样了，Gradle 构建将失败，因为 login_text 和 logout_text 不再被定义。 - Sierisimo

@Sierisimo 有什么解决方案吗？ - Name is Nilay

Answer 3

你可以使用 android:drawableLeft="@null" 来去掉小的 Facebook 图标。

- Mohammad Haque

---

为什么Facebook不将android:drawableLeft更改为android:drawableSTART="@null"。android:drawableLeft已被弃用... - SmilingM

Answer 4

<FrameLayout
    android:id="@+id/facebook_lay"
    android:layout_width="0dp"
    android:layout_height="40dp"
    android:layout_weight="1"
    android:background="@drawable/facebook_button_bg">

    <com.lovetohave.love.ui.LoveTextView
        android:id="@+id/facebook_txt"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        android:gravity="center"
        android:text="@string/facebook"
        android:textColor="@color/white"
        android:textSize="@dimen/material_small"
        app:customFont="fonts/Roboto-Medium.ttf" />

    <com.rey.material.widget.ProgressView
        android:id="@+id/fb_progress_view_cir"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center"
        android:visibility="gone"
        app:cpd_strokeColor="#fff"
        app:cpd_strokeSize="1dp"
        app:pv_autostart="true"
        app:pv_circular="true"
        app:pv_progressMode="indeterminate"
        app:pv_progressStyle="@style/CircularProgress1" />

</FrameLayout>

您可以像设计TextView或Button一样进行设计，然后在按钮单击事件中添加以下代码。

LoginManager.getInstance().logOut();
LoginManager.getInstance().logInWithReadPermissions(SignIn.this, permissionNeeds);

接着将以下代码放在onCreate方法中以获取个人资料信息

LoginManager.getInstance().registerCallback(callbackManager,
    new FacebookCallback<LoginResult>() {
        @Override
        public void onSuccess(LoginResult loginResult) {
            mAccessToken = loginResult.getAccessToken()
                    .getToken();
            PrefUtil.saveData("accesstoken",
                    mAccessToken, SignIn.this);
            GraphRequest request = GraphRequest.newMeRequest(
                    loginResult.getAccessToken(),
                    new GraphRequest.GraphJSONObjectCallback() {

                        @Override
                        public void onCompleted(org.json.JSONObject object,
                                                GraphResponse response) {


                            } catch (org.json.JSONException e) {
                                // TODO Auto-generated catch block

                                e.printStackTrace();
                            } catch (Exception e) {
                                e.printStackTrace();
                            }

                        }
                    });
            Bundle parameters = new Bundle();
            parameters
                    .putString(
                            "fields",
                            "id,name,email,gender,birthday,first_name,last_name,location,picture");
            request.setParameters(parameters);
            request.executeAsync();
        }

        @Override
        public void onCancel() {
            Log.i(TAG, "LoginManager FacebookCallback onCancel");
            mFbProgressBar.setVisibility(View.GONE);
            mFacebookTxt.setVisibility(View.VISIBLE);
            if (pendingAction != PendingAction.NONE) {
                showAlert();
                pendingAction = PendingAction.NONE;
            }
        }

        @Override
        public void onError(FacebookException exception) {
            mFbProgressBar.setVisibility(View.GONE);
            mFacebookTxt.setVisibility(View.VISIBLE);
            Log.i(TAG, "LoginManager FacebookCallback onError");
            if (pendingAction != PendingAction.NONE
                    && exception instanceof FacebookAuthorizationException) {
                showAlert();
                pendingAction = PendingAction.NONE;
            }
        }

        private void showAlert() {
            new AlertDialog.Builder(SignIn.this)
                    .setTitle(R.string.cancelled)
                    .setMessage(R.string.permission_not_granted)
                    .setPositiveButton(R.string.ok, null).show();
        }
    });

- Anantha Babu