2017-09-06 139 views
0

我想拉伸我的计算器的键盘(这是一个带有按钮的GridLayout)。它是一个5 * 4(列*行)。如何将GridLayout拉伸到其父项?

  1. 我给GridLayoutandroid:layout_height="match_parent"android:layout_width="match_parent"使其尺寸填满可用空间。然后
  2. 我将列和行索引分配给相应的android:layout_columnandroid:layout_row

我得到以下结果:

1080×1920

enter image description here

细胞采取统一的宽度和高度,但不足够的拉伸以填满整个电网。所以我在网上搜索,看到我可以为每个单元分配相同的权重,并且布局计算出填充整个网格的统一宽度和高度值。

(边问题:如何机器人确定在这种情况下,为什么它没有使他们比它是在这里什么大/小了这些细胞的大小?)

所以我补充一下:

  1. android:layout_weight="1"android:layout_height="1"到每个按钮的

我得到这样的结果:

1080×1920

enter image description here

真棒。看起来,直到我更改分辨率为别的东西,它正在按预期..:

为480x800

enter image description here

或者,如果我保持相同的1080×1920 分辨率但强制的最低高度顶部为类似280dp(279dp正常工作)

enter image description here

我该如何解决这个问题?我打算使用API​​ Level 21,我想强制GridLayout填充可用空间。我更喜欢挤压按钮(甚至让他们的内容被裁剪/不可见),而不是从屏幕上拍摄。要完成这里是XML:

main.axml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/root"> 
<!--Top section (screen + few keys)--> 
    <LinearLayout 
     android:style="@style/CalculatorScreenStyle" 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/top"> 
     <Space 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:minHeight="280dp"/> 
     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:textSize="40sp" 
      android:hint="Enter a number here"/> 
    </LinearLayout> 
<!-- Keyboard layout --> 
    <GridLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:id="@+id/keyboard" 
     android:columnCount="4" 
     android:rowCount="5"> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="C" 
      android:id="@+id/clearButton" 
      android:layout_column="0" 
      android:layout_row="0" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="Button" 
      android:id="@+id/button15" 
      android:layout_column="1" 
      android:layout_row="0" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="%" 
      android:layout_column="2" 
      android:layout_row="0" 
      android:id="@+id/percentButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:id="@+id/divideButton" 
      android:layout_column="3" 
      android:layout_row="0" 
      android:text="÷" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="7" 
      android:layout_column="0" 
      android:layout_row="1" 
      android:id="@+id/sevenNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="8" 
      android:layout_column="1" 
      android:layout_row="1" 
      android:id="@+id/eightNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="9" 
      android:layout_column="2" 
      android:layout_row="1" 
      android:id="@+id/nineNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="+" 
      android:layout_column="3" 
      android:layout_row="1" 
      android:id="@+id/plusButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="4" 
      android:layout_column="0" 
      android:layout_row="2" 
      android:id="@+id/fourNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="5" 
      android:layout_column="1" 
      android:layout_row="2" 
      android:id="@+id/fiveNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="6" 
      android:layout_column="2" 
      android:layout_row="2" 
      android:id="@+id/sixNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="x" 
      android:layout_column="3" 
      android:layout_row="2" 
      android:id="@+id/multiplyButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="1" 
      android:layout_column="0" 
      android:layout_row="3" 
      android:id="@+id/oneNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="2" 
      android:layout_column="1" 
      android:layout_row="3" 
      android:id="@+id/twoNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="3" 
      android:layout_column="2" 
      android:layout_row="3" 
      android:id="@+id/threeNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="-" 
      android:layout_column="3" 
      android:layout_row="3" 
      android:id="@+id/minusButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="+/-" 
      android:layout_column="0" 
      android:layout_row="4" 
      android:id="@+id/signButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="0" 
      android:layout_column="1" 
      android:layout_row="4" 
      android:id="@+id/zeroNumButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="." 
      android:layout_column="2" 
      android:layout_row="4" 
      android:id="@+id/periodButton" /> 
     <Button 
      android:style="@style/CalculatorButtonStyle" 
      android:text="=" 
      android:layout_column="3" 
      android:layout_row="4" 
      android:id="@+id/equalsButton" /> 
    </GridLayout> 
