GridLayout在小显示器上折叠 [英] GridLayout collapses on small display

问题描述

我有LinearLayout和TextView，GridLayout和另一个TextView.它可以在许多现代手机和平板电脑上正确显示，但在像Nexus S这样的小型显示器上却完全无法显示.

I have LinearLayout with TextView, GridLayout and another TextView. It is displayed correctly on many modern phones and tablets but it utterly fails on small display like Nexus S. See following pictures.

我试图减小字体大小，删除9个补丁的背景，甚至删除所有边距.当有一些边距时，我只能看到digit7.然后，我将它们最小化，我看到的第一个按钮有四行，其渲染的大小是显示的两倍.我不明白为什么，它应该有wrap_content宽度.

I tried to decrease font size, remove 9-patch background and even remove all margins. I could see just digit7 when there were some margins. Then I minimized them and I can see four lines with their first button that is rendered twice as big as display. I do not understand why, it shall have wrap_content width.

我试图将代码最小化，并用单行将其减少为GridLayout，但它仍然不适合屏幕的宽度.

I tried to minimize the code and reduced it to GridLayout with single row and it still does not fit the width of the screen.

那里发生了什么事?

更新:

• 420x800 mdpi可以工作
• 420x800 hdpi损坏
• 540x920 hdpi可以正常工作
• 720x1280 hdpi可以工作

更新2:

当字体为38sp或更大时，Nexus 5x也存在相同的问题. Studio的设计器显示正确的布局，但设备/仿真器都显示损坏的视图并出现以下错误，这很有趣:

Nexus 5x has same issues when font is 38sp or bigger. It is interesting that Studio's designer shows correct layout but both device/emulator shows corrupted view and following error:

D/android.support.v7.widget.GridLayout: vertical constraints: y1-y0>=197, y2-y1>=197, y3-y2>=197, y4-y3>=197, y4-y0<=785 are inconsistent; permanently removing: y4-y0<=785. 

calc.xml:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!--Display row-->
<TextView
    android:id="@+id/assignment"
    android:text="50 + 40 = 90"
    style="@style/Formula"
    android:focusable="false"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    tools:ignore="HardcodedText" />

<android.support.v7.widget.GridLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    app:columnCount="4"
    app:rowCount="4">

    <!-- row with 7-9,+ -->

    <Button
        android:id="@+id/digit7"
        android:text="7"
        style="@style/KeypadLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText"  />

    <Button
        android:id="@+id/digit8"
        android:text="8"
        style="@style/KeypadButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText"  />

    <Button
        android:id="@+id/digit9"
        android:text="9"
        style="@style/KeypadButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/buttonPlus"
        android:text="+"
        style="@style/KeypadRightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_rowWeight="0.5"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

    <!--row with 4-6, - -->

    <Button
        android:id="@+id/digit4"
        android:text="4"
        style="@style/KeypadLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/digit5"
        android:text="5"
        style="@style/KeypadButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/digit6"
        android:text="6"
        style="@style/KeypadButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText"  />

    <Button
        android:id="@+id/buttonMinus"
        android:text="-"
        style="@style/KeypadRightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_rowWeight="0.5"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

    <!--row with 1-3, * -->

    <Button
        android:id="@+id/digit1"
        android:text="1"
        style="@style/KeypadLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText"  />

    <Button
        android:id="@+id/digit2"
        android:text="2"
        style="@style/KeypadButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText"  />

    <Button
        android:id="@+id/digit3"
        android:text="3"
        style="@style/KeypadButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/buttonMultiply"
        android:text="\u22C5"
        style="@style/KeypadRightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_rowWeight="0.5"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

    <!--row with 0, backspace and / -->

    <Button
        android:id="@+id/digit0"
        android:text="0"
        style="@style/KeypadLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_columnWeight="1"
        app:layout_gravity="fill_horizontal"
        app:layout_rowWeight="1"
        tools:ignore="HardcodedText"  />

    <Button
        android:id="@+id/buttonBackspace"
        android:text="←"
        style="@style/KeypadButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_gravity="fill_vertical"
        app:layout_columnSpan="2"
        app:layout_rowWeight="0.5"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/buttonDivide"
        android:text=":"
        style="@style/KeypadRightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_rowWeight="0.5"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />
