web-dev-qa-db-fra.com

Comment mettre AdView dans ConstraintLayout en bas et en dessous d'autres choses?

J'essaie de migrer de RelativeLayout vers ConstraintLayout mais j'ai des problèmes pour ajouter AdMob AdView en bas et le reste du contenu au-dessus. Par exemple, utiliser RelativeLayout était aussi simple que cela. Il vous suffit de mettre Android:layout_alignParentBottom="true" sur AdView et Android:layout_above="@+id/adView" sur la vue qui contient le contenu.

J'essaie de comprendre comment migrer cet exemple de code et ces deux lignes de code vers l'équivalent à l'aide d'un ConstraintLayout au lieu d'un RelativeLayout.

S'il vous plaît, quelqu'un peut-il m'aider avec cette migration?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@Android:color/transparent">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_above="@+id/adView"/>

    <com.google.Android.gms.ads.AdView
        xmlns:ads="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/adView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerHorizontal="true"
        Android:layout_alignParentBottom="true"
        Android:layout_marginTop="5dp"
        ads:adSize="BANNER"
        ads:adUnitId="@string/ad_id_banner">
    </com.google.Android.gms.ads.AdView>
</RelativeLayout>

J'ai testé en utilisant app:layout_constraintBottom_toTopOf="@+id/adView" sur ce que je veux au-dessus de l'adView et app:layout_constraintBottom_toBottomOf="parent" sur l'adView mais cela ne fonctionne pas car le contenu n'est pas au-dessus de l'adView, il est derrière. Et l'adView n'est pas non plus centré. C'est très frustrant.

androidandroid-layoutandroid-relativelayoutandroid-constraintlayout
13
NullPointerException

Tout d'abord, je veux parler de deux comportements qui sont propres à ConstraintLayout et qui ne sont pas nécessairement évidents lorsque vous le prenez pour la première fois.

match_parent n'est pas pris en charge

Ce détail est caché dans une ligne dans le guide du développeur: https://developer.Android.com/training/constraint-layout/index.html

Remarque : vous ne pouvez pas utiliser match_parent pour toute vue dans un ConstraintLayout. Utilisez plutôt des "contraintes de correspondance" (0dp).

Pour obtenir le comportement "match parent", combinez un 0dp cote avec contraintes pour les deux bords correspondants de votre vue:

Android:layout_width="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

Android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Les marges ne sont appliquées que si elles ont une contrainte correspondante

Ajouter simplement Android:layout_marginTop ne fera rien sauf si cette vue a également une contrainte supérieure, comme app:layout_constraintTop_toTopOf ou app:layout_constraintTop_toBottomOf.

Votre problème spécifique

Voici la mise à jour:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@Android:color/transparent">

    <LinearLayout
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:layout_marginBottom="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/adView"/>

    <com.google.Android.gms.ads.AdView
        Android:id="@+id/adView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:adSize="BANNER"
        app:adUnitId="@string/ad_id_banner"/>

</Android.support.constraint.ConstraintLayout>

Pour obtenir le centrage horizontal de AdView, nous contraignons les bords gauche et droit aux bords gauche et droit du parent. Cela "tire" le AdView également de chaque côté, en le centrant. Pour le faire coller au bas de l'écran, nous contraignons son bord inférieur au bas du parent.

Quant au LinearLayout, nous changeons d'abord ses dimensions en 0dp. Cela permettra aux contraintes de définir sa taille. Ensuite, nous contraignons les bords supérieur, gauche et droit aux bords supérieur, gauche et droit du parent. Nous contraignons le bord inférieur au bord supérieur du AdView. Cela lui permet de remplir l'écran horizontalement et de remplir tout l'espace vertical que AdView n'utilise pas.

Enfin, nous changeons la marge supérieure du AdView en une marge inférieure du LinearLayout. En effet, le bord inférieur du LinearLayout est contraint au bord supérieur du AdView (mais le bord supérieur du AdView n'est pas contraint au bord inférieur du LinearLayout, la marge supérieure n'aurait donc aucun effet).

20
Ben P.