Mise en page des tableaux dans Android -Dimensionnement des lignes

Question

J'ai un tableau comme indiqué, avec beaucoup de lignes. J'ai utilisé Android:strechcolumns="1" pour étirer la deuxième colonne de chaque ligne, ce qui est le cas partout.

Mais dans la cinquième ligne, j'ai 2 champs, je veux qu'ils occupent un espace égal. La taille de la ligne doit être la même que celle de la ligne précédente. Je veux que la taille globale des lignes reste la même que celle de la capture d'écran. J'ai également indiqué dans la capture d'écran la limite dans laquelle toutes les lignes doivent se trouver.

Comment cela peut-il être fait ?

<TableRow>
    <TextView
        android:gravity="right"
        android:paddingTop="10dip"
        />
    <Spinner
    android:id="@+id/depot_name_spinner"/>
</TableRow>

<TableRow>
    <TextView 
     android:text="@string/product_name"
     android:paddingTop="10dip"
     android:gravity="right"/>
    <Spinner
    android:id="@+id/product_name_spinner"
     />
</TableRow>

<TableRow>
    <TextView
        android:text="@string/date"
        android:gravity="right" />
    <Button
    android:id="@+id/date_button" />
</TableRow>

<TableRow>
    <TextView 
        android:text="@string/measure_ltr"
        android:gravity="right"

        />
    <EditText
    android:id="@+id/ltr_text" 
    android:layout_width="50dip"/>
     <TextView 
        android:text="@string/measure_qts"
        android:gravity="right"
     />
      <EditText

    android:id="@+id/qts_text"
     />  
</TableRow>

Merci

Answer 1

Vous pouvez ajouter non seulement TableRow à la table. Il suffit d'utiliser un simple LinearLayout et mettre tout le contenu brut dedans. Je pense que cela doit résoudre votre problème.

EDIT : Vous pouvez également ajouter le LinearLayout avec tous les widgets à un TableRow et mettre LinearLayout 's android:layout_span=2 :

<TableRow>
    <LinearLayout
        android:layout_span="2">
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/measure_ltr"
            android:gravity="right"/>
        <EditText
            android:id="@+id/ltr_text" 
            android:layout_width="50dip"
            android:layout_height="wrap_content"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/measure_qts"
            android:gravity="right"/>
        <EditText  
            android:id="@+id/qts_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</TableRow>

Je ne l'ai pas encore essayé, mais j'espère que cela fonctionnera.

Answer 2

Essayez d'utiliser Android:weight. Cela divisera l'espace restant une fois que la mise en page sera disposée de la manière que vous souhaitez. Je veux dire que vous pouvez définir la proportion d'espace que chacune de vos vues doit utiliser. Regardez l'exemple ci-dessous.

<TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content">
    <TableRow>

    <LinearLayout android:layout_width="fill_parent" android:orientation="horizontal"
                    android:layout_height="wrap_content" android:weightSum="100">     // Mention Weightsum as 100 so that its easy to split among your views.

        <TextView android:id="@+id/row1Label" 
            android:layout_width="0dip" android:layout_weight="60"      // This will occupy 60% of the remaining space
            android:layout_height="wrap_content">
        </TextView>

        <TextView android:id="@+id/row1Label" 
            android:layout_width="0dip" android:layout_weight="40"      // This will occupy 40% of the remaining space
            android:layout_height="wrap_content">
        </TextView>

    </LinearLayout>

    </TableRow>

    <TableRow>

    <LinearLayout android:layout_width="fill_parent" android:orientation="horizontal"
                    android:layout_height="wrap_content" android:weightSum="100">

        <TextView android:id="@+id/row2Label" 
            android:layout_width="0dip" android:layout_weight="60"      // This will occupy 60% of the remaining space
            android:layout_height="wrap_content">
        </TextView>

        <TextView android:id="@+id/row3Label" 
            android:layout_width="0dip" android:layout_weight="40"      // This will occupy 40% of the remaining space
            android:layout_height="wrap_content">
        </TextView>

        // You can more views and distribute the space accordingly....

    </LinearLayout>

    </TableRow>

...........

Avec cela, vous pouvez obtenir quelque chose comme ceci

Vous pouvez diviser la zone des lignes du tableau comme vous le souhaitez. Vous pouvez le faire en utilisant uniquement la mise en page linéaire, car les autres mises en page ne disposent pas de cette option de pondération. J'ai beaucoup utilisé cette méthodologie pour créer des vues complexes. J'espère que cela vous aidera.