Android的：如何扩大与屏幕尺寸的布局 [英] Android: how to scale a layout with screen size

问题描述

考虑这个布局（从拉到这里）：

我想了解背后的原理使这种布局规模与屏幕尺寸。为方形，自定义onMeasure功能很好地工作：

I'd like to understand the principles behind making this layout scale with screen size. For the square, a custom onMeasure function works nicely:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}

定制的ToggleButtons和下面Imagebuttons的宽度和高度应扩展以填充屏幕的其余部分，减去layout_margins，以及文本和图像内应该扩展，填补的按钮，减去填充。外边也应当。

The width and height of the custom Togglebuttons and Imagebuttons below should scale to fill the remainder of the screen, minus layout_margins, and the text and images within should scale to fill the buttons, minus padding. The outer margin should also scale.

我的第一个念头是使用相对布局位置的按钮，和layout_margin /填充属性来创造利润。不过，相对于布局和layout_margin /填充需要固定的像素值，因此它们是不可扩展的。

My first thought was to use a relative layout to position the buttons, and layout_margin/padding attributes to create margins. However, relative layouts and layout_margin/padding require fixed pixel values, so they aren't scalable.

然后我想用嵌套的线性布局与layout_weights定位按钮，和占位符意见创造利润的。虽然这些技术是可扩展的，它们不与按钮的工作，因为按钮具有许多属性（文字的大小，图像的大小，拐角半径等）需要固定像素值。此限制装置，例如，下面的XML：

I then thought of using nested linear layouts with layout_weights to position the buttons, and placeholder views to create margins. Although these techniques are scalable, they don't work with buttons, because buttons have many attributes (text size, image size, corner radius, etc.) that require fixed pixel values. This limitation means, for example, that the following xml:

<ToggleButton 
    android:layout_weight="1"
    style="@style/myButton"
    [...] />
<View 
    android:layout_weight="1"/>
<ImageButton 
    android:layout_weight="1"
    style="@style/myButton"
    [...] />

将不一定使它们之间的两个按钮，而的空间中，所有相同的宽度。这一切都取决于文本大小的按钮，图像尺寸，等等，等等。

won't necessarily make the two buttons, and the space between them, all the same width. It all depends on the text size, image size, etc. etc. of the buttons.

我已经采取了看看<一href="http://stackoverflow.com/questions/8916363/how-to-make-buttons-automatically-scale-down-when-screen-size-decrease">this问题但我觉得应该是这样一个简单的问题，一个简单的解决方案，不应该要求诉诸太多的非XML。

I've taken a look at this question but I feel there should be a simpler solution for such a simple problem, that shouldn't require resorting to too much non-XML.

推荐答案

这取决于很多自定义的数查看和的ViewGroup 要创建类。用最少数量的自定义类的实现，我能想到的会是这样的（非常类似于你所描述什么）：

It depends a lot on the number of custom View and ViewGroup classes you want to create. An implementation with the least number of custom classes that I could think of would be something like this (very similar to what you've described):

• 在自定义的FrameLayout 为最大的广场，有一个自定义的 onMeasure（）实施企及的高度，以可用宽度（你提到的这一个的话）。
• 嵌套的LinearLayout 用重量来获得所有网格按钮实例是相同的大小。

• Customized FrameLayout for the largest square, with a custom onMeasure() implementation to match the height to the available width (you mentioned this one already).
• Nested LinearLayout instances using weight to get all the grid buttons to be the same size.

大的缺点，以这种方式效率。您将需要大约36 的LinearLayout 实例创建小型9x9的网格一个较大的9x9的网格内......这是36次的纯布局开销。

The big drawback to this approach is efficiency. You would need roughly 36 LinearLayout instances to create the small 9x9 grids inside of a larger 9x9 grid...that's 36 views of pure layout overhead.

至于文字大小，有一对夫妇的方式我能想到的来处理这个问题。一种是使用 Paint.measureTextBounds（）（你可以得到油漆中的任何的TextView 做测量）来确定大小，你需要在每个按钮上的文本，他们已经测量之后。不幸的是，这将是一个有点反复的过程，因为油漆衡量一个给定的文本根据当前的设置，所以你将需要：

As far as text sizing, there are a couple ways I could think of to handle this. One would be to use Paint.measureTextBounds() (you can get the Paint object of any TextView to do the measurements) to determine what size you need to make the text in each button after they have been measured. Unfortunately this would be a somewhat iterative process because the Paint measures a given text based on its current settings, so you would need to:

1. 设置文字大小
2. 在测量范围
3. 检查高度
4. 重复，直到大小刚好适合

好消息是，你只需要做一次，只是把它应用到所有的网格按钮，但你需要等待，直到电网按钮进行测量。

The good news is you would only need to do this once and just apply it to all the grid buttons, but you would need to wait until the grid buttons are measured.

另一种选择这里将是显示图像而不是文字像的ImageView ，它可以为你缩放内容以它的规模内。你可以使用类似 TextDrawable 我写设置文本的内容作为一个形象，是可扩展的，没有质量损失

Another option here would be to display an image instead of text inside of something like ImageView, which can scale the content for you to its size. You could use something like the TextDrawable that I wrote to set text content as an image that is scalable without quality loss.

现在回到了布局。你可以争回一吨效率通过创建一个自定义的的ViewGroup 来测量并制定出电网（名字网​​格布局已经采取了... ...，它并没有完全达到这个目的，让我们把它叫做 BlockLayout ）。创建一个自定义的 BlockLayout 将让你测量每块的大小和布局9子视图在网格中有单亲，而不是4 的LinearLayout 实例。这基本上是你衡量整个广场，只是平均分配的方式相同。

Now back to the layout. You could gain back a ton of efficiency by creating a custom ViewGroup to measure and lay out the grid (the name GridLayout is already taken...and it doesn't quite serve this purpose, so let's call it BlockLayout). Creating a custom BlockLayout will allow you to measure the size of each block and lay out 9 subviews in a grid with a single parent instead of 4 LinearLayout instances. This is basically the same way that you measure the overall square, just divided evenly.

您便可以建立与布局的开销只有10个实例......就更少了整个布局，如果你可以在$ C C整个事情$成一个单一的的ViewGroup

You could then build the entire layout with only 10 instances of layout overhead...and even less if you can code the entire thing into a single ViewGroup.

基本上，更多的code，你可以写扁平化视图层次，更好的应用程序的整体运行。

Basically the more code you can write to flatten the view hierarchy, the better your application will run overall.

心连心

这篇关于Android的：如何扩大与屏幕尺寸的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！