</android.support.v7.widget.GridLayout>

<!--row with button submit -->

<Button
    android:id="@+id/buttonSubmit"
    android:text="@string/action_next_formula"
    style="@style/KeypadNextButton"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    app:layout_gravity="fill_horizontal"/>
</LinearLayout>

样式:

<style name="Formula">
    <item name="android:textSize">@dimen/calc_button_text</item>
    <item name="android:textColor">@color/gray_35</item>
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/lcd</item>
    <item name="android:layout_marginTop">@dimen/calc_big_margin</item>
    <item name="android:layout_marginBottom">@dimen/calc_superbig_margin</item>
    <item name="android:layout_marginLeft">@dimen/calc_big_margin</item>
    <item name="android:layout_marginRight">@dimen/calc_big_margin</item>
</style>

<style name="KeypadButton" parent="@style/Widget.AppCompat.Button">
    <item name="android:textSize">@dimen/calc_button_text</item>
    <item name="android:textColor">@color/white</item>
    <!--<item name="android:background">@drawable/tl_2</item>-->
    <item name="android:layout_marginLeft">@dimen/calc_small_margin</item>
    <item name="android:layout_marginBottom">@dimen/calc_small_margin</item>
</style>

<style name="KeypadLeftButton" parent="@style/KeypadButton">
    <item name="android:layout_marginLeft">@dimen/calc_big_margin</item>
</style>

<style name="KeypadRightButton" parent="@style/KeypadButton">
    <item name="android:layout_marginRight">@dimen/calc_big_margin</item>
</style>

<style name="KeypadNextButton" parent="@style/Widget.AppCompat.Button.Colored">
    <item name="android:background">@drawable/tl_next</item>
    <item name="android:textSize">@dimen/calc_button_text</item>
    <item name="android:layout_marginTop">@dimen/calc_big_margin</item>
    <item name="android:layout_marginBottom">@dimen/calc_big_margin</item>
    <item name="android:layout_marginLeft">@dimen/calc_big_margin</item>
    <item name="android:layout_marginRight">@dimen/calc_big_margin</item>
</style>

尺寸:

<dimen name="calc_button_text">14sp</dimen>
<dimen name="calc_superbig_margin">2dp</dimen>
<dimen name="calc_big_margin">1dp</dimen>
<dimen name="calc_small_margin">0dp</dimen>

更新2月16日

曼朱纳斯·普拉巴卡尔(Manjunath Prabhakar)说，麻烦可能与体重有关.因此，我尝试删除所有重量属性，并且布局现在变得更有意义.我还没有解决.我会考虑将布局重写为嵌套的LinearLayouts，以作为退后一步，因此，我对其他建议表示欢迎.

Manjunath Prabhakar said that the trouble may be related to weights. So I tried to remove all weight attributes and the layout makes more sense now. I have not fixed it yet though. I would consider rewriting the layout to nested LinearLayouts as a step back therefore I make bounty open for other suggestions.

推荐答案

我想这是GridLayout支持版本的错误.

I guess it is a bug of the support version of GridLayout.

看看此处(与GridLayout宽度测量有关).

Take a look at this (that is currently Assigned): I think it is related to your question about the Nexus 5X font size behavior. In general, I found a lot of related bugs here (related to GridLayout width measurement).

我会尽力为您解决.

我正在使用com.android.support:gridlayout-v7:25.1.1.

我认为您可以通过以下方式解决布局问题(旧手机的对齐方式和Nexus 5X中的字体大小):

