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).

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 funciona el atributo androide Xml android: onClick = "..." trabajo detrás de las escenas?
  • Custom Square LinearLayout. ¿Cómo?
  • Android estilo Recopilación de recursos (aapt) fallando: Tabla de recursos no válidos: tamaño de encabezado 0xc
  • Cómo modificar el valor de nodo xml?
  • ¿Dónde están los esquemas de archivos XML en un proyecto de Android?
  • Analizar xml de la respuesta httppost
  • IU de la tarjeta Google Now para listview
  • fragment_display_message: Mi primer error en la aplicación para Android
  • ¿Cómo hacer un botón que muestra el carácter de retroceso (⌫) en Android?
  • Forzar la tableta a usar los recursos de xhdpi
  • Creación de un WebService ASP.net que devuelve JSON en lugar de XML
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.