2017-09-06 137 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