浮动操作按钮在低端设备上呈现为椭圆形

Question

我正在使用浮动操作按钮（不使用第三方库）

该工厂在mdpi和hdpi设备上显得很好，但在ldpi设备上显示为独特的椭圆形

此处参考的是截图 -

1. 这是mdpi设备上的fab渲染正常



1. 这是ldpi设备上的椭圆形渲染



主布局有一个include元素，包括fab布局。工厂布局包括背景作为drawable。背景= @绘制/ fab_drawable

一个。 res / drawable中的fab_drawable.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="0px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="0px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="0px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="0px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item android:id="@+id/fab_drawable_shape">
    <shape android:shape="oval" >
        <solid android:color="#404952" />
    </shape>
</item>
<item android:drawable="@drawable/onboarding_selector"/>

B中。 drawable-v21中的fab_drawable.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight" >

<item>
    <shape android:shape="oval" >
        <solid android:color="?android:colorAccent" />
    </shape>
</item>

℃。在我的基础片段中，我正在检查构建是否是棒棒糖然后使用此剪辑代码

ViewOutlineProvider fabOutlineProvider = new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                int diameter = getResources().getDimensionPixelSize(
                        R.dimen.fab_diameter);
                outline.setOval(0, 0, diameter, diameter);
            }
        };

        mComposeFabButtonView.setOutlineProvider(fabOutlineProvider);
        mComposeFabButtonView.setClipToOutline(true);

d。所有设备的fab按钮直径尺寸为60sp

Answer 1

我解决了渲染问题，方法是将图层列表项中的填充详细信息设为 1 dp（所有边）

这是代码 -

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8dp">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1dp" <--- Here are the changes
                    android:left="1dp"   <---
                    android:right="1dp"  <---
                    android:top="1dp"    <---
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1dp"
                    android:left="1dp"
                    android:right="1dp"
                    android:top="1dp"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item android:id="@+id/fab_drawable_shape">
    <shape android:shape="oval" >
        <solid android:color="#404952" />
    </shape>
</item>
<item android:drawable="@drawable/onboarding_selector"/>

Answer 2

尝试将尺寸从sp更改为dp。希望它能解决问题。

如果没有，但FAB在单独的布局中，并为该布局提供dp尺寸。 FAB应使用match_parent x2。

Answer 3

仅使用SP来定义字体大小，因为如果用户启用了大文本选项，它会更改大小。出于所有其他目的，请使用dp。有关更多信息，请参阅What is the difference between "px", "dp", "dip" and "sp" on Android?

最好使用像Makovkastar's Floating Action Button Library这样的库。

希望这有帮助