Layoutformatierung

Moin,

im Anhang ist das aktuelle Layout, folgendes soll eigentlich raus kommen: Zwischen den beiden Icons soll soviel Platz wie möglich sein. Oder anders ausgedrück, die beiden Icons sollen links bzw. ganz rechts sein.

Die Hautpklasse (nur Konstruktor):

		super(context);

		setOnClickListener(this);

		// horizontaler Kram
		// -- Icon - Details - Edit
		layer = new LinearLayout(context);
		layer.setOrientation(LinearLayout.HORIZONTAL);
		layer.setPadding(PADDING, PADDING, PADDING, PADDING);
		addView(layer, LayoutParams.FILL_PARENT);

		icon = new ImageView(context);
		icon.setMaxHeight(ICONSIZE);
		icon.setMaxWidth(ICONSIZE);
		icon.setMinimumHeight(ICONSIZE);
		icon.setMinimumWidth(ICONSIZE);
		icon.setBackgroundResource(de.x8bit.workspace.android.R.drawable.agt_internet);
		layer.addView(icon);

		details = new LinearLayout(context);
		details.setOrientation(LinearLayout.VERTICAL);
		details.setPadding(PADDING * 2, PADDING, PADDING, PADDING);
		layer.addView(details, LayoutParams.FILL_PARENT);

		edit = new ImageButton(context);
		edit.setBackgroundResource(de.x8bit.workspace.android.R.drawable.agt_utilities);
		edit.setOnClickListener(this);
		layer.addView(edit);
		
		// vertikaler Kram
		// -- Name - Kinder
		name = new TextView(context);
		name.setText("Projekte für Benutzer '" + username + "'");
		details.addView(name, LayoutParams.FILL_PARENT);
	}

Die Klasse selber erbt von Layer (was von LinearLayout erbt, weil ich da noch eine horizontalen Ruler einschiebe)


	public static final int	PADDING	= 5;

	protected Layer(Context context) {
		super(context);

		setOrientation(LinearLayout.VERTICAL);
		setPadding(PADDING, PADDING, PADDING, PADDING);

		View ruler = new View(context);
		ruler.setBackgroundColor(0xff00ff00);
		addView(ruler, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, 2));
	}

}

Im Grunde verschachtle ich nur mehrere LinearLayout und spiele dann an der Orientierung rum. Wie schaffe ich es also das die beiden Icons jeweils ganz außen sind?

danke, mogel

BTW: für alternative Layoutierungen (geiles Wort) bin ich ganz offen

Nimm ein RelativeLayout anstatt ses LinearLayout. Dann kannst du die Elemente gezielt links bzw. rechts ausrichten. Stichwort: alignParentLeft bzw. alignParentRigh

Moin,

habe es jetzt auf relativeLayout umgestellt. Das sortieren der Icons nach Rechts & Links funktioniert. Nur macht jetzt der layer dazwischen Probleme.

		super(context);

		this.context = context;
		setOnClickListener(this);

		// horizontaler Kram
		// -- Icon - Details - Edit
		layer = new RelativeLayout(context);
		layer.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
		layer.setPadding(PADDING, PADDING, PADDING, PADDING);
		addView(layer);

		icon = new ImageView(context);
		icon.setBackgroundResource(de.x8bit.workspace.android.R.drawable.agt_internet);

		details = new LinearLayout(context);
		details.setOrientation(LinearLayout.VERTICAL);
		details.setPadding(PADDING * 2, PADDING, PADDING, PADDING);

		edit = new ImageButton(context);
		edit.setBackgroundResource(de.x8bit.workspace.android.R.drawable.agt_utilities);
		edit.setOnClickListener(this);
		
		
		
		RelativeLayout.LayoutParams paramIcon = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		paramIcon.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
		icon.setLayoutParams(paramIcon);

		RelativeLayout.LayoutParams paramDetails = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
