Positionierung auf verschiedenen Geräten

[snatch]

Hallo,

Ich schreibe hier gerade an einer App und komme einfach nicht weiter. Es geht um Positionierung auf verschiedenen Geräten.

Klar, an sich ist die beste Lösung das ganze mit dp zu lösen. Jetzt ist die Frage ob ich zu blöd bin, oder ob es einfach nicht funktioniert.

Das Problem stellt sich so dar, dass ich eine Grafik bzw. mehrere Grafiken habe, die sich auf jedem Gerät ausgehend von der Mitte des Displays immer an derselben Stelle positionieren sollen.
Beim entwickeln teste ich im Simulator immer auf den Plattformen Nexus 4, Nexus 5 und Nexus 7. Von Tablets will ich noch gar nicht denken.
Nun ist es so, dass die Grafiken sich zwar immer die Mitte herum positionieren, jedoch sind Abstände einfach immer viel zu unterschiedlich.

Momentan stehe ich einfach auf'm Schlauch. An sich sollte das umrechnen in dp doch funktionieren.

Hier noch ein paar Informationen zu meinem Code.
Ich positioniere die Grafiken in einem Imageview mittels margin Angaben. Hier die Funktion die dafür zuständig ist:

private void showAnimation() {
    this.clearElements();

    Object[] father = (Object[])this.theStates.get(this.currentState.get("father"));
    Object[][] child = (Object[][])father[0];

    for(int i = 0; i < child.length; i++) {
        RelativeLayout.LayoutParams exampleParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        exampleParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);

        if(child[i][5].getClass() == Integer.class || child[i][7].getClass() == Integer.class) {
            exampleParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
            if(this.isTablet(this.context)) {
                // Um das Nexus 7 zu erkennen.
                if(this.getDensity(this.context) != 1.33f) {
                    // Positionierung ausgehend von der Displaymitte
                    exampleParams.leftMargin = dpToPx((Integer)child[i][7]);
                    exampleParams.topMargin = dpToPx((Integer)child[i][8]);
                } else {
                    // Positionierung ausgehend von der Displaymitte
                    exampleParams.leftMargin = (int)(this.displayWidthMiddle + (Integer)child[i][5]);
                    exampleParams.topMargin = (int)(this.displayHeightMiddle + (Integer)child[i][6]);
                }
            } else {
                // Positionierung ausgehend von der Displaymitte
                exampleParams.leftMargin = (int)(this.displayWidthMiddle + (Integer)child[i][5]);
                exampleParams.topMargin = (int)(this.displayHeightMiddle + (Integer)child[i][6]);
            }
        } else if(child[i][5].getClass() == String.class || child[i][7].getClass() == String.class) {
            exampleParams.addRule(RelativeLayout.CENTER_HORIZONTAL);

            if(this.isTablet(this.context)) {
                exampleParams.topMargin = (int)(this.displayHeightMiddle + (Integer)child[i][8]);
            } else {
                exampleParams.topMargin = (int)(this.displayHeightMiddle + (Integer)child[i][6]);
            }
        }

        // Animation
        ImageView e = new ImageView(this.context);
        e.setImageDrawable((BitmapDrawable) this.context.getResources().getDrawable(this.context.getResources().getIdentifier(child[i][0].toString(), "drawable", this.context.getPackageName())));
        e.setLayoutParams(exampleParams);
        if(child[i][4] == "alpha_in") {
            Animation animate = AnimationUtils.loadAnimation(this.context, R.anim.alpha_in);
            e.startAnimation(animate);
        } else if(child[i][4] == "left_to_right") {
            Animation animate = AnimationUtils.loadAnimation(this.context, R.anim.left_to_right);
            e.startAnimation(animate);
        } else if(child[i][4] == "right_to_left") {
            Animation animate = AnimationUtils.loadAnimation(this.context, R.anim.right_to_left);
            e.startAnimation(animate);
        }
        this.elements.add(e);
        pView.addView(e);
    }
}

Wäre das super, wenn mir da jemand weiterhelfen könnte.

Grüße.

 

[markus.tullius]

Hi,

eine komplettes Layout im Programmcode zu bauen macht unter Android kein Sinn. Das Layout gehört in die xml - Dateien. Dort nimmt dir das System viel Arbeit ab.

Google hat zu den Thema ein paar Links ins Netz gestellt:

Supporting Multiple Screens | Android Developers

Metrics and Grids | Android Developers

Iconography | Android Developers

Supporting Different Screens | Android Developers

 

[snatch]

Danke für die Antwort.

Diese Seiten kenne ich natürlich alle.
Auch wenn ich das ganze mittels XML mache, werden die dp Angaben auf dem Nexus 7 bzw. auf dem Nexus 10 sehr merkwürdig umgesetzt. Wenn ich beispielsweise 300dp setze, ist das Verhältnis zum Display auf dem Nexus 5 ein ganz anderes als auf dem Nexus 7. Egal ob ich es per XML oder Code setze.

 

[markus.tullius]

Das ist gewollt (Das steht auch im ersten Link den ich dir geschickt habe). Android unterscheidet beim Layout zwischen Tablet und Phones.

Supporting Multiple Screens | Android Developers

Am besten benutzt du Ressourcen und setzt im Layout so viele Werte wie möglich relativ.

 

[ui_3k1]

Ach so: und vielleicht wäre es sogar sinnvoll gerade mit großen displays zu prüfen... Immer hin erkennt man so recht schnell ob man das hin bekommen hat was man darstellen wollte. Getreu dem Motto "no pain, no gain"

 

[snatch]

Ich danke euch für die Hilfe.
Habe die Positionierung nun soweit hin bekommen. Wie markus.tullius schon angesprochen hat, ist es nicht besonders sinnvoll Layouts im Code zu erstellen. Ich habe das ganze jetzt noch mal reduziert und mache so viel wie möglich per XML.
Außerdem arbeite ich nun mit relativen angaben. Läuft ganz gut.

Das ganze hat mich aber nun zu einem neuen Positionierungs-Problem gebracht.
Ich habe zwei RelativeLayouts (RL) die zum einen den unteren Bereich bzw. den oberen Bereich des kompletten Layouts darstellen. Nun habe ich einige Elemente die ich gerne im unteren RL platzieren möchte. Diese Elemente sollen aber vom unteren RL (b) in das obere RL (e) überlappen.
Besteht diese Möglichkeit? Weil momentan ist es der Fall, dass die Grafiken abgeschnitten werden, sobald sie überlappen. Das ist auch der Fall, wenn ich sie im oberen RL platziere um sie dann nach unten überlappen zu lassen.
Hier mein Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:id="@+id/bm">
    <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:layout_weight="32"
            android:id="@+id/e">
        <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"
                android:id="@+id/elements_background" android:baselineAlignBottom="false"/>
        <LinearLayout android:orientation="horizontal"
                      android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/elinear"
                      android:baselineAligned="false">
            <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"
                            android:layout_weight="50" android:id="@+id/eleft" />
            <RelativeLayout android:layout_width="90dp" android:layout_height="fill_parent" android:id="@+id/elements_middle"/>
            <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"
                            android:layout_weight="50" android:id="@+id/eright" />
        </LinearLayout>
    </RelativeLayout>
    <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="68"
            android:id="@+id/b">
        <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/bottom_background"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"/>
    </RelativeLayout>
</LinearLayout>

 

[snatch]

Habe die Lösung nun nach langem hin und her gefunden. Am Ende war sie wirklich einfacher und logischer als gedacht.

Dem LinearLayout mit der ID "bm" habe ich nun einfach folgendes hinzugefügt:

android:clipChildren="false"