GridLayout在小型显示器上坍塌

Question

我有LinearLayout与TextView,GridLayout和另一个TextView。它在许多现代手机和平板电脑上正确显示，但它完全无法在像Nexus S这样的小型显示器上显示。请参阅下面的图片。

我试图缩小字体大小，除去9补丁背景，甚至删除所有的利润。当有一些利润时，我可以看到数字7。然后我最小化了它们，我可以看到四条线，第一个按钮的显示次数是显示的两倍。我不明白为什么，它应该有wrap_content宽度。

我试图尽量减少代码，并将其减少到GridLayout与单行，它仍然不适合屏幕的宽度。

这是怎么回事呢？

更新：

• 420x800 MDPI工作
• 420x800华电国际被打破
• 540x920华电国际工程
• 720x1280华电国际工程

更新2：

的Nexus 5X有字体为38sp时的相同问题r更大。有趣的是，工作室的设计师显示正确的布局，但两者的装置/模拟器显示损坏的视图和以下错误：

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> 

更新16th feb

Manjunath Prabhakar表示，麻烦可能与权重有关。所以我试图删除所有的重量属性，现在布局更有意义。但我还没有修复它。我会考虑重写布局以嵌套LinearLayouts作为退后一步，因此我会为其他建议打开赏金。

Answer 1

我猜是的GridLayout支持版本的错误。

看看this（即目前分配）：我认为这是与你有关的Nexus 5X字号的行为问题。一般来说，我发现了很多相关的错误here（有关GridLayout宽度测量）。

我会尽量给你一个解决方法。

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

我想你可以解决你的布局问题（无论是在旧的手机对准和Nexus 5X保护字体大小）做了这种方式：

<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中。

在这里你可以看到它的外观在两款手机：

的Nexus 5

三星galaxy核心加号（旧的）

正如你所看到的，是一个问题最后一行的对齐方式。我认为你可以尝试解决这些按钮与属性和属性的对齐问题。让我知道，如果你想在这个最后的话题进一步改善。

希望这会有所帮助。

Answer 2

有一些限制，并使用网格布局时的限制。 这里是链接到DOCUMENTATION

"GridLayout does not provide support for the principle of weight, as defined in weight. In general, it is not therefore possible to configure a GridLayout to distribute excess space in non-trivial proportions between multiple rows or columns ... For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group."

如果我是你，我会使用线性布局或表格布局。

希望这会有所帮助！