Comment dessiner une bordure sur un seul côté d'une mise en page linéaire?


186

Je suis capable de dessiner une bordure sur une mise en page linéaire, mais elle est dessinée de tous les côtés. Je veux le limiter uniquement au côté droit, comme vous le faites en CSS (border-right: 1px solid red;).

J'ai essayé cela, mais cela dessine toujours de tous les côtés:

<?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:height="2dp"
            android:width="2dp"
            android:color="#FF0000" />

        <solid android:color="#000000" />

        <padding
            android:bottom="0dp"
            android:left="0dp"
            android:right="1dp"
            android:top="0dp" />

        <corners
            android:bottomLeftRadius="0dp"
            android:bottomRightRadius="5dp"
            android:radius="1dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="0dp" />
    </shape>
</item>

Des suggestions pour y parvenir?

BTW, je ne veux pas utiliser le hack de mettre une vue de largeur 1dp du côté requis.


vous pouvez utiliser drawableLeft dans votre mise en page
njzk2

Réponses:


359

Vous pouvez l'utiliser pour obtenir une bordure d'un côté

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#FF0000" />
    </shape>
</item>
<item android:left="5dp">
    <shape android:shape="rectangle">
        <solid android:color="#000000" />
    </shape>
</item>
</layer-list>

ÉDITÉ

Comme beaucoup d'entre eux voulaient avoir une bordure d'un côté avec un fond transparent, j'ai implémenté une BorderDrawablequi pourrait me donner des bordures de taille et de couleur différentes de la même manière que nous utilisons le CSS. Mais cela ne pouvait pas être utilisé via xml. Pour prendre en charge XML, j'ai ajouté un BorderFrameLayoutdans lequel votre mise en page peut être enveloppée.

Voir mon github pour la source complète.


5
que faire si vous voulez une couleur à base alpha solide avec une bordure inférieure? J'ai réfléchi à une solution à cela avec l'API XML Android Drawable, mais je ne peux pas le comprendre.
Mario Lenci

Cela n'a pas fonctionné pour moi - étrangement fait l'inverse de ce que je voulais une couleur plus sombre à l'intérieur, avec le dégradé de gris que j'ai superposé pour les pensionnaires. J'ai pensé à créer un rectangle dessinable à une certaine taille pour le placer comme drawableLeft sur l'élément. Cela ne semble pas aussi simple.
jbenowitz

@jbenowitz: L'ordre de l'élément dans la liste des couches est plus important. Si vous inversez, vous obtiendrez ces résultats.
Vivek Khandelwal

J'ai corrigé cela en ajoutant un contour à la couleur de la bordure et la forme restant la couleur du bouton. Cela a fait l'affaire.
jbenowitz

243

Facile comme un gâteau, permettant un bg transparent:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:startColor="#f00"
        android:centerColor="@android:color/transparent"
        android:centerX="0.01" />
</shape>

Modifiez l'angle pour modifier l'emplacement de la bordure:

  • 0 = gauche
  • 90 = bas
  • 180 = droite
  • 270 = haut

19
C'est de loin la meilleure réponse ici, dommage qu'elle ne soit pas votée
mittelmania

11
Bien, mais je ne le décrirais certainement pas comme "facile comme bonjour".
funkybro

7
Cela ne fonctionne pas si vous avez besoin d'une bordure plus épaisse ou si vous avez besoin de bordures sur plusieurs côtés.
principe holographique

1
@codeman - utilisez-le comme arrière-plan de votre vue, il héritera de sa hauteur.
Oded Breiner

2
comment ajuster la largeur du trait ou de la bordure?
Ruturaj Patil le

101

il est également possible d'implémenter ce que vous voulez en utilisant une seule couche

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

    <item
        android:bottom="-5dp"
        android:right="-5dp"
        android:top="-5dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/color_of_the_background" />

            <stroke
                android:width="5dp"
                android:color="@color/color_of_the_border" />
        </shape>
    </item>

</layer-list>

ainsi que la bordure gauche est visible , mais vous pouvez obtenir une combinaison que vous voulez en jouant avec bottom, left, rightet les topattributs de l' itemélément


3
Ceci est certainement utile lorsque vous avez une autre couleur d'arrière-plan et que vous souhaitez superposer ce bg dessinable avec une bordure. (y)
Aung Pyae

3
Exactement ce dont j'ai besoin, mais est-il juste d'utiliser des rembourrages négatifs?
IlyaEremin

