Acceder

Ver la Versión Completa : Distribución de elementos en layout


MortadeloComic
28/10/14, 10:39:00
¿Como se hace para distribuir verticalmente elementos y que queden equidistantes.?
Por ejemplo, si tengo 3 imagenes (ImageView), querría que haya la misma distancia entre ellos y con los bordes superior e inferior de la pantalla.

Guixe94
28/10/14, 10:50:42
Pues primero pones la orientacion del layour en vertical y luego a cada objeto le puedes añadir un margin top o bottom de la separacion que quieras en cada uno

kriogeN
28/10/14, 12:20:50
Usando "layout_weight" y como contenedor padre un LinearLayout con "orientation" vertical, también cada elemento en el LinearLayout debe tener un "height" de 0.

JamesRevelo
29/10/14, 02:39:37
Usa un Relative Layout y haz que los elementos no centrales dependan de los bordes del view del centro

androizado
29/10/14, 12:20:39
Yo utilizaría lo siguiente, que es como mejor me manejo. Pero a lo mejor hay mejores opciones.

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

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="3">

<ImageView
android:id="@+id/image1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="10dp"
android:src="@drawable/ic_launcher" />

<ImageView
android:id="@+id/image2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="10dp"
android:src="@drawable/ic_launcher" />

<ImageView
android:id="@+id/image3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="10dp"
android:src="@drawable/ic_launcher" />

</LinearLayout>

</LinearLayout>

Espero que te sirva

MortadeloComic
29/10/14, 18:21:33
Estoy siguiendo el ejemplo de @androizado, y parece ir bien, el problema es que me estira las imágenes horizontalmente, se nota sobre todo al poner la tableta en posición horizontal, entonces ¿como alterar el alto de la imagen (el valor height) para mantener la relación de aspecto de alto y ancho?

Al final ,e va mejor con el método de @Jamesravelo.

gonza28
30/10/14, 10:17:10
No es gran cosa lo que voy a aportar pero puede servir ya que justo estoy peleando con un scroll. L cuestion es que con u RelativeLayout preparé esto. a demas tiene un scroll y dentro de el un LinearL. pero en el Relative puedes alinear como quieras.

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp" >

<ImageView
android:id="@+id/img_empanadas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="7dp"
android:src="@drawable/ic_fibers_sb" />

<ImageView
android:id="@+id/imag_launch_empanadas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:src="@drawable/ic_chevron_right_white_48dp" />

<View
android:id="@+id/view7"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#2e343d" />

<TextView
android:id="@+id/text_title_empanadas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Titulo largo"
android:textColor="#fb6b0c"
android:textSize="15dp" />

<TextView
android:id="@+id/text_sub_empanadas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Subtitulo"
android:textColor="#ffffff"
android:textSize="12dp" />

</RelativeLayout>

Resultado

http://i.imgur.com/8ByEmfd.png

MortadeloComic
30/10/14, 12:09:25
A ver, he puesto el siguiente código:


<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="150dp"
android:gravity="center"
android:background="#449def"
>
<ImageView
android:id="@+id/Imagen2"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_launcher"
/>
<ImageView
android:id="@+id/Imagen1"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginLeft="1dp"
android:src="@drawable/ic_launcher"
android:layout_toLeftOf="@id/Imagen2"
/>

<ImageView
android:id="@+id/Imagen3"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_launcher"
android:layout_toRightOf="@id/Imagen2"
/>
</RelativeLayout>

Y me sale como en la imagen adjunta, la primera imagen corresponde a un Nexus 4, y la segunda a un Nexus 10, ambas son la vista previa del emulador del Adroid Studio.

Me gustaría que en la nexus 10 me salieran más separaditas las imágenes, puedo añadir las lineas al Imagen2:
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
pero entonces en el Nexus 4 salen las imágenes cortadas, se salen fuera de la pantalla.
No se... solo se me ocurre arreglarlo mediante código, calcular el ancho de la pantalla y el tamaño de las imagenes y en función del espacio libre asignar más o menos espacio. ¿como lo veis?
Otra cosa curiosa, si al Imagen1 le elimino la linea android:layout_marginLeft="1dp" me desaparece una de las 3 imágenes, vamos que en lugar de ver 3 androids veo 2... ¿porque pasa esto?.

gonza28
30/10/14, 12:30:00
Para las tablets, creas otra layout apropiadas para ellas y alli pegas tus codigos nuevamente y los ubicas como quieres. No se verá bien nuca en una tablet real (aviso).
Nuevamente debes crear las layout para las distintas tablet, aun que acomodes como acomodes, en el emulador es una cosa, en la tablet es otra. (crea las layout)

MortadeloComic
30/10/14, 13:13:34
Pues si, parece buena tecnica lo de hacer un layout para la tableta y otra para los moviles. Sigo provando.

MortadeloComic
01/11/14, 12:06:34
Bueno, estoy poniendo unas imagenes centradas como se ve en las fotos que puse en el mensaje #8 de este hilo. lo he conseguido haciendo lo que ha dicho @gonza28, lo de poner layout diferentes para tabletas y para moviles, ahora quería elimiar el título de la aplicación, ¿como lo eliminais vosotros?.
Lo he intentado poniendo android:theme="@android:style/Theme.NoTitleBar.Fullscreen" en el android manifest, y viendo las previas del android studio, funciona para la nexus 10, pero no para el nexus 4, y no entiendo porque, (moviles y tabletas reales no tengo por aquí para provar en este momento.). También lo he intentado mediante programación con requestWindowFeature(Window.FEATURE_NO_TITLE); y lo mismo, en las previas se ve sin título para la nexus 10 y con título para la nexus 4... ¿será fallo del android studio?