deux couleurs ligne horizontale dans Android

Question

le concepteur graphique de l'application Android que je suis en train de construire est venu avec une ligne à deux couleurs comme séparateur entre les éléments dans une boîte de mise en page:

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

Si vous regardez de près l'image, vous voyez une ligne grise sombre, avec immédiatement en dessous une ligne grise très claire (presque blanche). Les lignes doivent être redimensionnées à la largeur du conteneur.

Quelle est la meilleure façon de l'implémenter dans l'interface utilisateur?

Answer 1

La meilleure approche ici est de convertir l'image que vous avez montré comme 9-patch, l'ajouter à la résolution/dossier drawable comme une ressource et l'afficher au sein de votre mise en page en utilisant un ImageView, la mise en android:width="fill_parent". Les images de 9 patchs vous permettent de spécifier une zone de l'image à étirer lorsque l'image est redimensionnée (dans ce cas, l'image entière - bien que vous souhaitiez envisager de "masquer" la ligne sur ses bords pour se conformer à certains des styles Android natifs).

Dans votre mise en page fichier la définition ImageView ressemblerait à quelque chose comme ceci:

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

Answer 2

Vous pouvez créer un 2 vues, un pour chaque ligne, définir la couleur d'arrière-plan de ce point de vue à ce que vous voulez que les couleurs à être, puis réglez le hieght sur 1px et la largeur sur "fill_parent". L'avantage de cette approche par rapport aux 9 patchs est que vous n'avez pas besoin de charger une ressource et vous pouvez changer dynamiquement les couleurs selon ce que l'utilisateur veut. L'inconvénient est que vous créez quelques objets de mise en page supplémentaires.

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"/> 

insert à l'intérieur vue LinearLayout

Answer 4

Si vous ne souhaitez pas utiliser un 9-patch, vous pouvez essayer 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>