2012-02-09 47 views
6

aquí está mi problema: Quiero hacer un diseño que se parece a esta red en Android:TableLayout y el botón de Android cambiar el tamaño

enter image description here

Para hacerlo, he creado este diseño:

 <?xml version="1.0" encoding="utf-8"?> 
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/RelativeLayout1" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:gravity="center" 
    android:orientation="vertical" > 


    <TableLayout 
    android:id="@+id/tableLayout1" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" > 

    <TableRow 
     android:id="@+id/tableRow1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.3"> 

     <Button 
      android:id="@+id/clientimain" 
      android:layout_width="0dip" 
      android:layout_weight="1" android:layout_height="fill_parent"/> 



     <Button 
      android:id="@+id/button1" 
      android:layout_width="0dip" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:text="Button" /> 

    </TableRow> 

    <TableRow 
     android:id="@+id/tableRow2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.3" > 

     <Button 
      android:id="@+id/button2" 
      android:layout_width="0dip" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:text="Button"/> 

     <Button 
      android:id="@+id/button6" 
      android:layout_width="0dip" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:text="Button" /> 

    </TableRow> 

    <TableRow 
     android:id="@+id/tableRow3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.3" > 

     <Button 
      android:id="@+id/button3" 
      android:layout_width="0dip" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:text="Button" 
      /> 

     <Button 
      android:id="@+id/button7" 
      android:layout_width="0dip" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:text="Button" 
      /> 

    </TableRow> 

    </TableLayout> 

    </RelativeLayout> 

Básicamente se compone de 6 botones en un diseño de tabla con la propiedad de peso configurada correctamente (o eso espero). El resultado se ve bien hasta que intentaré establecer la propiedad de fondo de cada botón. En ese caso, el botón toma la altura de la imagen que se coloca (el ancho está bien). Por ejemplo si fijo la imagen de fondo que el tamaño es 96px x 96px el resultado se parece a esto:

enter image description here

¿Hay una manera de prevenir este botón "estirar" y para centrar correctamente la imagen? He intentado cambiar la propiedad de altura para cada fila de tabla, cambiar la propiedad de altura máxima de botón y también cambiar el tipo de botón con un botón de imagen (y establecer la propiedad src con el icono deseado) pero no logré el deseado resultado.
También he rediseñado la documentación de google sobre el soporte de pantallas múltiples y sobre cada diseño básico, pero no encontré ninguna solución. ¡Gracias de antemano a cualquiera que quiera ayudarme!

Andrea

+0

prueba y usa android: scaleType = "fitXY" en tu botón. también intente y use http://developer.android.com/resources/tutorials/views/hello-gridview.html para esta tarea –

+0

Probé el atributo android: scaleType = "fitXY" pero no funcionó. Intentaré cambiar al diseño de la cuadrícula si no encuentro una solución. Gracias – jiraya85

Respuesta

3

Ajuste la altura de diseño de la fila de la tabla como 0dip y establecer el peso como 1

<TableRow 
      android:id="@+id/tableRow1" 
      android:layout_width="wrap_content" 
      android:layout_height="0dp" 
      android:layout_weight="1" > 

Esto debería solucionar su problema


Cambio

<Button 
      android:id="@+id/clientimain" 
      android:layout_width="0dip" 
      android:layout_weight="1" android:layout_height="fill_parent"/> 

a

<Button 
      android:id="@+id/clientimain" 
      android:layout_width="0dip" 
      android:layout_weight="1" android:layout_height="fill_parent"/> 

esto podría funcionar, vale la pena intentarlo, en Eclipse para mí que hace que la derecha la forma en que lo tenías en primer lugar, tal vez usted podría tratar de limpiar su proyecto (Proyecto> proyecto de limpieza) porque debe ser correcta, ya que es


código debe ser como este:

<?xml version="1.0" encoding="utf-8"?> 
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/RelativeLayout1" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:gravity="center" 
    android:orientation="vertical" > 


    <TableLayout 
     android:id="@+id/tableLayout1" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" > 

     <TableRow 
      android:id="@+id/tableRow1" 
      android:layout_width="wrap_content" 
      android:layout_height="0dp" 
      android:layout_weight="1" > 

      <Button 
       android:id="@+id/clientimain" 
       android:layout_width="0dip" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" /> 

      <Button 
       android:id="@+id/button1" 
       android:layout_width="0dip" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" 
       android:text="Button" /> 
     </TableRow> 

     <TableRow 
      android:id="@+id/tableRow2" 
      android:layout_width="wrap_content" 
      android:layout_height="0dp" 
      android:layout_weight="1" > 

      <Button 
       android:id="@+id/button2" 
       android:layout_width="0dip" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" 
       android:text="Button" /> 

      <Button 
       android:id="@+id/button6" 
       android:layout_width="0dip" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" 
       android:text="Button" /> 
     </TableRow> 

     <TableRow 
      android:id="@+id/tableRow3" 
      android:layout_width="wrap_content" 
      android:layout_height="0dp" 
      android:layout_weight="1" > 

      <Button 
       android:id="@+id/button3" 
       android:layout_width="0dip" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" 
       android:text="Button" /> 

      <Button 
       android:id="@+id/button7" 
       android:layout_width="0dip" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" 
       android:text="Button" /> 
     </TableRow> 
    </TableLayout> 

    </RelativeLayout> 

