web-dev-qa-db-fra.com

Ligne verticale utilisant XML dessinable

J'essaie de comprendre comment définir une ligne verticale (1dp d'épaisseur) à utiliser comme dessin.

Pour en faire un horizontal, c'est assez simple:

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="line">
    <stroke Android:width="1dp" Android:color="#0000FF"/>
    <size Android:height="50dp" />     
</shape>

La question est de savoir comment rendre cette ligne verticale.

Oui, il existe des solutions de contournement, telles que dessiner une forme rectangle d'épaisseur 1px, mais cela complique le XML dessiné, s'il se compose de plusieurs éléments <item>.

Quelqu'un a eu une chance avec ça?

UPDATE

L'affaire n'est toujours pas résolue. Cependant, pour tous ceux qui participent à une croisade documentaire Android - vous trouverez peut-être cela utile: Manquant Android Manuel XML

UPDATE

Je n'ai trouvé aucun autre moyen que celui que j'ai indiqué comme correct. Cela semble être un peu "lourd", donc si vous connaissez la réponse, n'oubliez pas de la partager;)

androidandroid-layoutlineandroid-xmlandroid-drawable
143
Kaspa

Au lieu d’une forme, vous pouvez essayer un View:

<View
    Android:layout_width="1dp"
    Android:layout_height="fill_parent"
    Android:background="#FF0000FF" />

Je ne l'ai utilisé que pour les lignes horizontales, mais je pense que cela fonctionnerait également pour les lignes verticales.

Utilisation:

<View
    Android:layout_width="fill_parent"
    Android:layout_height="1dp"
    Android:background="#FF0000FF" />

pour une ligne horizontale.

364
CommonsWare

Vous pouvez imbriquer votre forme dans une balise de rotation.

<rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:fromDegrees="90"
    Android:toDegrees="90">
    <shape 
        Android:shape="line">
        <stroke
            Android:width="1dp"
            Android:color="#ff00ff"
            Android:dashWidth="1dp"
            Android:dashGap="2dp" />
    </shape>
</rotate>

Cependant, le seul problème est que les paramètres de mise en page définis dans votre mise en page XML seront les dimensions utilisées pour dessiner la forme d'origine. Cela signifie que si vous souhaitez que votre ligne atteigne 30dp, vous devez définir une largeur de layout_width de 30dp dans votre XML de mise en page. Mais la largeur finale sera également de 30dp dans ce cas, ce qui est probablement indésirable dans la plupart des situations. Cela signifie essentiellement que la largeur et la hauteur doivent avoir la même valeur, la valeur de la longueur souhaitée pour la ligne. Je n'arrivais pas à résoudre ce problème.

Cela semble être la solution "à la manière Android", mais à moins d'une solution ou d'une solution de contournement au problème de dimensions que je mentionne, cela ne fonctionnera probablement pas pour la plupart des gens. Ce dont nous avons vraiment besoin, c’est d’un attribut d’orientation dans <shape /> ou <stroke />.

Vous pouvez également essayer de référencer un autre dessin dans les attributs de la balise de rotation, tels que:

<rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:fromDegrees="90"
    Android:toDegrees="90"
    Android:drawable="@drawable/horizontal_line" />

Cependant, je n'ai pas testé cela et j'attends qu'il ait les mêmes problèmes.

-- MODIFIER --

Oh, j'ai en fait trouvé une solution. Vous pouvez utiliser une marge négative dans votre mise en page XML pour vous débarrasser de l’espace supplémentaire indésirable. Tel que:

<ImageView
    Android:layout_width="35dp"
    Android:layout_height="35dp"
    Android:layout_marginLeft="-15dp"
    Android:layout_marginRight="-15dp"
    Android:src="@drawable/dashed_vertical_line" />
97
cephus
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
  Android:shape="rectangle" >
    <stroke Android:width="1dp" Android:color="@color/white" />
    <size Android:width="2dp" />
</shape>

Travaille pour moi . Placez-le en arrière-plan avec fill_parent ou une taille fixe en hauteur pd

16
logcat

