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?
- Crear lista de capas con esquinas redondeadas mediante programación
- Android XML redondeado esquinas recortadas
- Recorte de visualización de Android
- ¿Establecer un fondo a los botones en un diálogo?
- Android añadiendo pie de página a ListView addFooterView ()?
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>
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" />
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>
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).
- ImageView esquinas redondeadas
- Creación de servicio web para aplicaciones de Android
- Cómo crear archivos estáticos (sólo con archivos xml) ExpandableListView en Android
- CollapsingToolbarLayout | Aspectos de desplazamiento y diseño
- Manifiesto de Android que genera automáticamente permiso no válido
- Android: ¿Cómo url de la tienda en el archivo de recursos string.xml?
- Android: Cómo obtener XML personalizado reconocido
- Doclava - ¿Cómo generar versionado xml?
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:
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>
No será una solución perfecta en términos de rendimiento. Pero puedes lograrlo jugando con FrameLayout e ImageView.
Aquí está la salida:
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.
- No se pueden crear tareas para cargar Proguard Mapping File.java.lang.IllegalStateException: Resolver la configuración 'androidTestAnnotationProcessor'
- Actualizar Notificación de empuje de Android