2012-10-09 32 views
7

estoy configurando imágenes de fondo en mis botones personalizados. Hice una captura de pantalla para mi aplicación y mencioné que cuando estoy usando "wrap_content" para el ancho y alto del botón, el botón se estira. Cuando estoy arreglando un tamaño en dp, se verá bien (por ejemplo: en mi carpeta mdpi tengo iconos de 48x48px, así que pongo 48dp de ancho y alto). ¿Puedes explicarme por qué?botones imágenes de fondo estiradas (uso de wrap_content o dp)

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/definition_layout" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:orientation="vertical" 
android:padding="5dp" 
android:layout_alignParentTop="true" > 

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/buttons" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:padding="5dp" > 

    <Button 
     android:id="@+id/addToFavorites" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="5dp" 
     android:background="@drawable/favorites_button" /> 

    <Button 
     android:id="@+id/fontup" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="5dp" 
     android:background="@drawable/fontup_button" /> 

    <Button 
     android:id="@+id/fontdown" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="5dp" 
     android:background="@drawable/fontdown_button" /> 

    <Button 
     android:id="@+id/comment" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="5dp" 
     android:background="@drawable/comment_button" /> 

    <Button 
     android:id="@+id/speak" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="5dp" 
     android:background="@drawable/speak_button" /> 
    </LinearLayout> 

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_below="@id/buttons"> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content"> 

    <ImageView 
     android:id="@+id/image_frame" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 
    <WebView 
     android:id="@+id/webView1" 
     android:layout_below="@id/image_frame" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 
    </LinearLayout> 
    </ScrollView> 

    </RelativeLayout> 

El código anterior muestra mi archivo XML. Puede consultar este enlace para ver una captura de pantalla de mi problema: https://www.dropbox.com/s/phnxt5p335ltqef/buttons_icon_altered.png

Respuesta

4

Parece estar estirada porque "wrap_content" significa que android estirará la imagen para que se ajuste al diseño adjunto.

En su caso, los botones en el diseño lineal ocuparán tanto espacio como puedan dentro del diseño. A menos que establezca el alto y el ancho de los botones, se estirarán para llenar el espacio ocupado por el diseño lineal y, en consecuencia, sus imágenes de fondo también se extenderán junto con los botones.

Pero si establece el tamaño del botón en 48dp, entonces las imágenes no tendrán que estirarse ya que también son 48px de tamaño y por lo tanto se verán bien.

pasar por los excelentes documentos oficiales de desarrolladores para obtener más información sobre los diseños aquí: https://developer.android.com/guide/topics/ui/declaring-layout.html

y para aprender cómo manejar sus diseños y activos para múltiples tamaños androide pantalla y resoluciones aquí:

https://developer.android.com/guide/practices/screens_support.html

+0

Se ven bien en mi Samsung Galaxy Tab 10.1 tableta (con pantalla mdpi), pero cuando abro la misma aplicación en otro teléfono móvil con una pantalla mdpi, ocuparán un gran tamaño o tomarán un buen espacio porque "dp" es una unidad dinámica. – Anthony

+0

sí. También porque el tamaño de la pantalla entra en la imagen. Su pestaña tendrá una pantalla extra grande. En ese caso, la imagen se estira proporcionalmente en cada dirección, por lo tanto, se ve bien. –

+0

¿De modo que la tableta y el teléfono móvil (con el mismo ppp) pero diferentes tamaños de pantalla utilizarán los mismos iconos de 48x48px? – Anthony

17

Puede evitar el fondo del botón estirar estableciendo minWidth & minAlto a 0dp

<Button 
    android:id="@+id/addToFavorites" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:minWidth="0dp" 
    android:minHeight="0dp" 
    android:layout_margin="5dp" 
    android:background="@drawable/favorites_button" /> 
+0

Da poca explicación a tu código. –

+4

No funcionó para mí –

+2

¡Esta es la respuesta correcta! – Randy

7

es bastante fácil:

  • Uso ImageButton en lugar de botón
  • establecer el fondo atributo a nula
  • establecer el src atributo
  • conjunto scaleType atributo a centerInside

Ejemplo de trabajo:

<ImageButton 
android:id="@+id/my_awesome_button" 
android:scaleType="centerInside" 
android:background="@null" 
android:gravity="center" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:src="@drawable/my_awesome_drawable"/> 

Nota: También puede utilizar un DP valor en lugar de "wrap_content" .

Espero que ayude.