</LinearLayout> 

风格。XML

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <style name="CalculatorButtonStyle" > 
    <item name="android:textSize">22sp</item> 
    <item name="android:layout_columnWeight">1</item> 
    <item name="android:layout_rowWeight">1</item> 
    <item name="android:background">#9E5EC2</item> 
    </style> 
    <style name="CalculatorScreenStyle"> 
    <item name="android:background">#ED59E8</item> 
    </style> 
</resources> 

编辑:由于临时的解决方案中,我使用的水平线LinearLayout个垂直LinearLayout和我assing一个相等的权重,以所有的Button秒。它工作正常,但后来不知什么用的GridLayout如果我要模仿它是如何工作的自己..

enter image description here

+0

您可以检查我的答案。 – KeLiuyue

回答

0

当Android的API < 21,它没有很好地工作。

所以我们可以添加编译。

compile 'com.android.support:gridlayout-v7:25.3.1' 

然后更改您的代码。

在您的XML代码中使用android.support.v7.widget.GridLayout

<android.support.v7.widget.GridLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/keyboard" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:columnCount="4" 
    app:rowCount="5"> 

    <Button 
     android:id="@+id/clearButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="C" 
     app:layout_column="0" 
     app:layout_columnWeight="1" 
     app:layout_row="0" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/button15" 
     style="@style/CalculatorButtonStyle" 
     android:text="Button" 
     app:layout_column="1" 
     app:layout_columnWeight="1" 
     app:layout_row="0" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/percentButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="%" 
     app:layout_column="2" 
     app:layout_columnWeight="1" 
     app:layout_row="0" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/divideButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="÷" 
     app:layout_column="3" 
     app:layout_columnWeight="1" 
     app:layout_row="0" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/sevenNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="7" 
     app:layout_column="0" 
     app:layout_columnWeight="1" 
     app:layout_row="1" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/eightNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="8" 
     app:layout_column="1" 
     app:layout_columnWeight="1" 
     app:layout_row="1" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/nineNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="9" 
     app:layout_column="2" 
     app:layout_columnWeight="1" 
     app:layout_row="1" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/plusButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="+" 
     app:layout_column="3" 
     app:layout_columnWeight="1" 
     app:layout_row="1" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/fourNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="4" 
     app:layout_column="0" 
     app:layout_columnWeight="1" 
     app:layout_row="2" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/fiveNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="5" 
     app:layout_column="1" 
     app:layout_columnWeight="1" 
     app:layout_row="2" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/sixNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="6" 
     app:layout_column="2" 
     app:layout_columnWeight="1" 
     app:layout_row="2" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/multiplyButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="x" 
     app:layout_column="3" 
     app:layout_columnWeight="1" 
     app:layout_row="2" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/oneNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="1" 
     app:layout_column="0" 
     app:layout_columnWeight="1" 
     app:layout_row="3" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/twoNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="2" 
     app:layout_column="1" 
     app:layout_columnWeight="1" 
     app:layout_row="3" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/threeNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="3" 
     app:layout_column="2" 
     app:layout_columnWeight="1" 
     app:layout_row="3" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/minusButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="-" 
     app:layout_column="3" 
     app:layout_columnWeight="1" 
     app:layout_row="3" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/signButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="+/-" 
     app:layout_column="0" 
     app:layout_columnWeight="1" 
     app:layout_row="4" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/zeroNumButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="0" 
     app:layout_column="1" 
     app:layout_columnWeight="1" 
     app:layout_row="4" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/periodButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="." 
     app:layout_column="2" 
     app:layout_columnWeight="1" 
     app:layout_row="4" 
     app:layout_rowWeight="1"/> 

    <Button 
     android:id="@+id/equalsButton" 
     style="@style/CalculatorButtonStyle" 
     android:text="=" 
     app:layout_column="3" 
     app:layout_columnWeight="1" 
     app:layout_row="4" 
     app:layout_rowWeight="1"/> 
</android.support.v7.widget.GridLayout> 

注意

它有新的属性。

  • 应用:layout_columnWeight
  • 应用:layout_rowWeight
  • 应用:layout_rowSpan
  • 应用:layout_columnSpan