Vorschau des Layouts mit Merge-Root-Tag in Intellij IDEA / Android Studio

157

Stellen wir uns vor, wir entwickeln zusammengesetzte Komponenten basierend auf LinearLayout. Also erstellen wir eine Klasse wie folgt:

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

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

Wenn wir LinearLayoutals Root von verwenden somelayout.xml, haben wir eine zusätzliche Ansichtsebene, daher verwenden wir das Merge-Tag:

<?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>

Auf der Registerkarte "Vorschau" in der IDE-Zusammenführung fungiert die Zusammenführung jedoch immer als FrameLayout, und wir werden Folgendes sehen: Vorschau mit Zusammenführung

(Es ist Android Studio, Intellij IDEA ist genauso, über Eclipse weiß ich nicht)

Die Vorschau beschleunigt die Entwicklung von Layouts erheblich. Es ist traurig, dass Sie selbst bei einigen Layouts eine so große Hilfe verlieren. Möglicherweise gibt es eine Möglichkeit festzulegen, wie die Vorschau das mergeTag in einem bestimmten Layout interpretieren soll .

Darja
quelle
1
Ich würde mir wünschen, dass diese Unterstützung ebenfalls hinzugefügt wird.
Christopher Perry
Dies kann möglicherweise in Zukunft durch das Attribut tools gelöst werden. code.google.com/p/android/issues/detail?id=61652
Jonas

Antworten:

351

Es gibt ein neues Attribut parentTag tools ( hinzugefügt in Android Studio 2.2 ), mit dem Sie den Layouttyp für ein Zusammenführungs-Tag angeben können, damit das Layout in der Vorschau des Layout-Editors korrekt gerendert wird.

Verwenden Sie also Ihr Beispiel:

<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>

Hinweis : Beide android:layout_widthund android:layout_heightmüssen angegeben werden, damit das Layout im Editor ordnungsgemäß angezeigt wird.

starkej2
quelle
Weiß jemand, wie die Vorschau korrekt angezeigt wird, wenn Sie Ihr benutzerdefiniertes Ansichtstag in eine andere Layoutdatei einfügen? <com.yourpackage.yourcustomview id="@+id/my_cust_view" android:layout_width="match_parent" android:layout_height="match_parent"/>
Arst
1
Siehe visuellen Unterschied raw.githubusercontent.com/nisrulz/android-tips-tricks/develop/…
Zar E Ahmer
2
Da Sie Werkzeuge verwenden, können Sie auch Werkzeuge verwenden: layout_height = "match_parent"
cutiko
Perfekt! Vielen Dank. +1
Carson J.
66

Bearbeiten: Veraltete Antwort. Siehe Antwort von starkej2.


Android Studio 0.5.8 hat Unterstützung für Tools hinzugefügt: showIn. Mithilfe dieser Funktion können Sie eine Vorschau von <Zusammenführungs> -Layouts anzeigen.

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

layout / layout_merge.xml mit 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 mit 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
quelle
13
Gute Nachrichten! Nicht sehr praktisch für zusammengesetzte Komponenten, da wir nur für die Vorschau ein zusätzliches Layout hinzufügen müssen. Aber besser als nichts.
Darja
Irgendwelche Ideen zu etwas Ähnlichem werden in Eclipse unterstützt?
Toguard
3
Sie können einem Ticket folgen, das von einem Google-Entwickler hier gemeldet wurde: code.google.com/p/android/issues/detail?id=61652
Neige
Ich habe programmgesteuert einige Attribute für die Stammansicht (in diesem Fall RelativeLayout) festgelegt, z. B. das Auffüllen. Natürlich werden sie in diesem Hilfslayout nicht angewendet (weil Sie eine völlig andere Ansicht verwenden). Die einzige Lösung bestand darin, die gesamte benutzerdefinierte Ansicht im Hilfslayout zu verwenden.
Felix Edelmann
nicht veraltet, es könnte verwendet werden, wenn Sie keine generische Anzeige wünschen
amorenew
-5

Es ist auch möglich, eine benutzerdefinierte Klasse als übergeordnete Klasse anstelle einer zusammengeführten Klasse zu verwenden

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

Und dann dieses Layout direkt aufblasen und die Ergebnisansicht auf SomeView. Android Studio überprüft direkt die übergeordnete Klasse von SomeViewund behandelt die Vorschau wie LinerLayout. Sie können die onFinishInflate()Methode in verwenden SomeView, um Ansichten nach zu binden findViewById(). Der Vorteil dieser Lösung besteht darin, dass Sie alle Layoutdefinitionen oder Stildefinitionen direkt in die Layoutdatei setOrientation()einfügen können. Sie können keine Methode wie im Code verwenden.

Atom
quelle
2
Dies führt zu einer unendlichen Rekursion und der Stapel läuft beim Versuch einer Vorschau über, sodass das gesamte Android Studio für immer hängen bleibt.
Mato