Android - 图像按钮比例

mFe*_*ein 22 user-interface android image

我试图将图像放入一个ImageButton用于测试的内容,但ImageButton行为的方式并不像预期的那样.

最初,我制作了一个988x89像素的PNG图像并将其放置ImageButton在一个7英寸1024x600像素模拟屏幕内.这ImageButton988dp x 89dp,我知道dp和像素不一样,但是对于这个分辨率我预计图像会合理地缩放以占据大部分像素ImageButton.此外,我改为px而不是dp进行测试,它没有任何区别.

但相反,ImageButton使其内部的图像非常小(蓝线是ImageButton边界,绿线是中心对齐指示).

测试图1

所以问题#1:为什么这样的ImageButton图像如此小,当它可以填满大部分屏幕时,即使ImageButton尺寸非常宽?

所以为了克服这个问题,我选择adjustViewBounds哪个没有任何区别,这带来了问题#2:为什么?调整视图边界是不是应该调整视图边界?

到目前为止的代码是:

<ImageButton
        android:layout_width="988dp"
        android:layout_height="89dp"
        android:id="@+id/ibTest"
        android:src="@drawable/image_top_test"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="true"
        android:cropToPadding="false"
        android:layout_below="@+id/hlTopBar"
        android:background="#00000000" />
Run Code Online (Sandbox Code Playgroud)

所以后来我改为scaleType,fitCenter图像变成了:

测试图像2

这对我来说也很奇怪,因为它ImageButton具有与图像相同的纵横比,所以我希望它适合100%,但它不合适(图像两侧的宽度存在间隙).

所以后来我换scaleTypefitXY,得到了我的最终结果:

在此输入图像描述

毕竟这似乎是预期的图像(将fitXY图像与fitCenterPhotoshop中的fitCenter图像进行比较显示图像略呈椭圆形,但此处无法显示,这是预期的,因为宽度与图像不匹配高度确实).

所以我的一般问题是(#3):什么是在Android中拟合图像的正确方法,并期望它在屏幕上具有常规大小,为什么缩放如此混乱,我做错了吗?

我知道有屏幕尺寸问题和dp等,但缩放不是以受控方式运行,fitCenter使图像椭圆形,并且fitXY太依赖于我在XY上设置正确的图像比率,所以我想知道我是不是做错了什么以及它应该是正确的方式.

最终的XML代码:

<ImageButton
        android:layout_width="988dp"
        android:layout_height="89dp"
        android:id="@+id/ibTest"
        android:src="@drawable/image_top_test"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="true"
        android:cropToPadding="false"
        android:layout_below="@+id/hlTopBar"
        android:background="#00000000"
        android:scaleType="fitXY" />
Run Code Online (Sandbox Code Playgroud)

Kai*_*las 30

这是一个很好的尝试,你正试图深入到Android实现.

答案#3:

首先提供精确的尺寸作为高度和宽度在Android中不是一个好习惯.如果您想知道原因,原因很简单,它会尝试将图像挤压/扩展到您在高度和宽度参数中指定的大小.始终wrap_content是首选参数,以便操作系统根据屏幕大小自动调整.您需要修改为:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/ibTest"
    android:src="@drawable/image_top_test"
    android:layout_centerHorizontal="true"
    android:adjustViewBounds="true"
    android:cropToPadding="false"
    android:layout_below="@+id/hlTopBar"
    android:background="#00000000"
    android:scaleType="fitXY" />
Run Code Online (Sandbox Code Playgroud)

答案#1:

为什么ImageButton会使图像变得如此之小,以至于它可以填充大部分屏幕,即使ImageButton尺寸非常宽?

答案与上面提到的类似.根据您提到的尺寸,考虑到设备分辨率,您的图像尺寸将远小于Android OS计算的图像尺寸.使用http://coh.io/adpi/ (或http://density.brdrck.me/)网站可以使计算变得简单.始终将mdpi作为标准或基础.假设你的图像大小是mdpi的988X89,它将是:

在此输入图像描述现在,就好像你试图在xhdpi屏幕上查看988px X 89px的图像,其中Android Os将图像大小计算为1976px X 178px,这比你给定的图像大小988px X 89px大.这就是为什么你得到大部分区域为白色的小图像.

怎么纠正呢? 通过Android规范来支持不同的密度屏幕.这要求您专门为hdpi,mdpi,xhdpi设计图像,并将它们放在适当的文件夹中:

 MyProject/
     res/
       drawable-xhdpi/
           awesomeimage.png
       drawable-hdpi/
           awesomeimage.png
       drawable-mdpi/
           awesomeimage.png
       drawable-ldpi/
           awesomeimage.png
Run Code Online (Sandbox Code Playgroud)

参考:http://developer.android.com/training/multiscreen/screendensities.html了解更多详情