Android可绘制椭圆形，在设计视图和设备上绘制的图像不同

Question

我有一个 XML 可绘制对象，它绘制一个红色圆圈并将麦克风图像居中放置在它的中间。然后我将它放在相对布局的背景之上。但是，设计视图布局看起来与我想要的完全一样，而设备布局则不然。差异在哪里？

可绘制的 XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:width="125dp"
        android:height="125dp"
        android:gravity="center"
        >
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="oval"
            >
            <solid android:color="#FD91B5" />

            <!--
            <stroke
                android:width="10dp"
                android:color="#" />
                -->
        </shape>
    </item>

    <item
        android:gravity="center"
        android:width="26dp"
        android:height="44dp"
        android:drawable="@drawable/kiosk_microphone"
        />

</layer-list>

查看 XML（查找 ImageButton）

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
    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:background="@drawable/kiosk_bg_default_view">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:text="Close"
        android:id="@+id/kiosk_close_button"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="false"
        android:layout_alignParentTop="true" />

    <ImageButton
        style="@style/Base.Widget.AppCompat.ActionButton"
        app:layout_widthPercent="34%"
        app:layout_heightPercent="34%"
        android:scaleType="fitCenter"
        android:src="@drawable/kiosk_record_circle"
        android:id="@+id/kiosk_record_button"
        app:layout_marginTopPercent="33%"
        app:layout_marginLeftPercent="23%"

        />

    <LinearLayout
        app:layout_marginTopPercent="10%"
        app:layout_marginLeftPercent="5%"
        android:orientation="vertical"
android:background="@android:color/darker_gray"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="20%"
        >


        <me.grantland.widget.AutofitTextView
            android:text="3:45 PM"
            android:textSize="45sp"
            android:textColor="#B9CFDF"
            android:id="@+id/time_textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:maxLines="1"
            android:layout_weight="1"
            />
        <me.grantland.widget.AutofitTextView
            android:text="Monday, December 15th, 2016"
            android:textSize="10sp"
            android:textColor="#B9CFDF"
            android:id="@+id/date_textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:maxLines="1"
            android:layout_weight="3"
            />
    </LinearLayout>

    <LinearLayout
        app:layout_widthPercent="25%"
        app:layout_heightPercent="20%"
        app:layout_marginTopPercent="10%"
        app:layout_marginLeftPercent="60%"

        android:orientation="vertical"
        android:background="@android:color/darker_gray"
        >

        <me.grantland.widget.AutofitTextView
            android:text="25 deg"
            android:textSize="45sp"
            android:textColor="@android:color/white"
            android:id="@+id/weather_textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:maxLines="1"
            android:gravity="center"
            />
        <me.grantland.widget.AutofitTextView
            android:text="Island Park, NY"
            android:textSize="10sp"
            android:textColor="@android:color/white"
            android:id="@+id/location_textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:gravity="center"
            android:maxLines="1"
            />
    </LinearLayout>
</android.support.percent.PercentRelativeLayout>

我想要这个

但我明白了

Answer 1

circularbutton.xml 在你的drawable中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
    <shape android:shape="oval">
        <solid android:color="#FD91B5"/>
    </shape>
</item>
<item android:state_pressed="true">
    <shape android:shape="oval">
        <solid android:color="#FD91B9"/>
    </shape>
</item>

根据您的意愿编辑 Pressed State 的颜色。

将circularbutton.xml 添加到您的ImageView

<ImageButton
    style="@style/Base.Widget.AppCompat.ActionButton"
    app:layout_widthPercent="34%"
    app:layout_heightPercent="34%"
    android:scaleType="fitXY"
    android:src="your_image"
    android:background="@drawable/circularbutton"
    android:id="@+id/kiosk_record_button"
    app:layout_marginTopPercent="33%"
    app:layout_marginLeftPercent="23%"
 />

如果scaleType不起作用，可以申请padding将图标变小。

Answer 2

做类似的事情：

android:width="125dp"
android:height="125dp"

还有：

android:width="26dp"
android:height="44dp"

在按钮上：

android:layout_height="60dp"

注定会适得其反，因为它在不同的设备上看起来不一样。特别是如果您尝试将几个不同的项目组合在一起，每个项目都有一些像这样的随机值。这是由于 Android 设备的屏幕尺寸和屏幕密度存在显着差异。您可以让它在一个屏幕上正常工作，但在其他屏幕上看起来完全不同。

对于这种事情，由于你基本上需要一个图标，你可以使用一个可绘制的或 SVG 文件。

编辑

作为替代解决方案，我考虑使用this SVG 作为imageButton 的src，并且按钮应具有自定义圆形形状，如this answer。