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.