I think you can solve your layout problems (both the alignment in older phones and the font size in Nexus 5X) doing in this way:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--Display row-->
    <TextView
        android:id="@+id/assignment"
        android:text="50 + 40 = 90"
        style="@style/Formula"
        android:focusable="false"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        tools:ignore="HardcodedText" />

    <android.support.v7.widget.GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:columnCount="4"
        app:rowCount="4">

        <!-- row with 7-9,+ -->

        <LinearLayout
            app:layout_gravity="fill_horizontal"
            app:layout_columnSpan="4"
            android:orientation="horizontal"
            app:layout_rowWeight="1">
        <Button
            android:id="@+id/digit7"
            android:text="7"
            style="@style/KeypadLeftButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/digit8"
            android:text="8"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/digit9"
            android:text="9"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        <Button
            android:id="@+id/buttonPlus"
            android:text="+"
            style="@style/KeypadRightButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        </LinearLayout>

        <!--row with 4-6, - -->
        <LinearLayout
            app:layout_gravity="fill_horizontal"
            app:layout_columnSpan="4"
            android:orientation="horizontal"
            app:layout_rowWeight="1">
        <Button
            android:id="@+id/digit4"
            android:text="4"
            style="@style/KeypadLeftButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        <Button
            android:id="@+id/digit5"
            android:text="5"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        <Button
            android:id="@+id/digit6"
            android:text="6"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/buttonMinus"
            android:text="-"
            style="@style/KeypadRightButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        </LinearLayout>
        <!--row with 1-3, * -->

        <LinearLayout
            app:layout_gravity="fill_horizontal"
            app:layout_columnSpan="4"
            android:orientation="horizontal"
            app:layout_rowWeight="1">
        <Button
            android:id="@+id/digit1"
            android:text="1"
            style="@style/KeypadLeftButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/digit2"
            android:text="2"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/digit3"
            android:text="3"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        <Button
            android:id="@+id/buttonMultiply"
            android:text="\u22C5"
            style="@style/KeypadRightButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        </LinearLayout>
        <!--row with 0, backspace and / -->

        <LinearLayout
            app:layout_gravity="fill_horizontal"
            app:layout_columnSpan="4"
            android:orientation="horizontal"
            app:layout_rowWeight="1"
            android:weightSum="4">
        <Button
            android:id="@+id/digit0"
            android:text="0"
            style="@style/KeypadLeftButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_columnWeight="1"
            app:layout_gravity="fill_horizontal"
            app:layout_rowWeight="1"
            tools:ignore="HardcodedText"
            android:layout_weight="1"/>

        <Button
            android:id="@+id/buttonBackspace"
            android:text="←"
            style="@style/KeypadButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_gravity="fill_vertical"
            app:layout_columnSpan="2"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"
            android:layout_weight="2"/>

        <Button
            android:id="@+id/buttonDivide"
            android:text=":"
            style="@style/KeypadRightButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"
            android:layout_weight="1"/>
        </LinearLayout>
    </android.support.v7.widget.GridLayout>

    <!--row with button submit -->

    <Button
        android:id="@+id/buttonSubmit"
        android:text="NEXT"
        style="@style/KeypadNextButton"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        app:layout_gravity="fill_horizontal"/>
</LinearLayout>

基本上，我所做的是将每组按钮(除最后一行外的四个按钮)包装在LinearLayout中.

Basically, what I did is to wrap each group of buttons (four buttons except the last row) in a LinearLayout.

在这里您可以在两部手机中看到它的外观:

Here you can see how it looks in two phones:

Nexus 5

三星银河核plus(旧)

Samsung galaxy core plus (older)

如您所见，最后一行的对齐存在问题.我认为您可以尝试解决这些按钮与属性和属性的对齐问题.让我知道您是否希望在上一个主题中进一步改进.

As you can see, there is a problem in the alignment of the last row. I think you can try to solve the alignment of these buttons playing around with the properties and attributes. Let me know if you want further improvement in this last topic.

希望这会有所帮助.

这篇关于GridLayout在小显示器上折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！