Doğrusal bir düzenin sadece bir tarafına nasıl kenar çizilir?


186

Doğrusal bir düzene kenarlık çizebilirim, ancak her taraftan çiziliyor. Sadece sağ tarafla sınırlamak istiyorum, CSS'de yaptığınız gibi (sınır-sağ: 1px düz kırmızı;).

Bunu denedim, ama yine de her taraftan çekiliyor:

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

Bunu nasıl yapacağınıza dair herhangi bir öneriniz var mı?

BTW, gerekli tarafa 1dp genişliğinde bir görünüm koymak için kesmek istemiyorum.


mizanpajınızda
drawableLeft

Yanıtlar:


359

Bir tarafta kenarlık elde etmek için bunu kullanabilirsiniz

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

REDAKTE

Benim de dahil olmak üzere birçoğu şeffaf arka plana sahip tek bir kenarlık olmasını istediğinden, BorderDrawablecss kullandığımız gibi bana farklı boyut ve renkte kenarlıklar verebilecek bir kenarlık uyguladım . Ancak bu, xml ile kullanılamadı. XML'i desteklemek BorderFrameLayoutiçin, düzeninizin sarılabileceği bir ekledim .

Tüm kaynak için github'uma bakın .


5
alt kenarlıklı düz alfa tabanlı bir renk istiyorsanız ne olur? Android Drawable XML api ile bunun için bir çözüm düşünüyordum ama anlayamıyorum.
Mario Lenci

Bu benim için işe yaramadı - garip bir şekilde içeride daha koyu bir renk istediğimin tersini yaptım, gri degrade, yatılılara bindirildi. Öğenin üzerine drawableLeft koymak için belirli bir boyutta bir dikdörtgen çizilebilir hale getirmeyi düşünüyordum. Bu akıcı görünmüyor.
jbenowitz

@jbenowitz: Öğenin katman listesindeki sırası daha önemlidir. Eğer u ters ise o sonucu alacaksınız.
Vivek Khandelwal

Kenarlık rengi ve düğme rengi kalan şekli bir kontur ekleyerek bunu düzelttim. Hile yaptı.
jbenowitz

242

Şeffaf bir bg'ye izin veren pasta gibi kolay:

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

Kenarlık konumunu değiştirmek için açıyı değiştirin:

  • 0 = sol
  • 90 = alt
  • 180 = doğru
  • 270 = üst

19
Bu, buradaki en iyi cevaptır, çok kötü değil, yok
mittelmania

11
Güzel, ancak kesinlikle "pasta gibi kolay" olarak tarif olmaz.
funkybro

7
Daha kalın bir sınıra ihtiyacınız varsa veya birden çok kenarda sınıra ihtiyacınız varsa bu çalışmaz.
holografik prensip

1
@codeman - bunu görünümünüzün arka planı olarak kullanın, ardından yüksekliğini devralır.
Oded Breiner

2
kontur veya kenar genişliği nasıl ayarlanır?
Ruturaj Patil

101

tek bir katman kullanarak istediğinizi uygulamak da mümkündür

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

Bu şekilde sadece sol sınır görülebilir ancak oynayarak istediğiniz herhangi bir kombinasyon elde edebilirsiniz bottom, left, rightve topniteliklerini itemelemanı


3
Bu, başka bir arka plan renginiz olduğunda ve bu çekilebilir bg'yi kenarlıkla kaplamak istediğinizde kesinlikle yararlıdır. (y)
Aung Pyae

3
Tam olarak neye ihtiyacım var, ama negatif dolgu kullanmak doğru mu?
IlyaEremin

1
Bu en iyi çözümdür. -5dp'nin orada ne yaptığını rahatsız ediyorum.
Amit Kumar

1
Negatif dolgu HTML / CSS'de yaygındır. Sadece işleri diğer yöne sürükler. Deneyimlerime göre, Android'de de mükemmel bir şekilde geçerli görünüyor.
spaaarky21

Düzeninizde clipChildren = false veya clipToPadding = false varsa, negatif kenar boşlukları kullanan uygulamalar iyi çalışmaz. Bu durumda, çözümü Vivek Khandelwal
Jesús Barrera

80

Çekmecenin sadece bir tarafına kenarlık almak insetiçin diğer 3 tarafa negatif uygulayın (bu kenarlıkların ekran dışına çizilmesine neden olur).

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

resim açıklamasını buraya girin

Bu yaklaşım naykah'ın cevabına benzer, ancak a layer-list.


4
Bu en iyi cevap IMO
James

çok iyi cevap, ben sadece genişliği değiştirmek ve 10dp iç metin :) Ve daha fazlası, ben sol kenarlık gerekir, bu yüzden android: insetLeft android: insetRight değiştirin. Çok basit! Materyal düğmesini tıklatma: D
Phuong

Tam olarak neye ihtiyacım vardı, insertXhangi sınırların gösterileceğini ve neyin gösterilmeyeceğine karar vermek için en üstte değiştirin .
CularBytes

@Null değerinde düz bir renge bile sahip olabilirim ve sonra bu yöntem fazla çekilmeye neden olmaz. Cin. Teşekkür ederim!
Unknownweirdo

2
Dikkat: Bu, görünümünüzün içeriğini değiştirir ve ayrıca yeniden boyutlandırır. Dikkatli kullanın.
vovahost

7

Alternatif olarak (arka plan kullanmak istemiyorsanız), aşağıdaki gibi bir görünüm oluşturarak kolayca yapabilirsiniz:

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

Yalnızca doğru bir kenarlığa sahip olmak için, bunu mizanpajdan sonra yerleştirin (kenarlık olmasını istediğiniz yere):

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

Yalnızca sol kenarlığa sahip olmak için, bunu mizanpajın önüne yerleştirin (kenarlık olmasını istediğiniz yere):

Benim için çalıştı ... Umut onun biraz yardımcı ....


6

Aşağıdaki kod ile efekti elde edebildim

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

Yer değiştirme yönünü değiştirerek sınır konumu gereksinimlerinizi ayarlayabilirsiniz


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

Başka bir harika örnek misal

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

Burada dokuz yama dosyalarından bahsedilmiyor . Evet, dosyayı oluşturmanız gerekiyor, ancak bu oldukça kolay bir iş ve gerçekten " çapraz sürüm ve şeffaflık destekliyor " çözümü. Dosya için yerleştirilirse drawable-nodpidizinde, bu işleri pxdayanır ve içinde drawable-mdpiyaklaşık dp üs olarak işler (resample sayesinde).

Orijinal soru için örnek dosya ( kenarlık-sağ: 1px düz kırmızı; ) burada:

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

Sadece drawable-nodpidizine yerleştirin.


2

Farklı renkteki sınırları. 3 ürün kullandım.

<?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>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.