<?xml version="1.0" encoding="utf-8"?> 
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/RelativeLayout1" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:gravity="center" 
    android:orientation="vertical" > 


    <TableLayout 
     android:id="@+id/tableLayout1" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" > 


     <TableRow 
      android:id="@+id/tableRow1" 
      android:layout_width="wrap_content" 
      android:layout_height="0dp" 
      android:layout_weight="1" > 

      <ImageButton 
       android:id="@+id/imageButton1" 
       android:layout_width="0dp" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" 
       android:src="@drawable/ic_launcher" /> 

      <ImageButton 
       android:id="@+id/imageButton2" 
       android:layout_width="0dp" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" 
       android:src="@drawable/ic_launcher" /> 
     </TableRow> 


     <TableRow 
      android:id="@+id/tableRow2" 
      android:layout_width="wrap_content" 
      android:layout_height="0dp" 
      android:layout_weight="1" > 

      <ImageButton 
       android:id="@+id/imageButton3" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:src="@drawable/ic_launcher" /> 

      <ImageButton 
       android:id="@+id/imageButton4" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:src="@drawable/ic_launcher" /> 
     </TableRow> 


     <TableRow 
      android:id="@+id/tableRow3" 
      android:layout_width="wrap_content" 
      android:layout_height="0dp" 
      android:layout_weight="1" > 

      <ImageButton 
       android:id="@+id/imageButton5" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:src="@drawable/ic_launcher" /> 

      <ImageButton 
       android:id="@+id/imageButton6" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:src="@drawable/ic_launcher" /> 
     </TableRow> 

    </TableLayout> 

    </RelativeLayout> 

sigue sin cambiar nada, ¿qué tan grande es el tamaño de la imagen?

+0

Ya he intentado hacer eso pero sin resultado. Ahora cada fila de la tabla tiene esas propiedades (altura 0 y peso 1) pero todavía tengo ese estiramiento. Gracias – jiraya85

+0

Antes que nada, gracias por su apoyo. Intenté limpiar el proyecto y también reemplazar mi código con el tuyo, pero cuando selecciono una imagen de fondo, sigo teniendo el mismo problema. Si no aplico ninguna imagen al fondo del botón, todo está bien y la cuadrícula se ve como quería. – jiraya85

+0

Hmm bien, intentaré con imágenes entonces, solo espere unas pocas, estaré de regreso – FabianCook

2
+0

¡Muchas gracias! Esto funciona perfectamente ¡Realmente aprecio tu ayuda! ¡¡¡Muchas muchas gracias!!! – jiraya85

+0

¿Necesitas que los demás también estén hechos? – FabianCook

+0

¡Realmente aprecio tu ayuda, pero no quiero molestarte! ¡Has hecho suficiente! Trataré de hacer los nueve parches yo solo. ¡Muchas gracias, SmartLemon! – jiraya85

0

Cuando solicité la imagen de fondo como

android:background="@drawable/ic_launcher" 

funcionó bien.

Pensé que era por el tamaño de la imagen, así que apliqué otra imagen con el tamaño 160X160 y el problema volvió. Luego apliqué la misma imagen 160X160 a todos los botones y se alinearon perfectamente. aquí es mi código (La imagen Gender.png es de 160x160 píxeles)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/RelativeLayout1" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:gravity="center" 
android:orientation="vertical" > 

<TableLayout 
android:id="@+id/tableLayout1" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" > 

<TableRow 
    android:id="@+id/tableRow1" 
    android:layout_width="wrap_content" 
    android:layout_height="fill_parent" 
    android:layout_weight="0.3"> 

    <Button 
     android:id="@+id/clientimain" 
     android:layout_width="0dip" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:background="@drawable/Gender" /> 

    <Button 
     android:id="@+id/button1" 
     android:layout_width="0dip" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:text="Button" 
     android:background="@drawable/Gender"/> 

</TableRow> 

<TableRow 
    android:id="@+id/tableRow2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_weight="0.3" > 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="0dip" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:text="Button" 
     android:background="@drawable/Gender"/> 

    <Button 
     android:id="@+id/button6" 
     android:layout_width="0dip" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:text="Button" 
     android:background="@drawable/Gender"/> 

</TableRow> 

<TableRow 
    android:id="@+id/tableRow3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_weight="0.3" 
    > 

    <Button 
     android:id="@+id/button3" 
     android:layout_width="0dip" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:text="Button" 
     android:background="@drawable/Gender" /> 

    <Button 
     android:id="@+id/button7" 
     android:layout_width="0dip" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:text="Button" 
     android:background="@drawable/Gender"/> 

</TableRow> 


    <TableRow 
    android:id="@+id/tableRow4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_weight="0.3" > 

    <Button 
     android:id="@+id/button77" 
     android:layout_width="0dip" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:text="Button" 
     android:background="@drawable/Gender" 
     /> 

    <Button 
     android:id="@+id/button75" 
     android:layout_width="0dip" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:text="Button" 
     android:background="@drawable/Gender" 
     /> 

</TableRow> 


</TableLayout> 

1

Yo sé que no es exactamente lo que quería, pero me recomiendan el uso de GridView en lugar de la disposición TableRow.

Creo que GridView debería funcionar mejor porque está implementado con el reciclaje de vistas y cosas heredadas de AbsListView. GridView es más difícil de implementar porque debe usarlo con Adapter, pero funcionará de manera eficiente si tiene que cargar muchas vistas pesadas, como las imágenes. Reference.

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridView1" 
    android:numColumns="auto_fit" 
    android:stretchMode="columnWidth" 
    android:columnWidth="100dp" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" > 

</GridView> 
Cuestiones relacionadas