web-dev-qa-db-fra.com

comment définir la largeur maximale d'une mise en page

Après beaucoup de recherches sur Google, je ne parviens pas à trouver une solution à ce problème. J'ai cette disposition:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
          Android:id="@+id/adlayout"
          Android:layout_width="fill_parent"
          Android:layout_height="fill_parent"
          Android:orientation="vertical">
<TableLayout
   xmlns:Android="http://schemas.Android.com/apk/res/Android"
   Android:orientation="vertical"
   Android:layout_width="fill_parent"
   Android:layout_height="wrap_content"
   Android:stretchColumns="1"
   Android:layout_weight="1"
  >

  <TableRow Android:id="@+id/tableRow1" Android:layout_width="fill_parent"   Android:layout_height="wrap_content">
       <TextView Android:padding="6dip" Android:text="@string/barcode_format"  Android:id="@+id/textView1" Android:layout_width="wrap_content"   Android:layout_height="wrap_content"></TextView>
       <EditText Android:padding="6dip" Android:layout_width="fill_parent" Android:id="@+id/edit_barcode_format" Android:layout_height="wrap_content"></EditText>
  </TableRow>
  <TableRow Android:id="@+id/tableRow1" Android:layout_width="fill_parent" Android:layout_height="wrap_content">
      <TextView Android:padding="6dip" Android:text="@string/barcode_type" Android:id="@+id/textView2" Android:layout_width="wrap_content" Android:layout_height="wrap_content"></TextView>
      <EditText Android:padding="6dip" Android:layout_width="fill_parent" Android:id="@+id/edit_barcode_type" Android:layout_height="wrap_content"></EditText>
  </TableRow>        
 </TableLayout>


</LinearLayout>

La disposition du tableau définit un formulaire. Sur un téléphone, ça va, mais sur une tablette, les vues d'edittext semblent trop grandes. Je veux définir une largeur maximale pour la mise en page et peindre le formulaire centré.

androidandroid-layoutandroid-linearlayout
24
MaikoMobile

La manière appropriée de gérer votre situation consiste à créer un fichier de mise en page distinct pour optimiser votre vue de formulaire pour les tablettes tout en utilisant le fichier existant pour les téléphones. Pour ce faire, créez des répertoires res/layout séparés avec des qualificatifs pour la taille d'écran et/ou la résolution qui leur sont attachés.

Vous pouvez en savoir plus sur les qualificateurs de ressources disponibles ici . Il y a un certain nombre de choix ici et je vous laisse le soin de choisir le meilleur pour votre application, mais voici un exemple simple:

Supposons que votre fichier de mise en page actuel soit form.xml .

Placez votre fichier de mise en page existant dans res/layout/form.xml . Cela en fera la disposition par défaut.

Créez un autre fichier et placez-le dans res/layout-large/form.xml . Ce fichier de mise en page sera utilisé sur les appareils avec une taille d'écran physique> ~ 5 "(toutes les tablettes standard). Pour gérer votre problème, j'ai modifié votre mise en page par défaut pour afficher le formulaire centré horizontalement et ne prend que 60% de la largeur de l'écran :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/adlayout"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    Android:orientation="horizontal"
    Android:gravity="center_horizontal"
    Android:weightSum="1" >

    <TableLayout
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="0.6"
        Android:stretchColumns="1" >

        <TableRow Android:id="@+id/tableRow1">

            <TextView
                Android:id="@+id/textView1"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:padding="6dip"
                Android:text="Barcode Format" >
            </TextView>

            <EditText
                Android:id="@+id/edit_barcode_format"
                Android:layout_width="fill_parent"
                Android:layout_height="wrap_content"
                Android:padding="6dip" >
            </EditText>
        </TableRow>

        <TableRow Android:id="@+id/tableRow1">

            <TextView
                Android:id="@+id/textView2"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:padding="6dip"
                Android:text="Barcode Type" >
            </TextView>

            <EditText
                Android:id="@+id/edit_barcode_type"
                Android:layout_width="fill_parent"
                Android:layout_height="wrap_content"
                Android:padding="6dip" >
            </EditText>
        </TableRow>
    </TableLayout>

</LinearLayout>

Le changement utilise le layout_weight et weightSum propriétés de LinearLayout, qui indiquent au tableau de ne remplir que 60% (layout_weight=0.6) de son parent. C'est plus efficace que d'essayer de définir une largeur maximale, en particulier lorsque les appareils ont des résolutions et des rapports d'aspect variables.

Pour info, j'ai également essayé de supprimer autant d'attributs inutiles que vous aviez dans votre XML qui ne faisaient que créer de l'encombrement (tels que plusieurs xmlns:Android déclarations). L'une de ces modifications consistait à supprimer _ layout_ paramètres des enfants TableLayout, car TableLayout ignore quand même tous ces paramètres et force ses enfants à utiliser certaines contraintes. Depuis les documents:

Les enfants d'un TableLayout ne peuvent pas spécifier l'attribut layout_width. La largeur est toujours MATCH_PARENT. Cependant, l'attribut layout_height peut être défini par un enfant; la valeur par défaut est WRAP_CONTENT. Si l'enfant est un TableRow, la hauteur est toujours WRAP_CONTENT.

Vous pouvez en savoir plus sur TableLayoutdans la documentation du SDK .

HTH

15
Devunwired

Garder des fichiers de mise en page différents comme suggéré par @Devunwired est correct, cependant, cela ajoute de la complexité à votre projet (vous devrez conserver plusieurs fichiers au cas où le concepteur repenserait la mise en page de la vue).

Si tout ce dont vous avez besoin est de modifier la largeur d'un bouton, je suggère ce qui suit. Conservez un fichier xml dans le dossier de mise en page et attribuez-lui la valeur

<LinearLayout
    style="@style/width_match_parent_max_200"
    Android:layout_height="wrap_content">

values-w600dp/styles.xml contient

<resources>
    <style name="width_match_parent_max_200">
        <item name="Android:layout_width">200dp</item>
    </style>
</resources>

values ​​/ styles.xml contient

<resources>
    <style name="width_match_parent_max_200">
        <item name="Android:layout_width">match_parent</item>
    </style>
</resources>

Modifier: notez que le dossier est values-w600dp et non values-600dp

47
kouretinho

Utilisez un ConstraintLayout. À l'intérieur, vous pouvez utiliser ces propriétés pour la largeur/hauteur min/max:

  • app:layout_constraintWidth_min
  • app:layout_constraintWidth_max
  • app:layout_constraintHeight_min
  • app:layout_constraintHeight_max

N'oubliez pas de définir la largeur/hauteur de votre vue pour qu'elle corresponde aux contraintes (0dp).

5
Cristan

Vous devez créer un nouveau ViewGroup qui s'étend de LinearLayout et le limite de la largeur souhaitée. Voir cette réponse .

2
dmon

Cette bibliothèque BoundedViews vous aide à définir des contraintes sur maxWidth/maxHeight

0
Bao Le