Vous pouvez utiliser l'attribut rotate

 <item>
    <rotate
        Android:fromDegrees="90"
        Android:toDegrees="90"
        Android:pivotX="50%"
        Android:pivotY="50%" >
        <shape
            Android:shape="line"
            Android:top="1dip" >
            <stroke
                Android:width="1dip"
                 />
        </shape>
    </rotate>
</item>
15
user4679242

Je suis venu avec une solution différente. L'idée est de remplir d'abord le dessin avec la couleur que vous aimez, puis de remplir à nouveau la zone entière avec la couleur d'arrière-plan tout en utilisant un remplissage à gauche ou à droite. Évidemment, cela ne fonctionne que pour une ligne verticale à l'extrême gauche ou à droite de votre dessin.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item Android:drawable="@color/divider_color" />
    <item Android:left="6dp" Android:drawable="@color/background_color" />
</layer-list>
10
Eric Kok

Je pense que c'est la solution la plus simple:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item
        Android:gravity="center">
        <shape Android:shape="rectangle">
            <size Android:width="1dp" />
            <solid Android:color="#0000FF" />
        </shape>
    </item>

</layer-list>
5
a.ch.

c'est très simple ... d'ajouter une ligne verticale dans Android xml ...

<View
Android:layout_width="fill_parent"
Android:layout_height="1dp"
Android:layout_marginTop="5dp"
Android:rotation="90"
Android:background="@Android:color/darker_gray"/>
4
user3130068

J'avais besoin d'ajouter mes vues de manière dynamique/programmée, donc ajouter une vue supplémentaire aurait été fastidieux. Ma hauteur de vue était WRAP_CONTENT, je ne pouvais donc pas utiliser la solution rectangle. J'ai trouvé un article de blog ici à propos de l'extension de TextView, du remplacement de onDraw () et de la peinture dans la ligne. J'ai donc implémenté cela et cela fonctionne bien. Voir mon code ci-dessous:

public class NoteTextView extends TextView {
    public NoteTextView(Context context) {
       super(context);
    }
    private Paint paint = new Paint();
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint.setColor(Color.parseColor("#F00000FF"));
        Paint.setStrokeWidth(0);
        Paint.setStyle(Paint.Style.FILL);
        canvas.drawLine(0, 0, 0, getHeight(), Paint);
    }
}

J'avais besoin d'une ligne verticale à gauche, mais les paramètres de la ligne de trait sont drawLine(startX, startY, stopX, stopY, Paint) afin que vous puissiez tracer une ligne droite dans n'importe quelle direction de la vue. Ensuite, dans mon activité, j'ai NoteTextView note = new NoteTextView(this); j'espère que cela aide.

4
willlma

Cela dépend, là où vous voulez avoir la ligne verticale, mais si vous voulez une bordure verticale par exemple, vous pouvez faire en sorte que la vue parent ait un arrière-plan personnalisable. Et vous pouvez ensuite définir le dessin comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item>
        <shape
            Android:shape="rectangle">
            <stroke Android:width="1dp" Android:color="#000000" />
            <solid Android:color="#00ffffff" />

        </shape>
    </item>

    <item Android:right="1dp">
        <shape Android:shape="rectangle">
            <solid Android:color="#00ffffff" />
        </shape>
    </item>

</layer-list>

Cet exemple créera une fine ligne noire de 1dp sur le côté droit de la vue, qui pourra être dessiné comme arrière-plan.

2
Lukas1
add this in your styles.xml

        <style name="Divider">
            <item name="Android:layout_width">1dip</item>
            <item name="Android:layout_height">match_parent</item>
            <item name="Android:background">@color/divider_color</item>
        </style>

        <style name="Divider_invisible">
            <item name="Android:layout_width">1dip</item>
            <item name="Android:layout_height">match_parent</item>
        </style>