//		paramDetails.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
		paramDetails.addRule(RelativeLayout.RIGHT_OF, icon.getId());
		details.setLayoutParams(paramDetails);
		
		RelativeLayout.LayoutParams paramEdit = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		paramEdit.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
		paramEdit.addRule(RelativeLayout.RIGHT_OF, details.getId());
		edit.setLayoutParams(paramEdit);


		
		layer.addView(icon);
		layer.addView(details);
		layer.addView(edit);

		// vertikaler Kram
		// -- Name - Kinder
		name = new TextView(context);
		name.setText("Projekte für Benutzer '" + username + "'");
		details.addView(name);
		details.addView(new Button(context));
	}

hast Du noch einen Tip was ich falsch mache?

hand, mogel

Edith: jetzt mir Bild

so - ich habe noch ein Beispiel gefunden, allerdings nur mit zwei Elementen. Daher habe ich jetzt etwas gecheatet :slight_smile:

		super(context);

		this.context = context;
		setOnClickListener(this);

		// horizontaler Kram
		// -- Icon - Details - Edit
		layer = new RelativeLayout(context);
		layer.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
		layer.setPadding(PADDING, PADDING, PADDING, PADDING);
		addView(layer);

		edit = new ImageButton(context);
		edit.setBackgroundResource(de.x8bit.workspace.android.R.drawable.agt_utilities);
		edit.setOnClickListener(this);

		cheat = new LinearLayout(context);
		cheat.setOrientation(LinearLayout.HORIZONTAL);

		RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);  
        params.addRule(RelativeLayout.ALIGN_PARENT_LEFT);  
        params.addRule(RelativeLayout.LEFT_OF, edit.getId());
        cheat.setLayoutParams(params);

        RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
        params2.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
        edit.setLayoutParams(params2);
        
		layer.addView(cheat);
		layer.addView(edit);

		
		
		icon = new ImageView(context);
		icon.setBackgroundResource(de.x8bit.workspace.android.R.drawable.agt_internet);

		details = new LinearLayout(context);
		details.setOrientation(LinearLayout.VERTICAL);
		details.setPadding(PADDING * 2, PADDING, PADDING, PADDING);

		cheat.addView(icon);
		cheat.addView(details);

		
		
		// vertikaler Kram
		// -- Name - Kinder
		name = new TextView(context);
		name.setText("Projekte für Benutzer '" + username + "'");
		details.addView(name);
		details.addView(new Button(context));
	}

Ich habe aus den Beispiel den ExitText durch ein LinearLayout ersetzt. Dadurch passt es zumindest vorne, hinten läuft es dann immer noch über. Aber das Problem kann erstmal bestehen bleiben.

hand, mogel

Gibt es eigentlich einen Grund wieso du das Layout nicht in einer XML definierst? Wenn du mit dem XML-Code (noch) nicht Fit bist, kannst du dafür eigentlich gut den WYSIWYG-Editor nutzen.

Die eine Zeile die ich gerade zusammen stricke, wiederholt sich X mal. Und das X klärt sich erst zu Laufzeit, zusätzlich kommt noch das diese Zeile verschiedene Details hat. Ich also einen Teil noch eine OO-Ebene nach oben schieben werde, um ein paar Kinder darunter zu häkeln. In dem Moment wo ich also XML verwende, wird es haarig mit den Kindern, da ich die dann von Hand in XML anpassen muss - wenn sich ein Detail ändert.

Das XML ist ein nettes Feature - nur wird es schnell unpraktisch. Im Grunde macht Google an der Stelle den gleichen Fehler wie MS (im Moment nur [noch] nicht so extrem).

hand, mogel

BTW: ich lasse mich gern eines besseren Belehren

Da ich nicht so gerne mit WYSIWYG-Editoren arbeite, habe ich von beginn an selber das XML geschrieben und den Editor lediglich zur Kontrolle genutzt. Die paar attribute die man kennen muss hat man eigentlich schnell drauf und dann geht das schreiben von GUIs ziemlich gut.

Übersichtlicher wird es dann, wenn man mit Fragmenten arbeitet und wiederkehrenden XML-Code auslagert und includiert.

Wenn du für Android entwickelst, würde ich mich an deiner Stelle mit dem XML anfreunden. Das macht dir das Leben viel einfacher, gerade wenn du unterschiedliche Ansichten für unterschiedliche Displayauflösungen benötigst.