1
C'est la meilleure solution. Je me demande ce que fait -5dp là-bas.
Amit Kumar

1
Le remplissage négatif est courant en HTML / CSS. Cela pousse simplement les choses dans l'autre sens. D'après mon expérience, cela semble également parfaitement valable dans Android.
spaaarky21

Les implémentations utilisant des marges négatives ne fonctionnent pas bien si votre mise en page a clipChildren = false ou clipToPadding = false. Si tel est le cas, vous pouvez utiliser la solution avec deux rectangles superposés, comme celui proposé par Vivek Khandelwal
Jesús Barrera

80

Pour obtenir une bordure sur un seul côté d'un dessin, appliquez un négatif insetsur les 3 autres côtés (ce qui fait que ces bordures sont dessinées hors de l'écran).

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetTop="-2dp" 
    android:insetBottom="-2dp"
    android:insetLeft="-2dp">

    <shape android:shape="rectangle">
        <stroke android:width="2dp" android:color="#FF0000" />
        <solid android:color="#000000" />
    </shape>

</inset>

entrez la description de l'image ici

Cette approche est similaire à la réponse de naykah, mais sans l'utilisation d'un layer-list.


4
Ceci est la meilleure réponse IMO
James

très bonne réponse, j'ai juste besoin de changer la largeur et l'encart à 10dp :) Et de plus, j'ai besoin d'une bordure à gauche, donc je change android: insetLeft en android: insetRight. Si simple! Garder le clic sur le bouton Matériel: D
Phuong

Exactement ce dont j'avais besoin, changez insertXen haut pour décider quelles frontières afficher et quoi non.
CularBytes

Je peux même avoir une couleur unie de @null et cette méthode n'entraîne aucun overdraw. Génie. Je vous remercie!
Unknownweirdo le

2
Attention: Cela modifiera le contenu de votre vue et la redimensionnera également. Utiliser avec précaution.
vovahost

7

Comme alternative (si vous ne souhaitez pas utiliser d'arrière-plan), vous pouvez facilement le faire en créant une vue comme suit:

<View
    android:layout_width="2dp"
    android:layout_height="match_parent"
    android:background="#000000" />

Pour avoir une bordure droite uniquement, placez ceci après la mise en page (là où vous voulez avoir la bordure):

<View
    android:layout_width="2dp"
    android:layout_height="match_parent"
    android:background="#000000" />

Pour avoir une bordure gauche uniquement, placez-la avant la mise en page (où vous voulez avoir la bordure):

A travaillé pour moi ... J'espère que c'est de l'aide ....


6

J'ai pu obtenir l'effet avec le code suivant

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:left="0dp" android:right="-5dp" android:top="-5dp" android:bottom="-5dp">
        <shape
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#123456" />
        </shape>
    </item>
</layer-list>

Vous pouvez vous adapter à vos besoins en matière de position de la frontière en modifiant la direction du déplacement


5
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#f28b24" />
            <stroke
                android:width="1dp"
                android:color="#f28b24" />
            <corners
                android:radius="0dp"/>
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#f28b24"
                android:endColor="#f28b24"
                android:angle="270" />
            <stroke
                android:width="0dp"
                android:color="#f28b24" />
            <corners
                android:bottomLeftRadius="8dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"/>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

5

Un autre excellent exemple exemple

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<inset xmlns:android="http://schemas.android.com/apk/res/android"
     android:insetRight="-2dp">

     <shape android:shape="rectangle">
         <corners
             android:bottomLeftRadius="4dp"
             android:bottomRightRadius="0dp"
             android:topLeftRadius="4dp"
             android:topRightRadius="0dp" />
         <stroke
             android:width="1dp"
             android:color="@color/nasty_green" />
         <solid android:color="@android:color/transparent" />
     </shape>

</inset>

2

Il n'y a aucune mention sur les fichiers de neuf patchs ici. Oui, vous devez créer le fichier, mais c'est un travail assez facile et c'est vraiment une solution " cross-version et transparence ". Si le fichier est placé dans le drawable-nodpirépertoire, il fonctionne en pxfonction, et dans les drawable-mdpitravaux à peu près comme base de dp (grâce au rééchantillonnage).

Le fichier d'exemple pour la question d'origine ( bordure droite: 1px rouge fixe; ) se trouve ici:

http://ge.tt/517ZIFC2/v/3?c

Placez-le simplement dans le drawable-nodpirépertoire.


2

Bordures de différentes couleurs. J'ai utilisé 3 articles.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
    <item android:top="3dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_grey" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.