Android的 - 图像按钮秤 [英] Android - Image Button Scale

问题描述

我试图装进一个的ImageButton 进行测试，但的ImageButton 的行为方式是不一样的图像的预期。

首先，我做了一个 988x89 像素的 PNG 图片，放在里面的的ImageButton ，这是一个7英寸 1024×600 像素的模拟画面。该的ImageButton 是 988dp x 89dp ，我知道DP是不一样的像素，但对于这一决议我预计的形象相当规模本身占据大部分的ImageButton 的。此外，我改为PX，而不是DP进行测试，它并没有区别。

但不是的ImageButton 生成的图像里面非常小（蓝色线是的ImageButton 边界和绿线是中心对齐指示）。

这样的问题1：为什么的ImageButton 使图像一样大，因为这这么小，当它可以填补大部分屏幕，即使在的ImageButton 尺寸是非常宽？

因此​​，要解决这个问题，我选择了 adjustViewBounds 这没有什么区别，在所有的，这带来的问题＃2：为什么？是不是应该调整调整视图边界视图界限？

  

在code到目前为止是：

 ＆LT;的ImageButton
        机器人：layout_width =988dp
        机器人：layout_height =89dp
        机器人：ID =@ + ID / ibTest
        机器人：SRC =@可绘制/ image_top_test
        机器人：layout_centerHorizo​​ntal =真
        机器人：adjustViewBounds =真
        机器人：cropToPadding =假
        机器人：layout_below =@ + ID / hlTopBar
        机器人：后台=＃00000000/＆GT;
 

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

这是奇怪的为我好，因为的ImageButton 具有相同的高宽比的形象，所以我希望它适合100％，但它不是件（有在图象两侧的宽度的间隙）。

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

这似乎是毕竟预期的图像（图像通过 fitXY 比较 fitCenter 的形象Photoshop中表明 fitCenter 图像是略微椭圆形的，但它不能在这里示出，这是意料之中的，因为随着高度确实的宽度不相匹配的图像）。

所以我一般的问题是（＃3）：什么是正确的方式在机器人装配图像，并期望它有它的屏幕正常大小，为什么比例这么乱，我是做错了？

我知道有屏幕尺寸问题和DP等，但比例并不表现在受控制的方式， fitCenter 使得图像椭圆形的，而 fitXY 实在是太多了我的依赖设置于XY右图像比例，所以我不知道如果我做一些错误的，它是如何应该是正确的方式。

  

最终的XML code：

 ＆LT;的ImageButton
        机器人：layout_width =988dp
        机器人：layout_height =89dp
        机器人：ID =@ + ID / ibTest
        机器人：SRC =@可绘制/ image_top_test
        机器人：layout_centerHorizo​​ntal =真
        机器人：adjustViewBounds =真
        机器人：cropToPadding =假
        机器人：layout_below =@ + ID / hlTopBar
        机器人：后台=＃00000000
        机器人：scaleType =fitXY/＆GT;
 

解决方案

这是一个很好的尝试，你想更深入的Andr​​oid的实现。

答3：

起初，提供精确的尺寸，高度和宽度是不是在Android的一个很好的做法。如果你想知道为什么，原因是简单的，它会尝试挤压/扩大图像由在高度和宽度PARAMS指定的大小。永远的 WRAP_CONTENT 的是preferred参数，以便根据需要来修改屏幕size.Hence操作系统会自动调整：

 ＆LT;的ImageButton
    机器人：layout_width =WRAP_CONTENT
    机器人：layout_height =WRAP_CONTENT
    机器人：ID =@ + ID / ibTest
    机器人：SRC =@可绘制/ image_top_test
    机器人：layout_centerHorizo​​ntal =真
    机器人：adjustViewBounds =真
    机器人：cropToPadding =假
    机器人：layout_below =@ + ID / hlTopBar
    机器人：后台=＃00000000
    机器人：scaleType =fitXY/＆GT;
 

答1：

为何的ImageButton使图像一样大，因为这这么小，当它可以填补大部分屏幕，即使在ImageButton的大小是非常宽？

答案是类似于上述。你的图像尺寸会比Android操作系统取决于您提到的大小来计算，考虑设备的分辨率考虑少得多。使用 http://coh.io/adpi/ 网站，使之易于计算。始终以MDPI为标准。该假设你的图像大小为988X89在MDPI，这将是：

现在，这是因为如果你想查看988px X 89px图片在那里的Andr​​oid操作系统计算的图像大小为1976px X 178px，这是远远低于988px X 89px你给定的图像大小的xhdpi屏幕。这就是为什么你得到大部分地区的白色小图像。

如何纠正它吗？ 通过Android的规范，以支持不同的密度的屏幕。这需要你设计的图像专为华电国际，MDPI，xhdpi，把他们放在适当的文件夹：

  MyProject的/
     RES /
       绘制-xhdpi /
           awesomeimage.png
       绘制，华电国际/
           awesomeimage.png
       绘制，MDPI /
           awesomeimage.png
       绘制-LDPI /
           awesomeimage.png
 

编号：<一href="http://developer.android.com/training/multiscreen/screendensities.html">http://developer.android.com/training/multiscreen/screendensities.html了解更多详情

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

initially, I made a 988x89 pixels PNG image and placed it inside an ImageButton, which is in a 7inches 1024x600 pixels 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.

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

so question #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?

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

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 scaleType to fitCenter and the image became:

Which is weird for me as well, since the ImageButton has 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).

So later I changed scaleType to fitXY and I got my final result:

Which appears to be the expected image after all (comparing the image by fitXY to the image of fitCenter in Photoshop shows that the fitCenter image 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).

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?

I know there are screen sizes issues and dp and etc. but the scaling isn't behaving in a controlled way, fitCenter makes the image oval, and fitXY is 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.

Final XML code:

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

解决方案

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

Ans #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_content is the preferred Parameter so that the OS will automatically adjust depending upon the screen size.Hence you need to modify as:

<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 :

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?

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/ site to make it simple to calculate. Always take the mdpi as standard. The suppose your image size is 988X89 in mdpi, it will be:

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.

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:

 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.html for more details

这篇关于Android的 - 图像按钮秤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！