bicolor línea horizontal en Android

Question

el diseñador gráfico de la aplicación para Android que estoy construyendo actualmente ha llegado con una línea de dos colores como separador entre los elementos de un cuadro de diseño:

two-color separator line http://img7.imageshack.us/img7/3351/twocolorline.png

Si observa detenidamente la imagen, verá una línea gris oscura, inmediatamente debajo de ella una línea gris muy clara (casi blanca). Las líneas deben redimensionarse al ancho del contenedor.

¿Cuál es la mejor manera de implementar esto en la interfaz de usuario?

Answer 1

El mejor enfoque es convertir la imagen que se muestra como un 9-patch, agregarlo a la carpeta res/estirable como un recurso y mostrarlo dentro de su diseño utilizando un ImageView, el establecimiento de android:width="fill_parent".

Las imágenes de 9 parches le permiten especificar un área de la imagen que se estirará cuando se cambie el tamaño de la imagen (en este caso toda la imagen, aunque es posible que desee "desvanecer" la línea en sus bordes para adaptarla a de los estilos nativos de Android).

Dentro de su estructura de ficheros la definición ImageView sería algo como esto:

<ImageView 
    android:src="@drawable/my_separater_nine_patch" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:scaleType="fitXY" 
/> 

Answer 2

Puede crear un 2 vistas, una para cada línea, establecer el color de fondo de este punto de vista a lo que usted quiere que los colores a ser, y luego establecer la altura a 1px y el ancho a "fill_parent". La ventaja de esto sobre el enfoque de 9 parches es que no necesita cargar un recurso y puede cambiar dinámicamente los colores a lo que el usuario desee. El inconveniente es que está creando algunos objetos de diseño más.

Answer 3

<ImageView android:layout_width="match_parent" android:id="@+id/line1" 
      android:layout_height="1dp" android:background="#FFFFFF" 
      android:layout_weight="1" android:layout_marginTop="5dp" 
      android:layout_marginBottom="5dp" android:layout_marginLeft="5dp" 
     android:layout_marginRight="5dp"/> 

inserto dentro de la visión LinearLayout

Answer 4

Si no desea utilizar un 9-parche, usted podría intentar un LayerList.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item> 
     <shape > 
      <solid android:color="#ffffff" /> 
     </shape> 
    </item> 
    <item android:bottom="1px"> 
     <shape > 
      <solid android:color="#252525" /> 
     </shape> 
    </item> 

</layer-list>