176 votes

Prévisualisation de la mise en page avec la balise Merge Root dans Intellij IDEA/Android Studio

Imaginons que nous développions un composant composé basé sur LinearLayout. Nous créons donc une classe comme celle-ci :

public class SomeView extends LinearLayout {
    public SomeView(Context context, AttributeSet attrs) {
        super(context, attrs);

        setOrientation(LinearLayout.VERTICAL);
        View.inflate(context, R.layout.somelayout, this);
    }
}

Si nous utilisons LinearLayout comme racine de somelayout.xml nous aurons un niveau de vue supplémentaire, donc nous utiliserons la balise merge :

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Some text"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Some other text"/>
</merge>

Mais dans l'onglet Aperçu de l'IDE, la fusion agit toujours comme FrameLayout, et nous verrons quelque chose comme ça : Preview with merge

(C'est Android Studio, Intellij IDEA c'est pareil, pour Eclipse je ne sais pas)

Preview accélère beaucoup le développement des mises en page, il est triste de perdre une telle aide, même pour certaines mises en page. Peut-être qu'il y a un moyen de spécifier, comment Preview devrait interpréter merge tag dans une mise en page particulière ?

404voto

blacksh33p Points 941

Il existe un nouvel attribut d'outils parentTag ( ajouté dans Android Studio 2.2 ) que vous pouvez utiliser pour spécifier le type de mise en page d'une balise de fusion, ce qui permettra à la mise en page de s'afficher correctement dans l'aperçu de l'éditeur de mise en page.

Donc, en utilisant votre exemple :

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:parentTag="LinearLayout"
    tools:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Some text"
        android:textSize="20sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Some other text"/>
</merge>

Note : Les deux android:layout_width y android:layout_height doit être spécifié pour que la mise en page s'affiche correctement dans l'éditeur.

67voto

Jonas Points 197

Edit : Réponse périmée. Voir la réponse de starkej2.


Android Studio 0.5.8 a ajouté le support de tools:showIn. En l'utilisant, il est possible de prévisualiser les mises en page <fusion>.

http://tools.Android.com/recent/androidstudio058released

layout/layout_merge.xml avec tools:showIn :

<merge xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:custom="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   tools:showIn="@layout/simple_relativelayout">

......

</merge>

layout/simple_relativelayout.xml avec include :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/layout_merge"/>

</RelativeLayout>

-6voto

ATom Points 4809

Est-il également possible d'utiliser une classe personnalisée comme parent au lieu d'une fusion comme suit

<com.mycompany.SomeView xmlns:android="http://schemas.android.com/apk/res/android">
...
</com.mycompany.SomeView>

Et ensuite, gonfler directement cette mise en page et projeter la vue du résultat à SomeView . Android studio vérifiera directement la classe mère de SomeView et de gérer l'aperçu comme LinerLayout . Vous pouvez utiliser onFinishInflate() dans la méthode SomeView pour lier les vues par findViewById() . L'avantage de cette solution est que vous pouvez placer toutes les définitions de mise en page ou de style directement dans le fichier de mise en page, vous ne pouvez pas utiliser une méthode comme la suivante setOrientation() en code.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X