自定义 Google Plus 登录按钮和 Facebook 登录按钮

Posted 2023-03-15

【中文标题】自定义 Google Plus 登录按钮和 Facebook 登录按钮

【英文标题】：customize Google Plus Sign in Button And Facebook Login Button

【发布时间】：2015-12-16 06:52:57

【问题描述】：

我需要，如下图所示

据我所知，Facebook 登录按钮通过文本大小和填充来制作宽度和高度

要更改 Google 登录按钮，我使用了以下方法：

private void setGooglePlusButton(SignInButton signInButton, String buttonText) 
    // ExceptionHelpers.dLog("GOOGLE_PLUS_TAG", "Child Count : "+signInButton.getChildCount());
    signInButton.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    for (int i = 0; i < signInButton.getChildCount(); i++) 
        View v = signInButton.getChildAt(i);
        // ExceptionHelpers.dLog("GOOGLE_PLUS_TAG", "Type Of Child : "+v.getClass().getName());
        if (v instanceof TextView) 
            TextView tv = (TextView) v;
            tv.setText(buttonText);
            tv.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            tv.setBackgroundResource(R.drawable.google_background_drawable);
            tv.setCompoundDrawablesWithIntrinsicBounds(R.drawable.facebook_compound_drawable, 0, 0, 0);
            int padding = (int) getResources().getDimension(R.dimen.header_padding);
            int drawablePadding = (int) getResources().getDimension(R.dimen.header_padding);
            tv.setPadding(padding, padding, padding, padding);
            tv.setCompoundDrawablePadding(drawablePadding);
            tv.setTextColor(getResources().getColor(R.color.white_color));
            tv.setTextSize(getResources().getDimension(R.dimen.font_title));
            return;
        
    

和 Facebook 登录按钮样式：

<style name="FacebookLoginButton">
    <item name="android:layout_marginTop">@dimen/adapter_mark_padding</item>
    <item name="android:layout_marginBottom">@dimen/adapter_mark_padding</item>
    <item name="android:padding">@dimen/header_padding</item> <!-- @dimen/adapter_mark_padding -->
    <item name="android:textSize">@dimen/font_title</item>
    <item name="android:textColor">@color/white_color</item>
    <item name="android:background">@drawable/facebook_background_drawable</item>
    <item name="android:drawableLeft">@drawable/facebook_compound_drawable</item>
    <item name="android:drawablePadding">@dimen/header_padding</item>
</style>

输出是：

【参考方案1】：

<ImageView
    android:id="@+id/fb_new_iv"
    android:layout_
    android:layout_
    android:layout_centerHorizontal="true"
    android:src="@mipmap/ic_launcher" />

<RelativeLayout
    android:id="@+id/fb_layout"
    android:layout_
    android:layout_
    android:visibility="gone">

    <com.facebook.login.widget.LoginButton
        android:id="@+id/login_button"
        android:layout_
        android:layout_ />
</RelativeLayout>

将登录Facebook代码的代码放在ImageView的点击监听器中 它会工作的

【参考方案2】：

对于 Facebook，您需要使用样式：

<style name="FacebookLoginButton">
    <item name="android:textSize">15dp</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:textColor">@color/colorWhite</item>
    <item name="android:paddingLeft">13dp</item>
    <item name="colorButtonNormal">@color/colorAccent</item>
    <item name="android:paddingTop">11dp</item>
    <item name="android:paddingBottom">11dp</item>
    <item name="android:layout_marginLeft">4dp</item>
    <item name="android:layout_marginRight">5dp</item>
</style>

应用这样的样式

<com.facebook.login.widget.LoginButton
        xmlns:facebook="http://schemas.android.com/apk/res-auto"
        android:id="@+id/login_button"
        android:layout_
        android:layout_
        android:layout_weight="1"
        style="@style/FacebookLoginButton"
        facebook:com_facebook_login_text="@string/login_facebook"
        facebook:com_facebook_logout_text="@string/login_facebook"
        android:elevation="2dp"
        />

对于 google，您可以使用具有您想要的样式的普通按钮

  <Button
                android:id="@+id/button_googlePlus"
                android:layout_
                android:layout_
                android:layout_weight="1"
                android:text="@string/login_google"
                android:background="?attr/selectableItemBackground"
                android:textColor="@color/colorWhite"
                android:textAllCaps="false"
                android:textSize="15dp"
                android:drawableLeft="@drawable/ic_google"
                android:paddingLeft="40dp"
                android:paddingRight="40dp"
                />