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 poner tres botones de imagen en la misma línea en Android
  • ¿Cómo hacer la transición de la aplicación de Youtube en la búsqueda?
  • ¿Cómo puedo aplicar operaciones matemáticas a las dimensiones de Android?
  • Android.os.TransactionTooLargeException recuperar aplicaciones instaladas
  • Cómo cambiar la línea de fondo de EditText mediante programación
  • ¿Cómo declarar varios atributos estilables con el mismo nombre para diferentes etiquetas?
  • Cualquier herramienta para convertir la localización XML de Android en el archivo .strings del iPhone?
  • Cómo dibujar un círculo dentro de un círculo con formas de Android xml?
  • Disposición de la pantalla de preferencias de Android
  • ImageViews en LinearLayout redondeado
  • Android: Cómo crear CursorAdapter desde los datos en un archivo XML
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.