2012-01-15 11 views
20

Después de mucho buscar en Google, no puedo encontrar una solución a este problema. Tengo este diseño:cómo establecer el ancho máximo para un diseño

<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 disposición de la tabla define una forma. En un teléfono se ve bien, pero en una tableta, las vistas de texto de edición se ven demasiado grandes. Quiero establecer un ancho máximo para el diseño y pintar el formulario centrado.

Respuesta

12

La forma adecuada de manejar su situación es crear un archivo de diseño separado para optimizar su vista de formulario para tabletas mientras usa el archivo existente para teléfonos. Para ello, crea directorios de res/diseño separados con calificadores para el tamaño de pantalla y/o la resolución adjunta.

Puede leer más sobre los calificadores de recursos disponibles here. Aquí hay una serie de opciones y le dejaré que elija la mejor para su aplicación, pero aquí hay un ejemplo simple:

Supongamos que su archivo de diseño actual es form.xml.

Coloque su archivo de diseño existente en res/layout/form.xml. Esto lo convertirá en el diseño predeterminado.

Cree otro archivo y colóquelo en res/layout-large/form.xml. Este archivo de diseño se usará en dispositivos con un tamaño de pantalla física> ~ 5 "(todas las tabletas estándar). Para manejar su problema, he modificado su diseño predeterminado para mostrar el formulario centrado horizontalmente y solo ocupa el 60% del ancho de la pantalla :.

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

el cambio utiliza los layout_weight y weightSum propiedades de LinearLayout, que cuentan la mesa para llenar solamente 60% (layout_weight=0.6) de su matriz Esto es más eficiente que tratar de establecer un ancho máximo, especialmente cuando los dispositivos tener resoluciones variables y relaciones de aspecto.

FYI, también traté de eliminar tantos de los atributos innecesarios que tenía en su XML que no hacía más que crear desorden (como múltiples declaraciones xmlns:android). Uno de esos cambios fue la eliminación de los parámetros adicionales layout_ de los TableLayout niños, porque TableLayout ignora todos estos parámetros de todos modos y obliga a sus hijos a utilizar ciertas restricciones. De los documentos:

Los elementos secundarios de un TableLayout no pueden especificar el atributo layout_width. El ancho siempre es MATCH_PARENT. Sin embargo, el atributo layout_height puede ser definido por un niño; el valor predeterminado es WRAP_CONTENT. Si el niño es un TableRow, entonces la altura siempre es WRAP_CONTENT.

Puedes leer más sobre TableLayoutin the SDK docs.

HTH

+0

Excelentes respuestas. ¡¡¡Muchas gracias!!! – MaikoMobile

+0

¡Gran solución! –

1

Tienes que crear una nueva ViewGroup que se extiende desde LinearLayout y limita por el ancho que desee. Ver this answer.

+1

Gracias pero estaba buscando una solución XML. – MaikoMobile

34

Mantener distintos archivos de diseño como se sugiere @Devunwired es correcto, sin embargo, que añade complejidad a su proyecto (que tendría que mantener múltiples archivos en caso de que el diseñador rediseña el diseño de vista).

Si todo lo que necesita es modificar el ancho de un botón, le sugiero lo siguiente. Mantenga un archivo XML en la carpeta de diseño y darle un valor de

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

valores w600dp/styles.xml contiene

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

valores/styles.xml contiene

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

Editar : Tenga en cuenta que la carpeta es values-w600dp y no values-600dp

+0

Tenga en cuenta que 'LinearyLayout' ** NO ** tiene' android: layout_width = "wrap_content" 'Cometí este error y pensé que era necesario, pero no es necesario en absoluto –

+0

Buena solución, aunque es valores- ** w ** 600dp. –

Cuestiones relacionadas