studio - Separador de sombras entre fragmentos de Android

listview fragment android studio example

Question

Tengo un diseño similar al de la aplicación ICS Gmail para tabletas ( ListFragment a la izquierda y el contenido a la derecha) y me preguntaba cómo podría construir construcciones de modo que haya un separador de sombras entre los dos fragmentos (como en el Aplicación de Gmail, que se muestra a continuación)

.

Además, como esto es aplicable a esta pregunta, ¿cómo puedo tener ese bonito marcador de triángulo / flecha en el diseño del elemento de la lista activa? Supongo que para implementar esto, ListView en sí debe estar sobre la "capa" de sombra, pero no tengo idea de cómo crear eso.

Answer 1

Estoy buscando hacer lo mismo que intentas hacer; crea un efecto de que un fragmento está "más cerca" que otro.

La respuesta de Roboguy maneja cómo tener el "selector" de flecha blanca en el elemento de la lista; Trataré de ser más específico sobre las sombras. Otro buen ejemplo del uso de selectores de fondo se puede ver en el código fuente de la aplicación Google IO 2011. Una vez que tenga la fuente, mire los selectores de iconos fragment_dashboard.xml.

El separador de sombras es un degradado, aplicado al lado izquierdo de una vista. Hay dos partes;

Primero, la "sombra" en sí misma:

res / shadow_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="0"
android:startColor="#55000000"
android:endColor="#00000000"
/>
</shape>

Luego, para aplicarlo a un diseño:

layout / my_lower_layer

<?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="match_parent" >
<View
android:layout_width="20dp"
android:layout_height="fill_parent"
android:background="@drawable/fragment_shadow_left" />
<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>

Esto tiene que hacerse con un diseño relativo (que yo sepa). Si está utilizando un diseño lineal, puede envolver todo el DiseñoLineal lineal dentro de un diseño relativo, y luego agregar el degradado.

Tenga en cuenta que, si hace esto, el gradiente <View> debe ir por debajo de <LinearLayout> ; de lo contrario, el degradado se dibujará bajo el diseño lineal, por lo que no lo verá.

Answer 2

Para que todos lo sepan (porque parece que hay una falta de información sobre este tema), esto se logra dentro del selector de fondo XML de la vista de filas de la lista individual. Por ejemplo, este es el diseño de la pantalla principal,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/list_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@drawable/list_item_selector">
...<!-- Rest of layout goes here -->
</RelativeLayout>

Pero la magia viene en el list_item_selector :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/list_pressed" />
<item android:state_activated="true" android:drawable="@drawable/list_arrow_activated" />
<item android:drawable="@drawable/list_default" />
</selector>

Al definir estos como drawwables de 9 parches como este, puede hacer que cada elemento de la lista contribuya con un ancho de sombra a esa línea en el medio, y cuando se active, ese segmento de sombra será reemplazado por una flecha. Espero que esto ayude a alguien, ¡ya que seguro me ayudó!