Facebook SDK v4 LoginButton忽略XML自定义

Dev-iL 发表于 Dev

魔鬼

最近发布的新的Android版Facebook SDK（v4.0）对我正在使用的自定义LoginButton造成了奇怪的行为。下面是在不同SDK版本中如何呈现相同XML的比较。

问题似乎在于，SDK 4.x中的FB图标无法正常拉伸以适应自定义大小的按钮，而在4.0.1版本中，该android:layout_height属性将被完全忽略。

我的问题是如何使按钮像在SDK 3.x中一样出现在SDK 4.x中？XML和Java解决方案都是可以接受的。

SDK 3.x的XML：

<com.facebook.widget.LoginButton
        android:background="@color/com_facebook_blue"
        android:id="@+id/login_btn_facebook"
        android:layout_width="225dp"
        android:layout_height="50dp"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:layout_gravity="center"
        android:onClick="onFacebookLoginClick"
            />

在SDK 3.x上的外观（在运行CM11S的OnePlus One上截图）：与SDK v3.x一起运行时的XML呈现

SDK 4.x的XML（按钮的包已重命名+我不得不稍微改变宽度和字体以匹配g +按钮）：

<com.facebook.login.widget.LoginButton
        android:background="@color/com_facebook_blue"
        android:id="@+id/login_btn_facebook"
        android:layout_width="221dp"
        android:layout_height="50dp"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:layout_gravity="center"
        android:textSize="7pt"
        android:onClick="onFacebookLoginClick"
            />

在SDK 4.0上的外观（截屏是在未修改的4.4.4上运行的Genymotion Nexus 5上拍摄的）：在此处输入图片说明

在SDK 4.0.1（相同的Genymotion Nexus 5）上的外观：在此处输入图片说明

附加信息

从4.0-> 4.0.1 SDK更改日志摘录：

登录按钮已更新，可以正确测量其大小。

相关文章：
- Facebook Android SDK 3.5中的自定义Facebook登录按钮图像
为了支持不同的屏幕尺寸，在登录按钮上方，我有一个ViewPagerIndicator和一个ViewPager，其配置为占用所有可用的垂直空间，该空间在放置具有定义高度的元素后仍保留。

魔鬼

通过执行以下步骤，我设法获得了预期的结果：

打开Facebook SDK 3.x LoginButton代码，然后查看那里的按钮样式：

this.setBackgroundResource(R.drawable.com_facebook_button_blue);
this.setCompoundDrawablesWithIntrinsicBounds(
             R.drawable.com_facebook_inverse_icon, 0, 0, 0);
this.setCompoundDrawablePadding(getResources().getDimensionPixelSize(
             R.dimen.com_facebook_loginview_compound_drawable_padding));
this.setPadding(getResources().getDimensionPixelSize(
                R.dimen.com_facebook_loginview_padding_left),
            getResources().getDimensionPixelSize(
                R.dimen.com_facebook_loginview_padding_top),
            getResources().getDimensionPixelSize(
                R.dimen.com_facebook_loginview_padding_right),
            getResources().getDimensionPixelSize(
                R.dimen.com_facebook_loginview_padding_bottom));

基于此答案中提出的解决方案，我在onPostCreate()以下过程中更改了按钮参数：

float fbIconScale = 1.45F;
Drawable drawable = hostActivity.getResources().getDrawable(
                               com.facebook.R.drawable.com_facebook_button_icon);
drawable.setBounds(0, 0, (int)(drawable.getIntrinsicWidth()*fbIconScale),
                         (int)(drawable.getIntrinsicHeight()*fbIconScale));
authButton.setCompoundDrawables(drawable, null, null, null); 
authButton.setCompoundDrawablePadding(hostActivity.getResources().
                  getDimensionPixelSize(R.dimen.fb_margin_override_textpadding));
authButton.setPadding(
        hostActivity.getResources().getDimensionPixelSize(
                                                  R.dimen.fb_margin_override_lr),
        hostActivity.getResources().getDimensionPixelSize(
                                                 R.dimen.fb_margin_override_top),
        hostActivity.getResources().getDimensionPixelSize(
                                                  R.dimen.fb_margin_override_lr),
        hostActivity.getResources().getDimensionPixelSize(
                                             R.dimen.fb_margin_override_bottom));

我的自定义尺寸如下：

<dimen name="fb_margin_override_top">13dp</dimen>
<dimen name="fb_margin_override_bottom">13dp</dimen>
<!--The next value changes the margin between the FB icon and the left border:-->
<dimen name="fb_margin_override_lr">10dp</dimen>
<!--The next value changes the margin between the FB icon and the login text:-->
<dimen name="fb_margin_override_textpadding">17dp</dimen>

这将产生所需的布局：

所需的布局：D