FloatingActionButton在前棒棒糖中占用额外的空间

时间:2015-07-21 09:34:17

标签: android floating-action-button

我为棒棒糖添加了一个<android.support.design.widget.FloatingActionButton android:id="@+id/bt_ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:gravity="center" android:src="@drawable/ic_done" app:backgroundTint="@color/primary" app:borderWidth="0dp" app:fabSize="mini" /> ,并且在它上面完全没问题但是对于棒棒糖以下它需要额外的空间来附着它

xml代码:

FloatingActionButton

上面的棒棒糖n的截图: enter image description here

此处的FloatingActionButton占用了适量的空间,但请查看第二个屏幕

pre-lollipo的截图: enter image description here 现在来看看after_create如何获得额外的保证金或额外的空格。如何解决这个问题。

5 个答案:

答案 0 :(得分:6)

FloatingActionButton放入CoordinatorLayout,所有平台上的所有边距都相同。在这种情况下,按钮的位置由FloatingActionButton.Behavior调整。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/bt_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        app:backgroundTint="@color/primary"
        app:borderWidth="0dp"
        app:fabSize="mini"/>
</android.support.design.widget.CoordinatorLayout>

根据对android issue 175330

的评论,这需要android支持库v22.2.1

答案 1 :(得分:4)

这是一个已知问题,这是由于额外的保证金。你可以像下面这样做,

    //to fix margin issue/bug with pre lollipop version
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) floatingActionButton.getLayoutParams();
        params.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
        floatingActionButton.setLayoutParams(params);
    }

答案 2 :(得分:1)

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fabBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:src="@drawable/ic_plus"
        app:fabSize="normal" />

没有任何花哨但只是一个错误。

enter image description here

enter image description here

答案 3 :(得分:0)

我已经使用负边距来缩小前棒棒糖设备上的FAB尺寸,但也保留了按钮周围的阴影区域,因此视图不会被破坏。

CREATE TABLE IF NOT EXISTS `user_log` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int(10) unsigned NOT NULL,
  `action_type` enum('login','logout','abuse') CHARACTER SET latin1 NOT NULL, 
  `notify_admin` tinyint(1) NOT NULL DEFAULT '0', 
  `saved` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, 
  PRIMARY KEY (`id`) 
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=15; 

INSERT INTO `user_log` (`id`, `user_id`, `action_type`, `notify_admin`,  `saved`) VALUES
(1, 1, 'login', 0, '2015-11-02 12:13:14'), 
(2, 1, 'logout', 0, '2015-11-02 13:12:11'),
(3, 1, 'abuse', 0, '2016-01-03 14:10:02'), 
(4, 2, 'abuse', 0, '2016-01-04 17:47:03'), 
(5, 2, 'login', 0, '2016-01-04 18:11:55'), 
(6, 1, 'abuse', 0, '2016-01-04 18:23:57'), 
(7, 1, 'abuse', 0, '2016-01-04 18:24:23'), 
(8, 2, 'logout', 0, '2016-01-04 18:25:24'),
(9, 1, 'abuse', 0, '2016-01-04 18:25:32'), 
(10, 1, 'login', 0, '2016-01-05 21:02:59'), 
(11, 3, 'login', 0, '2016-01-05 21:28:43'), 
(12, 3, 'logout', 0, '2016-01-05 21:52:01'),
(13, 2, 'abuse', 0, '2016-01-05 22:00:35'), 
(14, 1, 'logout', 0, '2016-01-05 22:12:09'); 

此外,我已使用int dimen5dp = getResources().getDimensionPixelSize(R.dimen.dimen_5_dp); if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) { LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) floatingActionButton.getLayoutParams(); params.setMargins( params.leftMargin, params.topMargin - ((int) (dimen5dp * 3.1)), //Approximate factor to shrink the extra params.rightMargin - ((int) (dimen5dp * 3.1)), //spacing by the shadow to the actual params.bottomMargin - ((int) (dimen5dp * 3.1))); //size of the FAB without a shadow floatingActionButton.setLayoutParams(params); } 将FAB包装在LineaLayout中:

app:useCompatPadding="false"

下面是左边的结果图像,它是棒棒糖前设备,右边是棒棒糖和上面的设备。我使用了uiautomatorviewer并打开了设备上的布局边界。红色虚线是FAB按钮的边界,而带有蓝色角的紫色线是LinearLayout的边界。在棒棒糖设备的情况下,FAB的阴影没有占用额外的空间,因此它的界限正好在按钮周围而没有额外的边距。在前棒棒糖设备中,阴影占用额外空间,因此FAB边界将在按钮周围有边距,但设置了负边距时,LinearLayout缩小到按钮的边界,而没有阴影添加的额外空间。

enter image description here enter image description here

答案 4 :(得分:0)

添加

app:pressedTranslationZ="0dp"

您的FloatingActionButton xml应该可以正常运行,而无需更改高度。