web-dev-qa-db-fra.com

Ajuster l'image d'arrière-plan pour envelopper le contenu de la mise en page

J'ai une mise en page qui contient des champs de texte et une image d'arrière-plan qui s'affiche en haut de mon activité. J'aimerais que l'image d'arrière-plan soit à l'échelle pour envelopper le contenu (ne vous souciez pas du rapport de format). Cependant, l'image est plus grande que le contenu, aussi la mise en page enveloppe-t-elle l'image d'arrière-plan. Voici mon code original:

<RelativeLayout 
    Android:layout_width="fill_parent"
    Android:id="@+id/HeaderList" 
    Android:layout_gravity="top"
    Android:layout_height="wrap_content" 
    Android:background="@drawable/header">
    <TextView 
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content" 
        Android:id="@+id/NameText"
        Android:text="Jhn Doe" 
        Android:textColor="#FFFFFF"
        Android:textSize="30sp" 
        Android:layout_alignParentLeft="true"
        Android:layout_alignParentTop="true" 
        Android:paddingLeft="4dp"
        Android:paddingTop="4dp" 
    />
    <TextView 
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content" 
        Android:textColor="#FFFFFF"
        Android:layout_alignParentLeft="true"
        Android:id="@+id/HoursText"
        Android:text="170 hours" 
        Android:textSize="23sp"
        Android:layout_below="@+id/NameText" 
        Android:paddingLeft="4dp" 
    />
</RelativeLayout>

Après avoir cherché d'autres questions, j'ai trouvé les deux suivantes:

Comment envelopper les vues de contenu plutôt que d'arrière-plan dessinable?

Mettre à l'échelle une image dessinable ou en arrière-plan?

Sur cette base, j'ai créé un FrameLayout avec ImageView montrant l’arrière-plan. Malheureusement, je ne peux toujours pas le faire fonctionner. Je souhaite que la hauteur de l'image d'arrière-plan soit réduite/agrandie avec la taille des vues de texte, mais avec FrameLayout, le mode ImageView correspond à la taille de son parent et je ne trouve pas le moyen de l'adapter à son parent. la taille de la disposition d'affichage du texte. Voici mon code mis à jour:

<FrameLayout 
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content" >

    <ImageView Android:src="@drawable/header"
        Android:layout_width="fill_parent" 
        Android:scaleType="fitXY"
        Android:layout_height="fill_parent" 
        />
    <RelativeLayout 
        Android:layout_width="fill_parent"
        Android:id="@+id/HeaderList" 
        Android:layout_gravity="top"
        Android:layout_height="wrap_content"
        >
        <TextView 
            Android:layout_height="wrap_content"
            Android:layout_width="wrap_content" 
            Android:id="@+id/NameText"
            Android:text="John Doe" 
            Android:textColor="#FFFFFF"
            Android:textSize="30sp" 
            Android:layout_alignParentLeft="true"
            Android:layout_alignParentTop="true" 
            Android:paddingLeft="4dp"
            Android:paddingTop="4dp" 
            />
        <TextView 
            Android:layout_height="wrap_content"
            Android:layout_width="wrap_content" 
            Android:textColor="#FFFFFF"
            Android:layout_alignParentLeft="true" 
            Android:id="@+id/HoursText"
            Android:text="170 hours" 
            Android:textSize="23sp"
            Android:layout_below="@+id/NameText" 
            Android:paddingLeft="4dp" 
            />
    </RelativeLayout>
</FrameLayout>

Quelqu'un a-t-il des suggestions sur la meilleure façon de mettre une image à l'échelle du contenu d'une mise en page? Le rapport de format de l'image ne me concerne pas, cela n'a pas d'importance, je veux juste qu'elle remplisse l'arrière-plan.

Merci!

androidbackgroundandroid-linearlayoutandroid-relativelayoutandroid-framelayout
37
bjg222

J'ai eu le même problème (je pense), et la seule solution que j'ai pu trouver était la suivante:

<RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    >

    <View
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/some_image"
        Android:layout_alignTop="@+id/actual_content"
        Android:layout_alignBottom="@id/actual_content"
        Android:layout_alignLeft="@id/actual_content"
        Android:layout_alignRight="@id/actual_content"
        />

    <LinearLayout
        Android:id="@id/actual_content"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true"
        >

       <!-- more stuff ... -->

    </LinearLayout>

</RelativeLayout>
63
Squatting Bear

Vous pouvez essayer cette astuce,

  • FrameLayout (wrapcontent, wrapcontent)
    • ImageView (match parent, match parent) // c'est votre fond
    • LinearLayout (wrapcontent, wrapcontent)
      • Tous vos contenus vont à l'intérieur de cette mise en page linéaire ou de tout autre type comme vous le souhaitez
3
Umair

Travailler avec RealtiveLayout (pas obligatoire mais à la place de FrameLayout et utiliser Android: scaleType = "fitXY". Déplacez l'imageView vers RealtiveLayout qui contient les vues de texte Android: id = "@ + id/HeaderList" et désactivez l'arrière-plan Android: background = "@ drawable/header "à ce niveau.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
         Android:id="@+id/principal"
         Android:layout_width="fill_parent"
         Android:layout_height="fill_parent"
         Android:background="@drawable/header" >

     <RelativeLayout 
         Android:layout_width="fill_parent"
         Android:id="@+id/HeaderList" 
         Android:layout_gravity="top"
         Android:layout_height="wrap_content" >  


         <ImageView
             Android:id="@+id/backImg"
             Android:layout_width="fill_parent"
             Android:layout_height="fill_parent"
             Android:layout_centerInParent="true"
             Android:adjustViewBounds="true"
             Android:background="@color/blancotransless"
             Android:src="@drawable/header"
             Android:scaleType="fitXY" >
         </ImageView>

             <TextView 
                 Android:layout_height="wrap_content"
                 Android:layout_width="wrap_content" 
                 Android:id="@+id/NameText"
                 Android:text="John Doe" 
                 Android:textColor="#FFFFFF"
                 Android:textSize="30sp" 
                 Android:layout_alignParentLeft="true"
                 Android:layout_alignParentTop="true" 
                 Android:paddingLeft="4dp"
                 Android:paddingTop="4dp" 
                 />
             <TextView 
                 Android:layout_height="wrap_content"
                 Android:layout_width="wrap_content" 
                 Android:textColor="#FFFFFF"
                 Android:layout_alignParentLeft="true" 
                 Android:id="@+id/HoursText"
                 Android:text="170 hours" 
                 Android:textSize="23sp"
                 Android:layout_below="@+id/NameText" 
                 Android:paddingLeft="4dp" 
                 />
         </RelativeLayout> 
      </RelativeLayout>

Plus ou moins ça devrait marcher!

2
Zeus Monolitics

Créez un fichier XML dessinable, par exemple mybackground.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:src="@drawable/header"
    Android:gravity="fill" />

Puis dans votre RelativeLayout lors de la première utilisation du fragment de code 

Android:background="@drawable/mybackground"
1
yoah

Je pense que j'ai déjà fait quelque chose de similaire dans le passé. Essayez de jouer avec le réglage de la gravité dans votre vue, je pense que l'un d'eux devrait faire ce que vous voulez.

0
jsonfry

Je ne l'ai pas essayé, mais si vous définissez l'image d'arrière-plan de manière dynamique sur le onCreate, cela pourrait fonctionner. La taille de la mise en page doit déjà être définie.

0
Skyler Lauren