Android – ¿Cómo mostrar una línea vertical en el fondo de un ListView (y de acuerdo a la altura de la fila)?
¿Cómo mostrar una línea vertical en el fondo, como la que está resaltada en azul en la imagen de abajo?
- ¿Interrupción de línea en formato XML?
- Barra de progreso de instalación de Adb
- Cómo generar un archivo apk utilizando una línea de comandos?
- Dibujar objeto personalizado curvado en LIBGDX?
- Cómo evitar que EditText rompa una línea después de la puntuación
En este ejemplo, tengo un ListView con elementos ImageView (y TextView, pero no está relacionado con la línea), y quiero una línea vertical en el fondo de estos elementos para sentir que están "conectados" a cada uno.
Y también, tenga en cuenta que la línea vertical no llena todo el fondo.
La línea vertical está a la izquierda, y no es igual para todos los casos. A veces llena toda la altura de la fila (en la mayoría de las filas ListView) ya veces sólo llena la mitad de la altura de la fila (en el último elemento de ListView y fuera de ListView, en la parte superior, donde podemos ver el ImageView grande con El icono de estrella).
Actualizado
He probado la sugerencia propuesta por Hellboy, y casi funciona perfectamente. Modifiqué el código propuesto para mi caso:
<RelativeLayout android:layout_width="40dp" android:layout_height="match_parent" android:gravity="center" android:layout_marginLeft="15dp"> <View android:layout_width="4dp" android:layout_height="match_parent" android:background="#3399CC" android:gravity="center" android:layout_centerHorizontal="true"/> <ImageView android:id="@+id/user_image" android:layout_width="40dp" android:layout_height="40dp" android:layout_marginTop="10dp" android:layout_marginBottom="10dp" android:gravity="center" android:background="@android:color/holo_blue_light" > </ImageView> </RelativeLayout>
El RelativeLayout con el width = "40dp" (el mismo que el ImageView original que estaba trabajando), height = "match_parent (el mismo que él dijo), gravity =" center "(para dejarlos en el centro de la altura de la fila ) Y layout_marginLeft = "15dp" (para dejar un espacio al margen izquierdo) .En el ImageView, he añadido marginTop = "10dp" y marginBottom = "10dp", y con él, aparece la línea vertical azul. Elementos en la misma fila, por lo que tengo un diseño padre (un diseño lineal).
<?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:orientation="horizontal" android:gravity="center" android:id="@+id/linearlayoutservicerow">
Por lo tanto, este diseño padre arriba, tiene el RelativeLayout descrito y otro LinearLayout con los otros elementos de fila. Pero el código produce imágenes aplanadas . ¡¿Por qué pasó esto?! Parece que el RelativeLayout considera su altura como la altura de ImageView (40dp) y considera su marginTop y marginBottom, y con esto la imagen se aplana.
Esperando más respuestas a este problema. Intentaré otras alternativas.
- Ejecución de pruebas de Junit de Android desde la línea de comandos
- Preferencia android divisor horizontal en la preferencia personalizada?
- ¿Cómo puedo script genymotion emulador para lanzar un determinado avd, sin cabeza?
- Alternativa de Android para Line2D?
- Línea de dibujo de Android con ancho
- Dibuja línea personalizada entre dos elementos en TableLayout Android
- Android: Excepción en org.eclipse.swt.SWTError: No hay más controladores [gtk_init_check () falló)
- Evitar que una aplicación se muestre en la lista de aplicaciones recientes en android kitkat 4.4.2
Puede reemplazar ImageView con algo como esto:
<RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_width="4dp" android:layout_height="match_parent" android:background="@color/navy_blue" android:layout_centerHorizontal="true"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/image"/> </RelativeLayout>
Y por supuesto en su primer y último elemento que necesita para manipular la altura de la View
y alinear a la parte superior o inferior
Puede utilizar la imagen transparente de 9 parches como fondo para su vista de lista.
Para crear una imagen de nueve parches, sigue este enlace : http://developer.android.com/tools/help/draw9patch.html
¡¡¡ENTIENDO!!!
Hola chicos, he persistido en tratar de arreglar el problema de la sección actualizada de mi pregunta (basado en la solución propuesta inicialmente por @Hellboy) y obtuve resultados! Así que, cómo logré una respuesta a mi propia pregunta, decidí poner como respuesta.
El primer paso fue configurar el archivo XML como el siguiente código.
Parte del XML final correspondiente al diseño de la fila :
<?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:orientation="horizontal" android:gravity="center" android:id="@+id/linearlayoutservicerow"> <RelativeLayout android:layout_width="40dp" android:layout_height="match_parent" android:gravity="center" android:layout_marginLeft="15dp"> <View android:layout_width="4dp" android:id="@+id/verticallineview" android:layout_height="match_parent" android:background="#3399CC" android:gravity="center" android:layout_centerHorizontal="true"/> <RelativeLayout android:layout_width="40dp" android:layout_height="match_parent" android:gravity="center" android:paddingBottom="10dp" android:paddingTop="10dp"> <ImageView android:id="@+id/user_image" android:layout_width="40dp" android:layout_height="40dp" android:gravity="center" android:background="@android:color/holo_blue_light" > </ImageView> </RelativeLayout> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/layoutotherrowelements"> </LinearLayout> </LinearLayout>
Explicación del XML:
Aquí tenemos el layout de los padres (linearlayoutservicerow) y dentro de él: un RelativeLayout (propuesto por @HellBoym, con el estructurado discutido en el final de mi pregunta) y el LinearLayout a otros elementos de la fila (layoutotherrowelements). Resumiendo … ¿Qué he modificado?
El código inicial resultó en imágenes aplanadas porque el RelativeLayout (padre) no consideró los marginTop y marginBottom de ImageView, por lo que la imagen se aplastó verticalmente. (Y si dejamos sin margen, el RelativeLayout mantendría el mismo tamaño y la línea vertical no aparecería en la parte superior y en la parte inferior de la imagen.) Debemos tener un espacio entre el ImageView y el RelativeLayout inicialmente propuesto, con el fin de Mostrar la línea, pero si no reconoce el margen, ¿cómo crear este espacio?
Acabo de "encapsulado" el ImageView en otro RelativeLayout (dentro de ese Parent RelativeLayout), y cambié los parámetros de margen del ImageView a los parámetros de relleno de esta cápsula RelativeLayout.
El problema de la última fila
Esto resulta en el diseño con una línea de fondo, pero todavía tenemos el problema de la última fila. De hecho, esta fila es diferente, y en este caso, debe tener su altura modificada para no tener la altura del mismo padre. Decidí poner por lo menos, la altura de ImageView y funcionó! Recuerde convertir el valor en dp a píxel, porque la función getLayoutParams tiene todos los parámetros expresados en píxeles.
Por lo tanto, en el adaptador, ponemos el siguiente código:
if(position==(getCount()-1)){ View my_line = (View) row.findViewById(R.id.verticallineview); //40dp, this is the ImageView height int dpsize = 40; //convert the height in dp unit to pixel (because the parameter is in px) int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpsize, context.getResources().getDisplayMetrics()); my_line.getLayoutParams().height = px; }
¡¡¡Y eso es todo!!!
Vale la pena mencionar que @ dinesh sharma propuso otra alternativa interesante con 9 parches, que intentaré más tarde.
No quería utilizar la imagen como fondo (es por eso que empecé a preguntar acerca de drawable), porque mi objetivo final era mejorar esta solución para hacer todo dinámico (incluyendo el color de línea vertical), y creo que con la imagen no podía lograr eso. Pero en mi pregunta original no mencioné eso, así que si tengo éxito con este otro enfoque, lo aceptaré como respuesta correcta.
Gracias por toda su ayuda, chicos! ¡¡¡Me ayudaste mucho!!! En mi solución actual utilicé la pista de @ Hellboy de usar un RelativeLayout y una Vista, y la pista de @dinesh sharma para verificar si es la última fila del ListView. Espero que esta respuesta y las otras ayuden a más personas con problemas similares.
Respuesta verificada
Su imagen en la disposición del artículo:
<RelativeLayout android:id="@+id/rl" android:layout_width="60dp" android:layout_height="60dp" android:background="@drawable/m" android:paddingBottom="10dp" android:paddingTop="10dp" > <ImageView android:id="@+id/grid_item_image" android:layout_width="50dp" android:layout_height="50dp" android:layout_centerInParent="true" android:src="@drawable/ic_launcher" /> </RelativeLayout>
Tres bg nueve imágenes de parche para dibujar
Manipulación en adaptador:
if(position==0) holder.rl.setBackgroundResource(R.drawable.b); if(position==(getCount()-1)) holder.rl.setBackgroundResource(R.drawable.t);
Finalmente consiguió salida:
- ¿Es posible programar GPU para Android
- El emulador de Android se basa en QEMU. ¿Puedo usar KVM con él?