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

【问题标题】：Floating Action Button rendering as oval on lower end devices浮动操作按钮在低端设备上呈现为椭圆形
【发布时间】：2015-04-15 10:03:10
【问题描述】：

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

fab 在 mdpi 和 hdpi 设备上显示良好，但在 ldpi 设备上显示为独特的椭圆形

这里是截图供参考-

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

这是在 ldpi 设备上呈现为椭圆形的 fab

主布局有一个 include 元素来包含 fab 布局。 fab 布局包括一个作为可绘制对象的背景。背景=@drawable/fab_drawable

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

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

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

【问题讨论】：

我认为 ldpi 设备不再退出
但我所在的团队要求设计在一系列设备上保持一致
你指的是哪块板子？
1 - 使用dp 而不是px。 2 - 您的填充 (1, 0, 1, 1) 中有一些 不对称。
@DerGolem - 谢谢你解决了它。我认为在前棒棒糖设备上创建阴影层时存在不对称性，但似乎不对称性导致了问题

标签： android floating-action-button

【解决方案1】：

我通过将图层列表项中的填充细节设置为 1 dp for all side

解决了渲染问题

这里是代码 -

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

【讨论】：

【解决方案2】：

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

如果不是，则 FAB 位于单独的布局中，并为该布局提供 dp 尺寸。 FAB 应该使用match_parent x2。

【讨论】：

【解决方案3】：

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

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

希望对你有帮助

【讨论】：

好吧，我们的应用非常接近方法引用的 65K 限制，我想在没有任何依赖的情况下实现 fab 按钮。