das klingt doch schon mal wieder etwas interessanter - hast Du noch ein paar Einstiegslinks/Tips (via Google finde ich nur die kompletten Beispiele)

Ein guter Anlaufpunkt ist sicherlich die Developer-Seite:
http://developer.android.com/guide/components/fragments.html (Fragmente)
Mit Fragmenten machst du es dir eben leichter deine App für Tablets und Smartphones anzubieten. Jedes Fragment hat dabei seine eigene Layout-Xml. Einfaches Beispiel:
Das Menü ist ein Fragment und der eigentliche Inhalt ist auch in Fragmenten aufgeteilt. Dann hast du eine Activity die eben je nach Gerät anders die Dinge darstellt:
Tablet: auf der linken Seite lädt sie das Menüfragment und auf der Rechten den Inhalt. Beim auswählen eines Menüeintrages wechselts du jetzt nur noch das Inhaltsfragment aus.
Smartphone: erst wird das Menü angezeigt und bei einer Auswahl ersetzt du das Menüfragment durch das entsprechende Inhaltsfragment.

Das mit dem Includieren kannst du hier nachlesen: http://developer.android.com/training/improving-layouts/reusing-layouts.html

danke - ich habe mir das mal angeschaut. Geht aber erst ab API 11, zur Zeit nutze ich noch API 7 -.- Wenn die API irgend wann mal höher ist, dann werde ich mir das genauer anschauen. Sah auf dem ersten Blick zuumindest danach aus als wenn es das ist was mir “fehlt”

Doch, mit den support-Packages ist das möglich:
Setup:
http://developer.android.com/tools/support-library/setup.html
Features:
http://developer.android.com/tools/support-library/features.html

hast Du noch einen Tip was ich falsch mache?

Ich hab mir ehrlich gesagt den Java-Code nicht durchgelesen weil mir das zu mühsam ist, allerdings glaube ich, dass ich die Lösung für dein Problem habe.

So wie ich das verstanden habe, möchtest du ein Element links, ein Element rechts und eines dazwischen. Ich würde das linke und das rechte einfach so ausrichten wie beschrieben und das mittlere je nachdem an das erste anschmiegen oder eben zentrieren.

Folgender Code zentriert dir das:


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

    
    <Button 
        android:id="@+id/btn1"
        android:text="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        />
    
    <Button 
        android:id="@+id/btn2"
        android:text="2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        />
    
    <Button 
        android:id="@+id/btn3"
        android:text="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        />    

</RelativeLayout>

Wenn du es lieber an das erste angeschmiegt haben möchtest wie im Anhang dargestellt, musste du bei btn2 den Code android:layout_centerHorizontal="true" in android:layout_toRightOf="@id/btn1" ändern.

danke,

das mit dem Überlauf am Ende scheint allg. zu bestehen. Aber den Code kann ich erstmal benutzen. Ist zumindest nicht so ein Cheat wie bei mir :smiley:

das mit dem Überlauf am Ende scheint allg. zu bestehen.

Dafür gibt’s mehrere Lösungen die du verwenden könntest:

  1. das Margin von Button 2 so ausdehnen, dass es Button 3 nicht schneidet.
  2. Die Größe von Button 2 dynamisch so setzen, dass es Button 3 nicht schneidet.
  3. Wenn die Größe von Button 1 und Button 3 schon von vornherein fest stehen können, kannst du ein LinearLayout anstatt RelativeLayout verwenden und mit layout_weight arbeiten.

Die Frage ist immer wie wahrscheinlich der Überlauf ist.

[QUOTE=Tomate_Salat;24533]Doch, mit den support-Packages ist das möglich:
Setup:
http://developer.android.com/tools/support-library/setup.html
Features:
http://developer.android.com/tools/support-library/features.html[/QUOTE]

Das geht auch mit „View.inflate(…)“. Um einen möglichen Unterschied kümmere ich mich dann zu gegebener Zeit.

Ansonsten habe ich mich im Projekt im Moment völlig verzettelt. Ich werde da jetzt mal alles neu durchdenken und mit den neuen Erkenntnissen neu strukturieren.

hand, mogel