then wrap this style in a linear layout where you want the vertical line, I used the vertical line as a column divider in my table. 

     <TableLayout
                Android:id="@+id/table"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:orientation="horizontal"
                Android:stretchColumns="*" >

                <TableRow
                    Android:id="@+id/tableRow1"
                    Android:layout_width="fill_parent"
                    Android:layout_height="match_parent"
                    Android:background="#92C94A" >

                    <TextView
                        Android:id="@+id/textView11"
                        Android:paddingBottom="10dp"
                        Android:paddingLeft="5dp"
                        Android:paddingRight="5dp"
                        Android:paddingTop="10dp" />
    //...................................................................    

                    <LinearLayout
                        Android:layout_width="1dp"
                        Android:layout_height="match_parent" >

                        <View style="@style/Divider_invisible" />
                    </LinearLayout>
        //...................................................................
                    <TextView
                        Android:id="@+id/textView12"
                        Android:paddingBottom="10dp"
                        Android:paddingLeft="5dp"
                        Android:paddingRight="5dp"
                        Android:paddingTop="10dp"
                        Android:text="@string/main_wo_colon"
                        Android:textColor="@color/white"
                        Android:textSize="16sp" />
  //...............................................................  
                    <LinearLayout
                        Android:layout_width="1dp"
                        Android:layout_height="match_parent" >

                        <View style="@style/Divider" />
                    </LinearLayout>

    //...................................................................
                    <TextView
                        Android:id="@+id/textView13"
                        Android:paddingBottom="10dp"
                        Android:paddingLeft="5dp"
                        Android:paddingRight="5dp"
                        Android:paddingTop="10dp"
                        Android:text="@string/side_wo_colon"
                        Android:textColor="@color/white"
                        Android:textSize="16sp" />

                    <LinearLayout
                        Android:layout_width="1dp"
                        Android:layout_height="match_parent" >

                        <View style="@style/Divider" />
                    </LinearLayout>

                    <TextView
                        Android:id="@+id/textView14"
                        Android:paddingBottom="10dp"
                        Android:paddingLeft="5dp"
                        Android:paddingRight="5dp"
                        Android:paddingTop="10dp"
                        Android:text="@string/total"
                        Android:textColor="@color/white"
                        Android:textSize="16sp" />
                </TableRow>

                <!-- display this button in 3rd column via layout_column(zero based) -->

                <TableRow
                    Android:id="@+id/tableRow2"
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"
                    Android:background="#6F9C33" >

                    <TextView
                        Android:id="@+id/textView21"
                        Android:padding="5dp"
                        Android:text="@string/servings"
                        Android:textColor="@color/white"
                        Android:textSize="16sp" />

                    <LinearLayout
                        Android:layout_width="1dp"
                        Android:layout_height="match_parent" >

                        <View style="@style/Divider" />
                    </LinearLayout>

    ..........
    .......
    ......
1
YasirAzgar
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item
        Android:bottom="-3dp"
        Android:left="-3dp"
        Android:top="-3dp">

        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorPrimary" />
            <stroke
                Android:width="2dp"
                Android:color="#1fc78c" />
        </shape>

    </item>

</layer-list>
1
AnupamChugh

Vous pouvez utiliser une forme mais au lieu d’une ligne, faites-la rectangle.

Android:shape="rectangle">
<stroke
    Android:width="5dp"
    Android:color="#ff000000"
    Android:dashGap="10px"
    Android:dashWidth="30px" />

et dans votre mise en page, utilisez cette ...

<ImageView
    Android:layout_width="7dp"
    Android:layout_height="match_parent"
    Android:src="@drawable/dashline"
    Android:layout_alignParentTop="true"
    Android:layout_centerHorizontal="true"
    Android:layerType="software"/>

Vous devrez peut-être jouer avec la largeur, en fonction de la taille des tirets, pour la placer sur une seule ligne.

Espérons que cela aide Cheers

1
Boxlady

Pour créer une ligne verticale, utilisez simplement un rectangle d’une largeur de 1dp:

<shape>
    <size
        Android:width="1dp"
        Android:height="16dp" />
    <solid
        Android:color="#c8cdd2" />
</shape>

N'utilisez pas stroke, utilisez solid (qui est la couleur de "remplissage") pour spécifier la couleur du trait.

0
David Wasser