如何阻止GridLayout溢出(How can I stop GridLayout overflowing)

 我正在开发我的第一个Android应用程序。 它是游戏tictactoe的复制品。 该应用程序的后端工作正常。 用户界面也很完美。 我的问题是UI的显示。 该应用程序由9个3x3阵型的正方形组成。 当选择一个正方形时，它将被当前的玩家正方形（drawable）替换。 我一直在使用Nexus 5仿真器进行测试。 我很满意。 作为最终测试，我使用Nexus one仿真器运行应用程序，3x3网格不正确。 最初我尝试使用toRightOf，toLeftOf，below，above，alignBaseline，alignTop等XML布局代码在LinearLayout中显示3x3网格，以使网格正确放置。 在Nexus one仿真器中打开时，正方形重叠（我假设正方形的大小太大）但在Nexus 5仿真器中看起来很好。 我将布局更改为GridLayout，它修复了重叠但网格现在溢出了屏幕。 您可以在http://imadsayed.com/GridLayout_Overflowing.html或此处查看我的应用的用户界面; Nexus One上的GridLayout溢出 （左侧的模拟器是Nexus 5，其中UI正确，右侧的模拟器是Nexus One，显示溢出，您可能需要向下滚动才能看到）。 通过在线发现的其他建议，我尝试将GridLayout的每一行放在LinearLayout中，并将它们对齐在1x3 GridLayout中。 这会使网格不溢出，但网格的最后一列比前两列更小。 所以我撤消了这个，现在坐在一个满溢的网格。 代码如下所示： 
 
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center">

    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rowCount="3"
        android:columnCount="3"
        >

        <!-- tl -->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tl"
            android:src="@drawable/square"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_rowWeight="1"
            android:contentDescription="@null"
            />
    </GridLayout>
</LinearLayout>
 
 我只粘贴了一个正方形（ImageView），其中有9个在我的代码中但除了行号和列号之外都是相同的。 评论“tl”适用于topLeft。 这是左上角的广场。 整个GridLayout位于LinearLayout内，因此我可以将网格置于屏幕中心，如Nexus 5仿真器中所示。 那么我怎样才能创建UI，这样如果它溢出，那么它可以重新调整网格及其子节点（正方形），使它们都适合屏幕？ 类似的帖子只讨论GridLayout中的两列，通常其中一列有文字，因此不相关。 

I am developing my first android app. It is a replica of the game tictactoe. The back end of the app works perfectly. The UI also works perfectly. My problem is with the display of the UI. The app consists of 9 squares in a 3x3 formation. When a square is selected it will be replaced by the current player square (drawable). I have been testing it using the Nexus 5 emulator. I am happy with everything. As a final test I ran the app using the Nexus one emulator and the 3x3 grid was not correct. Initially I tried displaying the 3x3 grid in a LinearLayout using XML layout code of toRightOf, toLeftOf, below, above, alignBaseline, alignTop etc to have the grid sit correctly. When opening this in the Nexus one emulator the squares were overlapping (I assume the size of the squares is too big) but looks fine in the Nexus 5 emulator. I changed the layout to GridLayout which fixed the overlapping but the grid now overflows of the screen. You can see the UI of my app at http://imadsayed.com/GridLayout_Overflowing.html or here; GridLayout Overflow on Nexus One(The emulator on the left is of a Nexus 5 where the UI is correct and the emulator on the right is of a Nexus One which shows the overflow, you may need to scroll down to see). Through other suggestions found online Ive tried putting each row of the GridLayout in a LinearLayout and aligning them in a 1x3 GridLayout. This produces the Grid not overflowing but the last column of the Grid has smaller squares than the first two Columns. So I undone this and am now sitting with an overflowing Grid. The code looks like this:
 
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center">

    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rowCount="3"
        android:columnCount="3"
        >

        <!-- tl -->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tl"
            android:src="@drawable/square"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_rowWeight="1"
            android:contentDescription="@null"
            />
    </GridLayout>
</LinearLayout>
 
I only pasted one square above (ImageView), there are 9 of them in my code but all the same except for the row and column numbers. The comment "tl" is for topLeft. It is the top left square. The whole GridLayout is within a LinearLayout so that I can centre the Grid on the screen as seen in the Nexus 5 emulator. So how can I create the UI so that if it overflows then it can re-adjust the Grid and its children (the squares) so they all fit within the screen? Similar posts only talk about two columns in a GridLayout and usually one of them has text so not relevant.

原文：https://stackoverflow.com/questions/37676181