Facebook的SDK V4 LoginButton忽略XML定制SDK、Facebook、XML、LoginButton

2023-09-05 06:43:20 作者:心痛不语

新的Facebook SDK为Android(V4.0)这是最近发布的引起奇怪的行为进行定制LoginButton我使用。下面是如何在同一XML是在不同的SDK版本呈现的比较。

这个问题似乎是在SDK 4.x中的FB图标不正确地拉伸以适应自定义大小的按钮,并在4.0.1 安卓layout_height 属性的忽略的干脆。

我的问题是如何让我的按钮出现在SDK 4.x的喜欢它的SDK 3.X做? XML和Java的解决方案是完全可以接受的。

XML的SDK 3.x的:

 < com.facebook.widget.LoginButton
        机器人:背景=@色/ com_facebook_blue
        机器人:ID =@ + ID / login_btn_facebook
        机器人:layout_width =225dp
        机器人:layout_height =50dp
        机器人:layout_marginBottom =5DP
        机器人:layout_marginTop =5DP
        机器人:layout_gravity =中心
        机器人:的onClick =onFacebookLoginClick
            />
 

它的外观上SDK 3.X(截图上OnePlus一个采取,运行CM11S):

XML的SDK 4.x版(按钮的包改名+我不得不改变宽度和放大器;字体有点相匹配的G +按键):

 < com.facebook.login.widget.LoginButton
        机器人:背景=@色/ com_facebook_blue
        机器人:ID =@ + ID / login_btn_facebook
        机器人:layout_width =221dp
        机器人:layout_height =50dp
        机器人:layout_marginBottom =5DP
        机器人:layout_marginTop =5DP
        机器人:layout_gravity =中心
        机器人:TEXTSIZE =7PT
        机器人:的onClick =onFacebookLoginClick
            />
 

它的外观上SDK 4.0(截图采取了一个Genymotion的Nexus 5,运行未经修改的4.4.4):

它的外观上SDK 4.0.1(同Genymotion的Nexus 5):

更多信息

从 4.0 - > 4.0.1 SDK更改日志:   

登录按钮被更新,以正确测量其大小。

相关文章:

Custom在Facebook的Andr​​oid SDK中Facebook的登录按钮图像3.5 使用Facebook SDK开发Zoom iOS版分享用户数据

要支持不同的屏幕尺寸,上面的登录按钮,我有一个 ViewPagerIndicator 和的 ViewPager 的被配置成占用这仍然定位元件具有确定的高度后的所有可用垂直空间

解决方案

我设法按照下面的步骤来获得期望的结果:

开业的Facebook SDK 3.X LoginButton code ,看到按钮被如何称呼有:

  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));
 

根据psented在这个答案解决方案$ P $,我在 onPostCreate()如下:

 浮动fbIconScale = 1.45F;
可绘制绘制= hostActivity.getResources()。getDrawable(
                               com.facebook.R.drawable.com_facebook_button_icon);
drawable.setBounds(0,0,(int)的(drawable.getIntrinsicWidth()* fbIconScale),
                         (中间体)(drawable.getIntrinsicHeight()* fbIconScale));
authButton.setCompoundDrawables(绘制,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)
        0,
        hostActivity.getResources()。getDimensionPixelSize(
                                             R.dimen.fb_margin_override_bottom));
 

在哪里我的自定义尺寸如下:

 <扪名=fb_margin_override_top> 13dp< /扪>
<扪名=fb_margin_override_bottom> 13dp< /扪>
<  - 接下来的值更改FB图标和左边框之间的边距: - >
<扪名=fb_margin_override_lr> 10dp< /扪>
<  - 接下来的值更改FB图标,登录文本之间的空白:! - >
<扪名=fb_margin_override_textpadding> 17dp< /扪>
 

这导致所需的布局:

The new Facebook SDK for Android (v4.0) that was released recently caused strange behavior for a customized LoginButton I'm using. Below is a comparison of how the same XML is rendered in different SDK versions.

The problem seems to be that the FB icon in SDK 4.x doesn't stretch properly to fit a custom-sized button, and at 4.0.1 the android:layout_height property is ignored altogether.

My question is how do I make the button appear in SDK 4.x like it did in SDK 3.x? Both XML and Java solutions are perfectly acceptable.

XML for SDK 3.x:

<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"
            />

How it looks on SDK 3.x (screenshot taken on a OnePlus One, running CM11S):

XML for SDK 4.x (the button's package was renamed + I had to change the width & font a bit to match the g+ button):

<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"
            />

How it looks on SDK 4.0 (Screenshot taken on a Genymotion Nexus 5, running unmodified 4.4.4):

How it looks on SDK 4.0.1 (Same Genymotion Nexus 5):

Additional information

Excerpt from the 4.0 -> 4.0.1 SDK change log:

Login button is updated to properly measure its size.

Related posts:

Custom Facebook login button image in Facebook Android SDK 3.5

To support different screen sizes, above the login buttons I have a ViewPagerIndicator and a ViewPager that is configured to take up all available vertical space which remains after positioning elements with defined height.

解决方案

I managed to get the desired result by following the following steps:

Opened the Facebook SDK 3.x LoginButton code and saw how the button was styled there:

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));

Based on the solution presented in this answer, I changed the button parameters during onPostCreate() as follows:

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),
        0,
        hostActivity.getResources().getDimensionPixelSize(
                                             R.dimen.fb_margin_override_bottom));

Where my custom dimensions are as follows:

<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>

This results in the desired layout:

 
精彩推荐
图片推荐