Facebook SDK v4 LoginButton忽略XML自定义

Question

最近发布的新的Facebook SDK for Android(v4.0)导致了我正在使用的自定义LoginButton的奇怪行为.下面是对不同SDK版本中相同XML的呈现方式的比较.

问题似乎是SDK 4.x中的FB图标无法正确拉伸以适合自定义大小的按钮,而在4.0.1时,android:layout_height属性将被完全忽略.

我的问题是如何让SDK 4.x中的按钮出现在SDK 3.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上的外观(在OnePlus One上截图,运行CM11S):

用于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上的外观(在Genymotion Nexus 5上运行的屏幕截图,运行未经修改的4.4.4):

它在SDK 4.0.1(相同的Genymotion Nexus 5)上的外观如何:

附加信息

1. 摘自4.0 - > 4.0.1 SDK更改日志:

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

2. 相关文章:

   • Facebook Android SDK 3.5中的自定义Facebook登录按钮图像

3. 为了支持不同的屏幕尺寸,在登录按钮上方,我有一个ViewPagerIndicator和一个ViewPager,它配置为占用定位具有定义高度的元素后剩余的所有可用垂直空间.

Answer 1

我设法通过以下步骤获得所需的结果:

1. 打开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));
   

2. 基于此答案中提供的解决方案,我更改了按钮参数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>
   

这导致了所需的布局:

Answer 2

高度LoginButton与他的填充和文字大小有关:

//LoginButton.java

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int height = (getCompoundPaddingTop() +
            (int)Math.ceil(Math.abs(fontMetrics.top) + Math.abs(fontMetrics.bottom)) +
            getCompoundPaddingBottom());
    //...
}

因此,如果您想通过xml文件使用android:padding*和android:textSize属性更改其高度或为其创建样式:

<style name="FacebookLoginButtonStyle">
    <item name="android:textSize">16sp</item>
    <item name="android:paddingTop">10sp</item>
    <item name="android:paddingBottom">10sp</item>
</style>