为 Facebook 按钮添加圆角

Question

我正在尝试自定义 Android 中 facebook sdk 附带的按钮。我希望它有圆角而不是正常的角，为了实现这一点，我尝试了 here 的答案，我所做的基本上是我在 styles.xml 中为我的 facebook 按钮添加了一个样式：

   <style name="FacebookLoginButton">
    <item name="android:background">@drawable/fbshapebtn</item>
    <item name="android:textSize">18sp</item>
    <item name="android:gravity">center</item>
</style>

作为背景，我从我的可绘制对象中引用了一个 xml，我在其中定义了我的角：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">
    <corners
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
</shape>

这是我的主要布局，其中包含我引用我的样式的按钮 xml。

  <com.facebook.login.widget.LoginButton
        android:id="@+id/login_button"
        style="@style/FacebookLoginButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView"
        android:layout_alignLeft="@+id/button2"
        android:layout_alignStart="@+id/button2"
        android:layout_marginBottom="11dp"
        android:layout_alignRight="@+id/button2"
        android:layout_alignEnd="@+id/button2" />

按钮好像没有边角，但是很奇怪，因为我定义的textSize好像应用了，所以不知道具体是什么问题。

Answer 1

您可以在运行时为 Facebook 按钮添加背景，或者您可以使用 Android 视图用作 Facebook 登录按钮并根据您自己的设计。这里是 link 使用自定义按钮登录 Facebook。

https://androidammy.blogspot.in/2015/09/facebook-login-with-custom-button.html

Answer 2

嗨，我认为我们无法编辑他们的 Facebook 登录按钮，因此我们可以这样做，在您的布局文件中，请执行以下代码，

        <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:gravity="center"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/FrameLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.facebook.login.widget.LoginButton
                android:id="@+id/login_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Log In With FaceBook"
                android:textAllCaps="true"
                android:visibility="gone" />


            <LinearLayout
                android:id="@+id/linearButton"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/login_bg"
                android:gravity="center"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/com_facebook_button_icon" />

                <TextView
                    android:id="@+id/fb"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_marginLeft="10dp"
                    android:gravity="center"
                    android:singleLine="true"
                    android:text="Log In With FaceBook"
                    android:textAllCaps="true"
                    android:textColor="@color/colorAccent"
                    android:textStyle="bold"
                    android:visibility="visible" />
            </LinearLayout>

        </FrameLayout>
    </LinearLayout>

在您的可绘制对象中创建一个 xml 文件 login_bg.xml，根据您的需要更改颜色，

    <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimary" />
    <corners

        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
    <padding android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"/>
</shape>

然后在您的 activity 中执行以下代码，

LoginButton loginButton;
TextView fb;

private void facebookLogin() {
loginButton = (LoginButton) findViewById(R.id.login_button);
fb = (TextView) findViewById(R.id.fb);
loginButton.setReadPermissions("email");
callbackManager = CallbackManager.Factory.create();
fb.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (v == fb) {
            LoginManager.getInstance().logOut();
            loginButton.performClick();
        }
    }
});
    }

这里我们将可见性设置为 "GONE" 原始的 facebook sdk 按钮，其余的你可以从我的 code.Please 试试看。

Answer 3

您可以让登录按钮不可见，然后放置您自己的自定义按钮并像这样设置 onClickListener：

myCustomButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    myFacebookLoginButton.performClick();
                }
            });

Answer 4

对于不想创建另一个自定义按钮的人，我使用 CardView 作为按钮的父级并处理按钮的填充以获得所需的外观：

 <android.support.v7.widget.CardView
        android:layout_width="240dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        app:cardCornerRadius="18dp">

        <com.facebook.login.widget.LoginButton
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="25dp"
            android:paddingLeft="30dp"
            android:layout_gravity="center"
            android:paddingTop="25dp" />

    </android.support.v7.widget.CardView>

Answer 5

不要使用样式，将其删除并使用 android:background = "@drawable/yourdrawable"。我试过了

为 Facebook 按钮添加圆角

Add rounded corners to the Facebook button

android

xml

android-layout

facebook-sdk-4.0