Android - 图像按钮比例

Android - Image Button Scale

提问by mFeinstein

I am trying to fit an image inside an ImageButtonfor testing but the way the ImageButtonbehaves is not as expected.

我正在尝试将图像放入ImageButton用于测试的图像，但其ImageButton行为方式并不符合预期。

initially, I made a 988x89pixels PNGimage and placed it inside an ImageButton, which is in a 7inches 1024x600pixels emulated screen. The ImageButtonis 988dp x 89dp, I know dp is not the same as pixels, but for this resolution I expected the image to scale itself reasonably to occupy most of the ImageButton. Also I changed to px instead of dp for testing and it made no difference.

最初，我制作了一个988x89像素的PNG图像并将其放置ImageButton在一个 7 英寸1024x600像素模拟屏幕中。该ImageButton是988dp X 89dp，我知道DP是不一样的像素，但对于这个分辨率我所期望的图像本身的合理扩展到占据大部分ImageButton。此外，我更改为 px 而不是 dp 进行测试，并没有什么区别。

But instead the ImageButtonmade the image inside it VERY small (the blue lines are the ImageButtonbounds and the green line is a center align indication).

但是相反，它ImageButton使里面的图像非常小（蓝线是ImageButton边界，绿线是中心对齐指示）。

so question #1: Why does the ImageButtonmake an image as big as this so small, when it could fill most of the screen, even with the ImageButtonsize being very wide?

所以问题＃1：为什么ImageButton即使ImageButton尺寸非常宽，它也可以填满大部分屏幕，为什么要制作这么大的图像？

So to overcome this, I selected adjustViewBoundswhich made no difference, at all, which brings question #2: Why? Isn't the adjust view bounds supposed to adjust the view bounds?

所以为了克服这个问题，我选择adjustViewBounds了完全没有区别的，这带来了问题 #2：为什么？调整视图边界不应该调整视图边界吗？

The code so far is:

到目前为止的代码是：

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

So later I changed scaleTypeto fitCenterand the image became:

所以后来我改成scaleType了fitCenter，图像变成了：

Which is weird for me as well, since the ImageButtonhas the same aspect ratio as the image, so I would expect it to fit 100%, but it's not fitting (there is a gap in the width in both sides of the image).

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

So later I changed scaleTypeto fitXYand I got my final result:

所以后来我改成scaleType了fitXY，我得到了我的最终结果：

Which appears to be the expected image after all (comparing the image by fitXYto the image of fitCenterin Photoshop shows that the fitCenterimage is slightly oval, but it can't be shown here, which is expected since the width isn't matching the image as the height does).

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

So my general question is (#3): What's the right way for fitting an Image in Android, and to expect it to have it's regular size in the screen, and why is the scaling so messy and am I doing it wrong?

所以我的一般问题是（#3）：在 Android 中拟合图像的正确方法是什么，并期望它在屏幕上具有常规尺寸，为什么缩放如此混乱，我做错了吗？

I know there are screen sizes issues and dp and etc. but the scaling isn't behaving in a controlled way, fitCentermakes the image oval, and fitXYis too much dependent of me setting the right image ratio on XY, so I wonder if I am making something wrong and how it's supposed to be the right way.

我知道存在屏幕尺寸问题和 dp 等问题，但缩放没有以受控方式运行，fitCenter使图像呈椭圆形，并且fitXY过于依赖我在 XY 上设置正确的图像比例，所以我想知道我是否是做错了什么以及它应该如何是正确的。

Final XML code:

最终的 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" />

回答by Kailas

That's a good try, you are trying to go deeper into the android implementations.

这是一个很好的尝试，您正在尝试更深入地了解 android 实现。

Ans #3:

答案 #3：

At first providing exact size as height and width is not a good practice in android. If you wish to know why, the reason would be simply it will try to squeeze/expand the image to the size specified by you in the height and width params. Always wrap_contentis the preferred Parameter so that the OS will automatically adjust depending upon the screen size.Hence you need to modify as:

首先提供精确的尺寸作为高度和宽度在 android 中不是一个好习惯。如果您想知道原因，原因很简单，它会尝试将图像压缩/扩展到您在高度和宽度参数中指定的大小。Alwayswrap_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" />

Ans #1 :

答案#1：

Why does the ImageButton make an image as big as this so small, when it could fill most of the screen, even with the ImageButton size being very wide?

为什么 ImageButton 能把这么大的图像弄得这么小，但它可以填满大部分屏幕，即使 ImageButton 尺寸非常宽？

The answer is is similar to the above mentioned. Your Image size will be much lesser than that the Android OS calculated depending on your mentioned size, taking device resolution into consideration. Use the http://coh.io/adpi/(or http://density.brdrck.me/) site to make it simple to calculate. Always take the mdpi as standard or base. Suppose your image size is 988X89 in mdpi, it will be:

答案与上述类似。考虑到设备分辨率，您的图像尺寸将远小于 Android 操作系统根据您提到的尺寸计算出的尺寸。使用http://coh.io/adpi/（或http://density.brdrck.me/）站点来简化计算。始终将 mdpi 作为标准或基础。假设您的图像大小在 mdpi 中为 988X89，它将是：

Now, it is as if you are trying to view an image of 988px X 89px on an xhdpi screen where the Android Os calculated the image size as 1976px X 178px, which is way larger than your given image size of 988px X 89px. that's why you get small image with most area white.

现在，就好像您试图在 xhdpi 屏幕上查看 988px X 89px 的图像，其中 Android Os 计算图像大小为 1976px X 178px，这比您给定的图像大小 988px X 89px 大得多。这就是为什么你会得到大部分区域为白色的小图像。

How to correct it?Go through the Android specifications to support different densities screens. this requires you to design images specifically for hdpi, mdpi, xhdpi and put them in appropriate folders of:

如何纠正？通过 Android 规范来支持不同密度的屏幕。这需要您专门为 hdpi、mdpi、xhdpi 设计图像并将它们放在以下适当的文件夹中：

 MyProject/
     res/
       drawable-xhdpi/
           awesomeimage.png
       drawable-hdpi/
           awesomeimage.png
       drawable-mdpi/
           awesomeimage.png
       drawable-ldpi/
           awesomeimage.png

Ref : http://developer.android.com/training/multiscreen/screendensities.htmlfor more details

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

回答by Wasim Ahmed

On activity Creat..you can get the screen resolution...and resize the image according to the screen Widht and Height..and set the image ..In this way your ratio will be same on every type of devices ..

在活动创建..你可以获得屏幕分辨率......并根据屏幕宽度和高度调整图像大小......并设置图像......这样你的比例在每种类型的设备上都是相同的......

to resize images..: 1. Get screen width and height 2.resize image acording to screen resolution 3.set Image to the view

调整图像大小..: 1. 获取屏幕宽度和高度 2. 根据屏幕分辨率调整图像大小 3. 将图像设置为视图

回答by Hyman Pickering

You should also check if there is any padding set around your imageButton, I created one that looked very similar to use and although fitXY worked, changing the size of the image became very confusing error-prone. However I then realized that there was 100p padding around all of the image hence the border being 100 dp away at each edge of the image.

您还应该检查 imageButton 周围是否有任何填充设置，我创建了一个看起来与使用非常相似的填充，尽管 fitXY 有效，但更改图像的大小变得非常混乱并且容易出错。然而，我随后意识到所有图像周围都有 100p 填充，因此边界在图像的每个边缘都相距 100 dp。