Unklarheiten mit dem ConstraintLayout

[no1Ltan]

Hallo,

ich finde die Grundidee vom ConstraintLayout - eine flache Hierachie zu nutzen - interessant.
Wenn ich mir neuere Tutorials anschaue, wird meistens empfohlen, auf das ConstaintLayout zu setzen.
Leider habe ich dennoch oft Schwierigkeiten, meine Ideen umzusetzen.
Es sieht oftmals anders aus als erwartet.

In diesem Beispiel möchte ich eine Vollbild-Anwendung erstellen, die im Querformat läuft.
Es sollen 2 Objekte platziert werden nebeneinander platziert werden - 1 ImageView und 1 TextView.
Die ImageView soll 100% der Höhe und 70% der Breite einnehmen - die TextView 100% der Höhe und 30% der Breite.


In meiner MainActivity habe ich diese 2 Codezeilen innerhalb der onCreate-Methode hinzugefügt:

        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);

Im Design-Editor (in Android Studio 3.1.3.) habe ich dann das Theme auf Fullscreen geschaltet.
Als Target Devices Nexus 5 (1920x1080) - was auch meinem Emulator entspricht.

In der build.gradle (module) hab ich API27 gewählt und das aktuelle ConstraintLayout gewählt

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

Die activity_main.xml besteht aus:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view_background"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="0.7"
        app:layout_constraintHeight_percent="1.0"
        android:contentDescription="TODO"
        android:src="@drawable/background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/text_view"
        android:background="#137cc2"
        android:text="TextView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="1.0"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintWidth_percent="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

Es sieht so hier aus, was ich schon mal fragwürdig finde:

Ich hätte erwartet, dass das linke Bild 1. eine Höhe von 100% hat und 2. ganz links anfängt.
Die TextView rechts scheint ok zu sein.

Sowas ähnliches hatte ich vor einiger Zeit mit 2 TextViews gemacht - beide auf 50% gesetzt.
Sah einwandfrei aus - keine Ahnung warum das hier mit dem 70/30 nicht klappt...

Danke für jede hilfe.
Grüße

 

[jogimuc]

Hi
warum eigentlich so Kompliziert in Java ?
das Kannst du alles im Layout machen dazu sind die Grund Lienen da.
Setze eine im BluePrint genau bei 70 Prozent.
Nun erstelle dein Imageview und Textview wie gewohnt und richte die Anfasser zu der Grundline aus .

<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
                                             android:layout_height="match_parent">

    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp" app:srcCompat="@mipmap/ic_launcher_round"
            android:id="@+id/imageView2" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/guideline" android:background="@android:color/darker_gray"/>
    <TextView
            android:text="TextView"
            android:layout_width="0dp"
            android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/textView" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintVertical_bias="0.0" app:layout_constraintStart_toStartOf="@+id/guideline"
            android:background="@android:color/holo_blue_bright"/>
    
    <android.support.constraint.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/guideline"
                                          android:orientation="vertical" app:layout_constraintGuide_percent="0.7"/>
</android.support.constraint.ConstraintLayout>

-- Dieser Beitrag wurde automatisch mit dem folgenden Beitrag zusammengeführt --

Hier noch ein Bild

 

[no1Ltan]

Hi und danke für die Antwort.
Die Guidelines kenne ich, damit funktioniert es.

Allerdings finde ich es dennoch schade, dass meine Methode nicht funktioniert, da ich wie gesagt es schon mal so ähnlich gemacht hab.
Es geht einfach darum, dass ich gerne mal XML-Dateien erzeugen lassen würde, ohne direkt alles in Android Studio machen zu müssen.

Ja, in Android Studio geht das zwar auch gut, aber wenn man die Chance hat, auch Dritt-Tools zum Designen zu verwenden,
und am Ende eine generierte XML-Datei zu erzeugen, warum auch nicht diese nutzen?

P.S. Java hatte ich nur genutzt, um das auf Vollbild zu setzen - hatte ich so in einem Tutorial gesehen.

Grüße

 

[jogimuc]

Hi ich würde sagen das es hauptsächlich daran ligt
app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>

Das die View nutzt somit auch das gesamte Parent (rechter Rand)
und dein Textview legt sich darüber .