Come disegnare un bordo su un solo lato di un layout lineare?


186

Sono in grado di disegnare il bordo su un layout lineare, ma viene disegnato su tutti i lati. Voglio limitarlo solo al lato destro, come nel CSS (border-right: 1px solid red;).

Ho provato questo, ma attinge ancora da tutti i lati:

<?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>

Qualche suggerimento su come realizzare questo?

A proposito, non voglio usare l'hacking di mettere una vista di larghezza 1dp sul lato richiesto.


puoi usare drawableLeft nel tuo layout
njzk2

Risposte:


359

Puoi usarlo per ottenere il bordo da un lato

<?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>

MODIFICATO

Poiché molti tra cui me hanno voluto avere un bordo laterale con sfondo trasparente, ho implementato un BorderDrawablebordo che potrebbe darmi bordi con dimensioni e colore diversi allo stesso modo in cui usiamo i CSS. Ma questo non può essere utilizzato tramite XML. Per supportare XML, ho aggiunto un BorderFrameLayoutin cui è possibile includere il layout.

Vedi il mio github per la fonte completa.


5
cosa succede se si desidera un colore alfa solido con un bordo inferiore? Ho pensato a una soluzione a questo con l'API XML Drawable Android ma non riesco a capirlo.
Mario Lenci,

Questo non ha funzionato per me - stranamente ha fatto l'inverso di quello che volevo un colore più scuro all'interno, con il gradiente grigio che ho sovrapposto per i boarder. Stavo pensando di creare un rettangolo da disegnare ad una certa dimensione da mettere come disegnabile a sinistra sull'elemento. Questo non sembra ottimizzato.
jbenowitz,

@jbenowitz: l'ordine dell'elemento nell'elenco dei livelli è più importante. Se invertirai, otterrai questi risultati.
Vivek Khandelwal,

Ho risolto il problema aggiungendo un tratto al colore del bordo e alla forma rimanente al colore del pulsante. Questo ha funzionato.
jbenowitz,

242

Facile come una torta, che consente un bg trasparente:

<?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>

Cambia l'angolazione per cambiare la posizione del bordo:

  • 0 = sinistra
  • 90 = fondo
  • 180 = destra
  • 270 = in alto

19
Questa è di gran lunga la migliore risposta qui, peccato che non sia stata votata
mittelmania

11
Bello, comunque non lo descriverei come "facile come una torta".
funkybro,

7
Questo non funziona se hai bisogno di un bordo più spesso o se hai bisogno di bordi su più lati.
principio olografico

1
@codeman: usa questo come sfondo per la tua vista, quindi erediterà la sua altezza.
Oded Breiner,

2
come regolare la larghezza del tratto o del bordo?
Ruturaj Patil,

101

è anche possibile implementare ciò che si desidera utilizzando un singolo livello

<?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>

questo modo solo bordo sinistro è visibile, ma è possibile ottenere qualsiasi combinazione che si desidera giocando con bottom, left, righte topgli attributi della itemdell'elemento


3
Questo è sicuramente utile quando hai un altro colore di sfondo e vuoi sovrapporre questo disegno bg con bordo. (y)
Aung Pyae,

3
Esattamente quello che mi serve, ma è giusto usare imbottiture negative?
IlyaEremin,

1
Questa è la soluzione migliore Sto disturbando cosa fa -5dp lì.
Amit Kumar,

1
Il padding negativo è comune in HTML / CSS. Sposta semplicemente le cose nell'altra direzione. Nella mia esperienza, sembra perfettamente valido anche in Android.
spaaarky21,

Le implementazioni che utilizzano margini negativi non funzionano bene se il layout ha clipChildren = false o clipToPadding = false. In questo caso, puoi utilizzare la soluzione con due rettangoli sovrapposti, come quello proposto da Vivek Khandelwal
Jesús Barrera,

80

Per ottenere un bordo su un solo lato di un disegno, applica un negativo insetagli altri 3 lati (facendo sì che quei bordi vengano disegnati fuori dallo schermo).

<?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>

inserisci qui la descrizione dell'immagine

Questo approccio è simile alla risposta di Naykah, ma senza l'uso di a layer-list.


4
Questa è la risposta migliore IMO
James,

risposta molto buona, ho solo bisogno di cambiare la larghezza e l'inserzione a 10dp :) E ancora, ho bisogno del bordo a sinistra, quindi cambio android: insetLeft in android: insetRight. Così semplice! Tenendo premuto il pulsante Materiale: D
Phuong

Esattamente quello che mi serviva, cambia insertXin alto per decidere quali confini mostrare e cosa no.
CularBytes,

Posso anche avere un colore solido di @null e quindi questo metodo non provoca alcun sovraccarico. Genio. Grazie!
Unknownweirdo,

2
Attenzione: questo sposta il contenuto della vista e lo ridimensiona. Usare con cura.
vovahost il

7

In alternativa (se non si desidera utilizzare lo sfondo), è possibile farlo facilmente creando una vista come segue:

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

Per avere solo un bordo destro, posizionalo dopo il layout (dove vuoi avere il bordo):

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

Per avere solo un bordo sinistro, posizionalo prima del layout (dove vuoi avere il bordo):

Ha funzionato per me ... Spero che sia di qualche aiuto ....


6

Sono stato in grado di ottenere l'effetto con il seguente codice

<?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>

È possibile adattarsi alle proprie esigenze di posizione del bordo modificando la direzione di spostamento


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 altro grande esempio esempio

<?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

Non si fa menzione dei file a nove patch qui. Sì, devi creare il file, tuttavia è un lavoro abbastanza semplice ed è davvero una soluzione " cross-version e trasparenza che supporta ". Se il file viene posizionato nella drawable-nodpidirectory, funziona in pxbase e drawable-mdpifunziona approssimativamente come base dp (grazie al ricampionamento).

Il file di esempio per la domanda originale ( border-right: 1px solid red; ) è qui:

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

Posizionalo nella drawable-nodpidirectory.


2

Bordi di diversi colori. Ho usato 3 articoli.

<?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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.