在不同大小的设备ImageButtons [英] ImageButtons on different sized devices
问题描述
据我可以告诉（和纠正我，如果我错了），如果你想有一个好看（有很好的抗锯齿）的多尺寸设备的图形按钮，你必须创建不同的一组不同大小的图像，并将图像中的不同目录的集合内。我希望找到一个样例显示到底是哪设置目录的使用和什么的相对大小需要为这些目录。
As far as I can tell (and correct me if I'm wrong), if you want to have graphical buttons that look good (with nice anti-aliasing) on multiple sized devices, you have to create different a set of different sized images and place the images inside a collection of different directories. I am looking to find a worked example showing exactly which set of directories to use and what the relative sizes need to be for those directories.
顺便说一句，当我说ImageButtons，我的意思是含图片代替文字 - 所以9patch图像不会做的伎俩
By the way, when I say ImageButtons, I mean containing an image instead of text - so 9patch images will not do the trick.
编辑：一件事，尤其是混淆我的是，我经常看到的例子（如chuck258的答案），人们使用不同的屏幕的密度的...但如果你与它们的宽度和放大器按钮;高度调整为密度，然后在屏幕的部分采取了您的按钮可以在各种不可控的方式各不相同，如果你有一个高密度的，但是小尺寸的屏幕，那么你的按钮就会过大。
One thing that particularly confuses me is the fact that I very often see examples (e.g. chuck258's answer) where people employ different screen densities... but if you make buttons with their width & height tuned for densities, then the fraction of the screen taken up with your button can vary in all sorts of uncontrolled ways, if you have a high-density-but-small-sized screen, then your buttons will be overly large.
编辑：继我最后一次编辑，也许我应该更具体的了解我想要什么？让我们说，我希望有一个方形的ImageButton即约10％（我会接受从8％到13％（纵向只）屏幕宽度的变化）......我会做出什么尺寸的图像，他们将在什么目录？
Further to my last edit, maybe I should be more specific about what I want... let us say that I want a square ImageButton that is approximately 10% (I'll accept a variation from 8% to 13%) of the width of the (portrait only) screen ... what size images would I make and what directories would they be in?
编辑：我收到了消息，如果你有更多的屏幕空间，那么标准的事情，就是让图标占用了屏幕的小部分。 presumably这是因为让图标变得非常大，使他们看起来相当的玩具般，或幼稚。但事实是，我正在做游戏应用程序为孩子们！所以，这正是我想要的。
I'm getting the message that if you have more screen real estate, then the standard thing to do, is to allow the icons to take up a smaller fraction of the screen. Presumably this is because allowing icons to become very large, makes them look rather toy-like, or childish. BUT the thing is, I'm making game apps for children! So this is exactly what I want.
推荐答案
首先你需要了解屏幕像素密度和屏幕尺寸之间的差别。
First of all you need to understand the difference between screen density and screen size.
屏幕尺寸的物理尺寸，测量屏幕的对角线。机器人组的所有实际的屏幕尺寸分为四个广义的大小：小，正常，大和超大。 一个电话可能具有4.9英寸的屏幕尺寸这将被认为是正常的，这两个的Nexus 7（旧的从2012年和2013年的新的）具有7:3的屏幕大小，这是大的，Nexus的10具有一个屏幕大小10，这就是超大。
The screen size is the physical size, measured as the screen's diagonal. Android groups all actual screen sizes into four generalized sizes: small, normal, large, and extra large. A phone might have a screen size of 4.9 inch which would be considered normal, both Nexus 7 (the old one from 2012 and the new one from 2013) have a screen size of 7" which is large, the Nexus 10 has a screen size of 10" and that's extra large.
另一方面屏幕密度是屏幕的物理区域内的像素的数量;通常被称为分辨率（每英寸点数）。例如，一个低密度屏幕具有给定的物理区域内较少的像素相比，正常或高的密度屏幕。 为简单起见，Android的组中的所有实际的屏幕密度分为四个广义密度：低，中，高，超高（加上新xxhdpi）。 旧的Nexus 7具有相同的屏幕尺寸为一个新的Nexus 7，但旧有1280×800是216 dpi或华电国际的分辨率，而新的具有1920×1200像素是323 dpi或xhdpi的分辨率（像素越多内相同的物理面积是指以dpi更高像素密度）。
The screen density on the other hand is the quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch). For example, a "low" density screen has fewer pixels within a given physical area, compared to a "normal" or "high" density screen. For simplicity, Android groups all actual screen densities into four generalized densities: low, medium, high, and extra high (plus the new xxhdpi). An old Nexus 7 has the same screen size as a new Nexus 7 but the old one has a resolution of 1280x800 which is 216 dpi or hdpi while the new one has a resolution of 1920×1200 pixels which is 323 dpi or xhdpi (more pixels within the same physical area means higher pixel density in dpi).
在绘制文件夹中的图像将有小，中，大和X大屏幕相同的物理尺寸，如果屏幕上有相同的屏幕像素密度。因为屏幕具有不同的尺寸，图像将占用屏幕的不同部分。在小屏幕上会占用大量的屏幕比上个更大的作用。
An image in the drawable folder will have the same physical size on small, normal, large and x-large screens if the screens have the same screen density. Because the screens have different sizes the image will take up a different fraction of the screen. On small screens it will take up a larger part in percentage than on a large screen.
如果同一图像在屏幕大小的一个文件夹（可绘制小，绘制正常，绘制大型，绘制-XLARGE）什么都不会改变，但你可以决定把图像的放大版本drawable- XLARGE。在这种情况下，图像将是较大的一个上的Nexus 10比上一个新的Nexus 7（两者都有xhdpi像素密度）。
Nothing will change if the same image is in one of the screen size folders (drawable-small, drawable-normal, drawable-large, drawable-xlarge) but you can decide to put a larger version of the image in drawable-xlarge. In that case the image would be larger on a Nexus 10 than on a new Nexus 7 (both have xhdpi pixel density).
如果屏幕有不同的像素密度相同的图像看起来不同，但。该图像是相比，MDPI屏幕的xhdpi屏幕上的一半大小（因为xhdpi屏幕上有大约两倍的像素密度）：
http://developer.android.com/images/screens_support/density-test -bad.png
If the screens have a different pixel density that same image will look differently though. The image would be half the size on an xhdpi screen compared to an mdpi screen (because the xhdpi screen has approximately double the pixel density):
http://developer.android.com/images/screens_support/density-test-bad.png
在情况下，你通常希望它具有相同的大小不同的屏幕上的图标。这就是为什么如菜单图标MDPI屏幕是32×32和那些xhdpi屏幕为64×64，无一不是在适当的绘制文件夹（可绘制-MDPI和绘制-xhdpi）：
http://developer.android.com/images/screens_support/density-test -good.png
In case of an icon you usually want it to have the same size on different screens. That's why e.g. menu icons for mdpi screens are 32x32 and those for xhdpi screens are 64x64 and both are in the appropriate drawable folder (drawable-mdpi and drawable-xhdpi):
http://developer.android.com/images/screens_support/density-test-good.png
现在，当你使用的像素密度，当你使用的屏幕尺寸绘制的文件夹？
Now when do you use the pixel density and when do you use the screen size drawable folders?
像素密度文件夹中使用，如果图像应该有不同的屏幕密度的屏幕相同的物理尺寸通常是你想要的。如果使用同样的图像一老一新的Nexus 7将有不同的尺寸即使在屏幕上具有相同的物理尺寸和这不是你想要的。因此，使用密度相关的图像是必要的。
Pixel density folders are used if the image should have the same physical size on screens with different screen densities which is usually what you want. If you use the same image for an old and a new Nexus 7 it would have a different size even as the screens have the same physical size and that's not what you want. So using density dependent images is imperative.
屏幕大小的文件夹是用来对小，中，大和X大屏幕不同的物理尺寸。如果我有一个网格导航与6个图标在主屏幕上，我并不想利用额外的屏幕空间上更大的屏幕（例如，通过增加更多的图标），那么我会为小屏幕的小图像而对于大屏幕大图像。 你还必须提供对屏幕大小取决于图像的顶部密度取决于图像如前所述（例如旧的Nexus 7与新的Nexus 7）。
Screen size folders are used if you want an image to have a different physical size on small, normal, large and x-large screens. If I have a grid navigation with 6 icons on the main screen and I don't want to make use of the extra screen real estate on larger screens (e.g. by adding more icons), then I would provide a small image for the small screen and a large image for the large screen. You would still have to provide density dependent images on top of the screen size dependent images as explained before (example old Nexus 7 vs. new Nexus 7).
所以理论上你就需要16个不同的资源，为相同的图像（4屏幕尺寸在4的屏幕密度，或与新的xxhdpi密度甚至5密度 - > 20资源）。
当然现在没有人愿意特别是如果你有大量的图片来创建的资源。
一种方法是使用控制板正如有人曾建议：
http://developer.android.com/about/dashboards/index.html#Screens
并挑选最常用的组合，这是小/ LDPI，正常/ MDPI，正常/华电国际和正常/ xhdpi（所有设备的81％）。这样，你搞垮资源，只是4
另一种方法是提供资源，无论是屏幕尺寸还是屏幕像素密度（同样只有4个资源需要），然后做code一定比例。
So in theory you would need 16 different resources for the same image (4 screen sizes in 4 screen densities or with the new xxhdpi density even 5 densities -> 20 resources).
Now of course no one wants to create that many resources especially if you have a lot of images.
One approach is to use the Dashboard as someone has suggested:
http://developer.android.com/about/dashboards/index.html#Screens
and pick the most commonly used combinations which are small/ldpi, normal/mdpi, normal/hdpi and normal/xhdpi (81% of all devices). That way you bring down the resources to just 4.
Another approach is to provide resources for either screen size or for screen density (again only 4 resources needed) and then do some scaling in code.
如果您有屏幕像素密度相关的资源，那么你会用如这 http://stackoverflow.com/a/5016350/534471 缩放图像下来（再也没有起来）。
If you have screen density dependent resources then you would use e.g. this http://stackoverflow.com/a/5016350/534471 to scale the images down (never up).
如果您的屏幕尺寸相关的资源，那么你可以使用此的http：// developer.android.com/reference/android/util/DisplayMetrics.html 以缩放图像向下
If you have screen size dependent resources then you would use this http://developer.android.com/reference/android/util/DisplayMetrics.html to scale the images down.
有一个很好的例子这一切都在这里（包括源$ C $ C）： 的https://www.captechconsulting.com/blog/steven-byle/understanding-density-independence-android
There's a nice example for all this here (including source code): https://www.captechconsulting.com/blog/steven-byle/understanding-density-independence-android
现在对你的具体问题，你可以在文件夹绘制使用一个通用的图像。该图像的大小应使其不必是按比例放大的（因为这会很难看）。你这样定义的布局按钮：
Now for you specific problem you could use one generic image in the folder drawable. The size of that image should be so that it won't have to be up-scaled (because that would look ugly). You define the button in the layout like this:
<ImageButton
android:id="@+id/myButton"
android:src="@drawable/myDrawable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
/>
连同这块$ C C按钮鳞$到屏幕的10％的
Together with this piece of code the button scales to 10% of the screen:
Display display = getWindowManager().getDefaultDisplay();
Point screenSize = new Point();
display.getRealSize(screenSize);
int size = Math.min(screenSize.x, screenSize.y);
int buttonSize = Math.round(size * 0.1f);
ImageButton button = (ImageButton) findViewById(R.id.myButton);
button.setMaxWidth(buttonSize);
button.setMaxHeight(buttonSize);
如何大应原图像呢？
一台Nexus 10有可能在目前所有的Android设备的屏幕分辨率最高。 1600像素将转化为它的xhdpi显示3200密度独立的像素。 3200 10％是320。如果您使用的是最高320x320的图像，那么你会得到所有现有设备的好成绩。
有一个问题，以这种方式虽然。
最高320x320是pretty的大（可能是24/32位色深），因此您可能会遇到内存问题。如果您提供的密度相同的资源依赖绘制文件夹，你可以降低对华电国际，MDPI和LDPI设备内存占用：
How large should the original image be?
A Nexus 10 has probably the highest screen resolution of all Android devices at the moment. The 1600 pixels will translate to 3200 density independent pixels on its xhdpi display. 10% of 3200 is 320. If you use a 320x320 image then you will get a good result on all existing devices.
There's a catch to this approach though.
320x320 is pretty large (possibly 24/32 bit color depth) and thus you might run into memory issues. If you provide the same resource in the density dependent drawable folders you can lower the memory footprint for hdpi, mdpi and ldpi devices:
- 绘制-xhdpi：320x320起
- 绘制 - 华电国际：240x240
- 绘制-MDPI：160x160的
- 绘制-LDPI：120×120
屏幕尺寸绘制文件夹可用于进一步改善这个（较小的屏幕需要更小的图像），但是你必须提供16或20的资源如前所述。最后，它的内存占用量/速度之间的权衡一边和可维护性/时间来创建对对方的资源/ APK大小。
The screen size drawable folders could be used to further improve this (smaller screens need smaller images) but then you'll have to provide the 16 or 20 resources as mentioned before. In the end it's a trade-off between memory footprint / speed on one side and maintainability / time to create the resources / apk size on the other side.
这篇关于在不同大小的设备ImageButtons的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
