Aperçu de la mise en page avec la balise racine de fusion dans Intellij IDEA / Android Studio

158

Imaginons que nous développions un composant composé basé sur LinearLayout. Donc, nous créons une classe comme ceci:

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 LinearLayoutcomme racine de somelayout.xml, nous aurons un niveau de vue supplémentaire, nous utilisons donc une balise de fusion:

<?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: Aperçu avec fusion

(C'est Android Studio, Intellij IDEA est juste la même chose, à propos d'Eclipse je ne sais pas)

L'aperçu accélère beaucoup le développement des mises en page, c'est triste de perdre une si grande aide, même pour certaines mises en page. Peut-être existe-t-il un moyen de spécifier, comment Preview doit interpréter la mergebalise dans une mise en page particulière?

Darja
la source
1
J'aimerais également voir ce support ajouté.
Christopher Perry
Cela pourrait être résolu dans le futur par l'attribut tools. code.google.com/p/android/issues/detail?id=61652
Jonas

Réponses:

352

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 rendra le rendu de la mise en page 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>

Remarque : Les deux android:layout_widthet android:layout_heightdoivent être spécifiés pour que la mise en page s'affiche correctement dans l'éditeur.

starkej2
la source
1
Quelqu'un sait-il comment afficher correctement l'aperçu lorsque vous ajoutez votre balise de vue personnalisée dans un autre fichier de mise en page? <com.yourpackage.yourcustomview id="@+id/my_cust_view" android:layout_width="match_parent" android:layout_height="match_parent"/>
Arst
1
Voir la différence visuelle raw.githubusercontent.com/nisrulz/android-tips-tricks/develop/…
Zar E Ahmer
2
Puisque vous utilisez des outils, vous pouvez également utiliser des outils: layout_height = "match_parent"
cutiko
Parfait! Merci. +1
Carson J.
66

Edit: réponse obsolète. Voir la réponse de starkej2.


Android Studio 0.5.8 a ajouté la prise en charge des outils: 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 les outils: 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>
Jonas
la source
14
Bonnes nouvelles! Pas très pratique pour les composants composés, car nous devons ajouter une mise en page supplémentaire uniquement pour l'aperçu. Mais mieux que rien.
darja
Des idées sur quelque chose de similaire sont prises en charge dans Eclipse?
Toguard
3
Vous pouvez suivre un ticket, rapporté par un développeur Google ici: code.google.com/p/android/issues/detail?id=61652
Neige
J'ai défini certains attributs sur la vue racine (dans ce cas RelativeLayout) par programmation, comme le remplissage. Bien sûr, ils ne sont pas appliqués dans cette disposition d'aide (car vous utilisez une vue complètement différente). La seule solution était d'utiliser toute la vue personnalisée dans la mise en page de l'assistant.
Felix Edelmann
pas obsolète, il pourrait être utilisé lorsque vous ne voulez pas de visualisation générique
amorenew
-5

Est également possible d'utiliser une classe personnalisée comme parent au lieu de fusionner comme

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

Et puis gonflez directement cette mise en page et diffusez la vue des résultats SomeView. Le studio Android vérifiera directement la classe parent de SomeViewet gérera l'aperçu comme LinerLayout. Vous pouvez utiliser la onFinishInflate()méthode dans SomeViewpour lier les vues par findViewById(). L'avantage de cette solution est que vous pouvez mettre toutes les définitions de mise en page ou de style directement dans le fichier de mise en page, vous ne pouvez pas utiliser de méthode comme setOrientation()dans le code.

Atome
la source
2
Cela introduit une récursion infinie et la pile déborde lors de la tentative de prévisualisation, ce qui fait que tout Android Studio est suspendu pour toujours.
mato le