2017-09-06 4 views
0

J'essaie d'étirer le clavier de ma calculatrice (qui est un GridLayout avec des boutons à l'intérieur). C'est un 5 * 4 (colonnes * lignes).Comment puis-je étirer un GridLayout à son parent?

  1. Je donne GridLayoutandroid:layout_height="match_parent" et android:layout_width="match_parent" pour faire ses dimensions remplissent l'espace disponible. puis
  2. J'affecte les indices de colonnes et de lignes aux cellules avec android:layout_column et android:layout_row en conséquence.

-je obtenir le résultat suivant:

1080x1920

enter image description here

Les cellules prennent une largeur et une hauteur uniformes, mais ne pas étirer suffisamment pour remplir toute la grille. J'ai donc cherché en ligne et j'ai vu que je pouvais assigner un poids égal à chaque cellule et la disposition trouve une largeur et une hauteur uniformes qui remplissent toute la grille.

(question Side: comment android déterminer la taille de ces cellules dans ce cas pourquoi eux, il ne fait pas plus/plus petite que ce qu'elle est ici?)

J'ajouter:

  1. android:layout_weight="1" et android:layout_height="1" à chacun des boutons

-je obtenir ce résultat:

1080x1920

enter image description here

Impressionnant. On dirait qu'il fonctionne comme prévu .. jusqu'à ce que je change la résolution à quelque chose d'autre:

480x800

enter image description here

Ou si je garde la même 1080x1920 résolution mais forcer la hauteur min de la partie supérieure à quelque chose comme 280dp (279dp fonctionne très bien)

enter image description here

Comment puis-je résoudre ce problème? J'ai l'intention de niveau d'API 21 et je veux forcer le GridLayout pour remplir l'espace disponible n'importe comment. Je préfère que les boutons soient pressés (même avoir leur contenu coupé/invisible) plutôt que de tirer sur l'écran. Pour finir voici le 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> 

styles.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> 

EDIT: Comme solution temporaire, j'utilise un LinearLayoutLinearLayout vertical de horizontals s et I assing un poids égal à tous les Button s. Il fonctionne très bien, mais je me demande ce qui est de l'utilisation GridLayout si je dois imiter la façon dont fonctionne moi-même ..

enter image description here

+0

Vous pouvez vérifier ma réponse. – KeLiuyue

Répondre

0

Lorsque android api < 21, il n'a pas bien fonctionné.

Donc nous pouvons ajouter une compilation.

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

Ensuite, changez votre code. Utilisez le android.support.v7.widget.GridLayout dans votre code XML.

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

Remarque

Il avait un nouvel attribut.

  • app: layout_columnWeight
  • app: layout_rowWeight
  • app: layout_rowSpan
  • app: layout_columnSpan