ImageButton可绘制的背景未居中并裁剪

时间:2016-05-08 14:23:11

标签: android background imagebutton

我有这个ImageButton

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/crimson_round_button"
        android:src="@drawable/play_white"/>

crimson_round_button.xml drawable是

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true">
            <shape android:shape="oval">
                <solid android:color="@color/hibiscus"/>
                <stroke
                    android:width="4dp"
                    android:color="@color/crimson"/>
            </shape>
        </item>

        <item>
            <shape android:shape="oval">
                <solid android:color="@color/crimson"/>
                <stroke
                    android:width="4dp"
                    android:color="@color/crimson"/>
            </shape>
        </item>
    </selector>

并且play_white.png drawable仅代表按钮中的白色播放图标。

我的最终结果就是这个

enter image description here

你可以看到内部图标没有居中,你可以注意到右边框和下边框有点裁剪。

原因是应用的背景不适合ImageButton,正如您在此图片中看到的,我在Android Studio预览中选择了ImageButton

enter image description here

知道为什么会这样吗?

编辑:

好的,让我们试着忘记白色箭头。 这是我的Image按钮(及其容器)的新代码

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:background="@color/white">

        <ImageButton
            android:id="@+id/save_record_dialog_play_imageButton"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:background="@drawable/crimson_round_button"/>
    </FrameLayout>

你可以看到设置为ImageButton背景的圆圈不再是一个圆圈,它在左侧和底部被裁剪

enter image description here enter image description here

并将4dp高程设置为ImageButton,裁剪边框更加明显

enter image description here

1 个答案:

答案 0 :(得分:0)

我认为问题在于三角形的播放按钮看起来并不居中。

我用自己的三角形按钮尝试了你的布局:

enter image description here

看起来它离右边太远了,但是如果我们想象三角形按钮的界限(抱歉我的绘画技巧)就像这样:

enter image description here

图标本身似乎确实居中。

一种解决方案是调整左边距,使其看起来更好:

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/crimson_round_button"
    android:src="@drawable/play_white"
    android:paddingLeft="3dp"/>

这给出了这个:

enter image description here

关于问题的第二部分,您是否观察过设计选项卡上的裁剪?在模拟器中?在设备上?对我来说,我在布局设计选项卡上看到了这个问题:

layout design tab

但不在设备上(这是截图): device screenshot