web-dev-qa-db-fra.com

android disposition relative sous 2 éléments

j'ai une disposition relative comme celle-ci:

<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/single_row"
    Android:padding="12dip">

    <ImageView
        Android:id="@+id/page_image"
        Android:layout_marginRight="6dip"
        Android:layout_width="66dip"
        Android:layout_height="66dip"
        Android:layout_alignParentLeft="true"
        Android:src="@drawable/no_photo" />
    <TextView
        Android:id="@+id/page_name"
        style="@style/Pulse_content"
        Android:layout_alignTop="@id/page_image"
        Android:layout_toRightOf="@id/page_image"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />
    <TextView
        Android:id="@+id/page_desc"
        Android:layout_below="@id/page_name"
        style="@style/Pulse_content"
        Android:layout_alignLeft="@id/page_name"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Principal Consultant" />
    <Button
        Android:id="@+id/follow_button"
        Android:layout_below="@id/author_image"
        Android:layout_marginTop="15dip"
        Android:layout_alignParentBottom="true"
        Android:text="Follow"
        style="@style/follow_button" />
</RelativeLayout>

Le problème que je rencontre est que je veux que le bouton de suivi soit en dessous de la page_desc ainsi que de l'image de la page. Parfois, le contenu de page_desc aura une hauteur supérieure à la taille de l'image, parfois non. le problème est que si je place le bouton follow_button sous l'image ou la description, alors l'autre sera écrêté. Existe-t-il un moyen efficace/efficace de s'assurer que l'image ou la page_desc sont toujours visibles et au-dessus du bouton?

52
Ben

Voici:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:orientation="vertical"
    Android:background="@drawable/single_row"
    Android:padding="12dip">

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

        <ImageView
            Android:id="@+id/page_image"
            Android:layout_marginRight="6dip"
            Android:layout_width="66dip"
            Android:layout_height="66dip"
            Android:layout_alignParentLeft="true"
            Android:src="@drawable/no_photo" />
        <TextView
            Android:id="@+id/page_name"
            style="@style/Pulse_content"
            Android:layout_alignTop="@id/page_image"
            Android:layout_toRightOf="@id/page_image"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" />
        <TextView
            Android:id="@+id/page_desc"
            Android:layout_below="@id/page_name"
            style="@style/Pulse_content"
            Android:layout_alignLeft="@id/page_name"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Principal Consultant" />
    </RelativeLayout>

    <Button
        Android:id="@+id/follow_button"
        Android:layout_marginTop="15dip"
        Android:text="Follow"
        style="@style/follow_button" />
</LinearLayout>
45

La réponse ici nécessite très peu de changements. Vous aviez la plupart de votre mise en page correcte, cependant, il y a une option qui gâche tout. AlignParentXXXX aura souvent une priorité "fausse" sur vos options LayoutXXXX. Ainsi, en définissant votre bouton sur AlignParentBottom, vous dites au RelativeLayout que la taille du bouton n'est pas calculée dans la taille de la disposition parent.

Vous pouvez résoudre le problème en supprimant simplement AlignParent = "true" de votre bouton. Le code de résultat est ci-dessous et testé. Cette solution reste en phase avec vos envies, je crois.

<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/single_row"
    Android:padding="12dip">

    <ImageView
        Android:id="@+id/page_image"
        Android:layout_marginRight="6dip"
        Android:layout_width="66dip"
        Android:layout_height="66dip"
        Android:layout_alignParentLeft="true"
        Android:src="@drawable/no_photo" />
    <TextView
        Android:id="@+id/page_name"
        style="@style/Pulse_content"
        Android:layout_alignTop="@id/page_image"
        Android:layout_toRightOf="@id/page_image"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />
    <TextView
        Android:id="@+id/page_desc"
        Android:layout_below="@id/page_name"
        style="@style/Pulse_content"
        Android:layout_alignLeft="@id/page_name"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Principal Consultant" />
    <Button
        Android:id="@+id/follow_button"
        Android:layout_below="@id/author_image"
        Android:layout_marginTop="15dip"
        Android:text="Follow"
        style="@style/follow_button" />
</RelativeLayout>

J'ai rencontré de nombreux problèmes similaires avec AlignParent lorsque WrapContent était sur le parent. Le positionnement en haut et en bas crée un comportement indésirable s'il n'est pas préparé pour cela. Je trouve, en général, qu'il est préférable de n'utiliser que l'un ou l'autre (le cas échéant) et d'aligner le reste au-dessus ou en dessous.

6
Fuzzical Logic

Étant donné que tout est interdépendant dans RelativeLayout, peu importe l'ordre dans lequel vous le placez, mais cela importe si vous essayez d'accéder à une vue avant sa création. Par exemple, l'utilisation de l'attribut Android: layout_below n'est pas exactement ce que vous vouliez pour le bouton. Si vous définissez les autres vues Android: layout_above le bouton, il ferait toujours les vues au-dessus.

<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/single_row"
    Android:padding="12dip">

    <Button
        Android:id="@+id/follow_button"
        Android:layout_marginTop="15dip"
        Android:layout_alignParentBottom="true"
        Android:text="Follow"
        style="@style/follow_button" />
    <ImageView
        Android:id="@+id/page_image"
        Android:layout_above="@id/follow_button"
        Android:layout_marginRight="6dip"
        Android:layout_width="66dip"
        Android:layout_height="66dip"
        Android:layout_alignParentLeft="true"
        Android:src="@drawable/no_photo" />
    <TextView
        Android:id="@+id/page_name"
        Android:layout_above="@id/follow_button"
        style="@style/Pulse_content"
        Android:layout_alignTop="@id/page_image"
        Android:layout_toRightOf="@id/page_image"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />
    <TextView
        Android:id="@+id/page_desc"
        Android:layout_above="@id/follow_button"
        Android:layout_below="@id/page_name"
        style="@style/Pulse_content"
        Android:layout_alignLeft="@id/page_name"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Principal Consultant" />
</RelativeLayout>
3
HandlerExploit