Diseño horizontal flexible con `layout_weight` y` maxWidth`

Tengo un TextView y un cuadrado ImageView que me gustaría mostrar en un diseño lineal horizontal. Cada uno debe tomar la mitad de la anchura de la vista de los padres y la altura debe ajustarse al contenido (es decir, la imagen). El texto debe estar centrado verticalmente.

La restricción adicional es que la imagen no debe crecer más allá de un maxWidth dado (= maxHeight ), y el exceso de ancho debe estar disponible para el TextView . Obviamente, esto está en conflicto con la regla 50/50 arriba. ¿Existe una manera de priorizar las restricciones, es decir, permitir que la imagen tome la mitad del espacio a menos que exceda un tamaño determinado?

resultado deseado

Estos son diseños que intenté:

La primera estira bien el lado izquierdo al espacio disponible. Pero la imagen toma más de la mitad del ancho como su layout_weight no se especifica (como en la imagen de abajo).

 <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:orientation="vertical" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Some text."/> </LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxWidth="200dp" android:adjustViewBounds="true" android:src="@drawable/image" /> </LinearLayout> 

Sin <code> layout_weight </ code>

Cuando agrego layout_weight al ImageView siempre toma la mitad del ancho e ignoro el maxWidth (ver imagen abajo).

  <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:maxWidth="200dp" android:adjustViewBounds="true" android:src="@drawable/image" /> 

Con <code> layout_weight </ code>

La inclusión de ImageView en otro LinearLayout habilitar el maxWidth , pero el LinearLayout rodea LinearLayout todavía la mitad del espacio disponible (ver imagen a continuación).

  <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right"> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:maxWidth="200dp" android:adjustViewBounds="true" android:src="@drawable/image" /> </LinearLayout> 

Utilizando la inclusión de <code> LinearLayout </ code>

Otra opción que he encontrado para escenarios similares es usar un RelativeLayout con una vista invisible como un divisor central, pero que bloquea la división a 50/50 (o dondequiera que se sitúe el divisor).

3 Solutions collect form web for “Diseño horizontal flexible con `layout_weight` y` maxWidth`”

Bueno, vamos a seguir adelante y publicar el xml que creé, es bastante simple, hace la mayoría de sus condiciones .. Una cosa que estoy teniendo problemas con es la parte donde cada vista toma la mitad de la anchura de la vista padre. Espero que esto todavía te ayude de alguna manera.

Sample_layout.xml

 <?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="wrap_content" android:layout_margin="2dp" android:background="@android:color/darker_gray"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/img_sample" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginRight="2dp" android:layout_toLeftOf="@id/img_sample" android:background="@color/colorPrimary" android:gravity="center_vertical" android:text="Some text." /> <ImageView android:id="@id/img_sample" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_marginLeft="2dp" android:adjustViewBounds="true" android:maxWidth="200dp" android:src="@drawable/sample_img" /> </RelativeLayout> 

Aquí hay una captura de pantalla de ejemplo: Introduzca aquí la descripción de la imagen

Si alguna vez averiguar cómo a la mitad de cada cosa, amablemente comentario aquí, sería bueno saber acerca de ello para su posible uso futuro. 🙂

PS: ¿Has pensado en hacer la mitad de cada cosa programáticamente? Al igual que la comprobación de LayoutParams entonces la configuración dinámica de weightSum y el layout_weight s.

Ejemplo de imagen recuperada de este enlace

 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentTop="true" android:layout_weight="1" android:adjustViewBounds="true" android:background="@color/blue" android:src="@drawable/ic_launcher" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_centerVertical="true" android:layout_margin="5dp" android:layout_toStartOf="@id/imageView" android:background="@color/colorPrimary" android:padding="10dp" android:text="Some text. " /> </RelativeLayout> 

Esto es lo que parece

No será una solución perfecta en términos de rendimiento. Pero puedes lograrlo jugando con FrameLayout e ImageView.

Aquí está la salida: Introduzca aquí la descripción de la imagen Introduzca aquí la descripción de la imagen

Layout.xml:

 <?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" android:background="@color/textGray" android:orientation="vertical"> <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/skyBlue"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:background="@android:color/white"> <ImageView android:id="@+id/imageView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxWidth="200dp" android:src="@drawable/ic_settings" android:visibility="invisible" /> <TextView android:id="@+id/TextView" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:text="!" /> </FrameLayout> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:maxWidth="200dp" android:src="@drawable/ic_settings" /> </LinearLayout> </FrameLayout> </LinearLayout> 

Con el fin de lograr el comportamiento de deseo, tendría que establecer las mismas imágenes a ambas imágenes vistas en este diseño. Uno de ellos es invisible, es sólo ayudar a hacer padre con el mismo ancho y alturas que nos llevaría a crear TextView con las mismas dimensiones.
Nota: Si desea cambiar la alineación textView, puede hacerlo con layout_gravity o gravity.

  • ¿Cómo infulo una vista personalizada en XML?
  • Cómo crear una tabla dinámica de datos en android?
  • No se puede crear servicio com.parse.PushService: java.lang.NullPointerException
  • Error de xml de Android: "Ningún recurso encontrado que coincida con el nombre dado" con RelativeLayout (@ id / LinearLayout_acc, @ id / ProgressBar_statusScreen)
  • Error al analizar XML: prefijo no enlazado para mapbox
  • ¿Hay alguna documentación de Android XML?
  • Cambiar el tamaño del mapa de bits dentro de una lista de capas
  • Jerarquía de estilo en Android - ¿cuál es el orden de importancia?
  • Cómo convertir el objeto de cursor en XML o JSON en android
  • Cómo importar el recurso de forma (xml) al código?
  • Adaptación de adaptadores desde la vista de lista a la clase de vista de elemento único
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.