Açık taraflı Android vuruş mu?

96

Yalnızca belirli taraflarda konturlu bir Android şekli nesnesi oluşturmak mümkün müdür?

Örneğin:

<stroke 
 android:width="3dip" 
 android:color="#000000"
    android:dashWidth="10dip" 
    android:dashGap="6dip" />

Bu CSS'ye benzer:

border: 3px dashed black;

Vuruşu sadece bir tarafa nasıl ayarlayabilirim? Bunu CSS'de böyle yapardım:

border-left: 3px dashed black;

Bunu Android XML'de nasıl yaparsınız?

android  android-drawable  android-shape 
— Reed Morse
kaynak

Yanıtlar:

127

Bununla iyi bir çözüme ulaştım:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
    <item android:top="-1dp" android:right="-1dp" android:left="-1dp">
      <shape>
            <solid android:color="@android:color/transparent" />
            <stroke android:width="1dp" android:color="#ffffff" />
      </shape>
    </item>

</layer-list>

Bu, şeffaf bir arka plana ancak yine de açık bir kontur rengine ihtiyacınız olduğunda işe yarar (Benim durumumda sadece bir alt çizgiye ihtiyacım vardı). Arka plan rengine ihtiyacınız varsa, Maragues cevabında olduğu gibi düz bir şekil rengi ekleyebilirsiniz.

DÜZENLE 1

Bazen, Yüksek Yoğunluklu cihazlar için, düşük eğim değerlerinin kullanılması çok ince veya görünmez vuruşlar veya mesafelerle sonuçlanabilir. Bu, ListView bölücülerini ayarlarken de başınıza gelebilir.

En basit çözüm, 1 dp yerine 1 piksellik bir mesafe kullanmaktır. Bu, çizgiyi her yoğunlukta her zaman görünür hale getirecektir. En iyi çözüm, her cihaz için en iyi boyutu elde etmek için her yoğunluk için boyut kaynakları oluşturmaktır.

Düzenle 2

Eğlenceli ama bunu 6 yıl sonra kullanmayı denedim ve Lollipop cihazlarında iyi bir sonuç alamıyorum.

Muhtemelen mevcut çözüm 9 yama kullanmaktır. Android, bunca zaman sonra bu soruna kolay bir çözüm getirmiş olmalıydı.

— htafoya
kaynak
Bu da benim için çalıştı, ancak tam olarak neden -1dp yerine -2dp kullanmak zorunda olduğumu bilmiyorum. İkincisini kullanırsam, yine de ince bir çizgi görebilirim.
— Edu Zamora
1
@EduZamora evet, görünüşe göre yüksek yoğunluklu cihazlar için -1dp beklendiği gibi çalışmıyor
— htafoya
Ayrıca tüm taraflar için sınır alıyorum, ancak yalnızca alt sınır değil.
— Cheok Yan Cheng
@YanChengCHEOK 1dp yerine 1px ile deneyin.
— htafoya
@htafoya bu harika bir çözüm. Teşekkürler!
— abriggs
54

Bu sorunun uzun zaman önce gönderildiğini biliyorum, bu nedenle yanıt, bu soruyu gönderen kişi tarafından kullanılmayacak, ancak yine de başkalarına yardımcı olabilir.

 <?xml version="1.0" encoding="UTF-8"?>
    <!-- inset is used to remove border from top, it can remove border from any other side-->
    <inset xmlns:android="http://schemas.android.com/apk/res/android"
        android:insetTop="-2dp"
        >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rectangle">
        <stroke android:width="1dp" android:color="#b7b7b7" />
        <corners android:bottomRightRadius="5dp"  android:bottomLeftRadius="5dp"/>

        <solid android:color="#454444"/>
    </shape>
    </inset>

insetEtiketi kullanın ve kaldırmak istediğiniz yan kenarlık için negatif bir değer verin.

Olası değerler şunlardır:

android:insetTop="-1dp" android:insetBottom="-1dp" android:insetLeft="-1dp" android:insetRight="-1dp"

— Nirmal Dhara
kaynak
Evet ve yaptığım şeyi yapma ve cevabın geri kalanını okumadan ekli özeti kontur etiketine koymaya çalışmayın! (BTW OP yanıtı için teşekkürler. Mükemmel çözüm)
— Kiran
zarif ! Bu çözümü seviyorum
— Hao Qi
41

Bunu, biri en alta yerleştirilmiş 1dp yüksekliğinde iki şekli birleştiren bir liste katmanı kullanarak çözdüm.

optionscreen_bottomrectangle.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item>
      <shape>
            <solid android:color="#535353" />
      </shape>
</item>
<!-- This is the main color -->
<item android:bottom="1dp">
     <shape>
           <solid android:color="#252525" />
     </shape>
</item>
</layer-list>

Ardından, layout / main.xml dosyasında

<TextView
    android:id="@+id/bottom_rectangle"
    android:background="@drawable/optionscreen_bottomrectangle"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_below="@id/table_options"
    android:layout_above="@id/exit_bar"/>

Bu, table_options ve exit_bar arasındaki boşluğu bir arka planla doldurur ve exit_bar'ın 1dp'lik bir satır yazdırmasından hemen önce. Bu benim için hile yaptı, umarım başkasına yardımcı olur.

Katmanları doğru sıraya yerleştirmek için yanıt düzenlendi. Thx Alex!

— Maragues
kaynak
Kendinize gerçekten bir cevap almak istiyorsanız, bir cevap göndermemek kullanışlı olabilir. Diğer geliştiriciler zaten bir cevap olduğunu gördüklerinde (bu durumda aslında hayır olsa da) cevap vermeye meyilli değillerdir.
— MrSnowflake
31

Bir diğeri, diğer yanıtları yerine dolgu kullanarak alır. Bu küçük parçacık, üstte ve altta bir sınır oluşturur.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- This is the line -->
    <item>
          <shape>
                <padding android:left="0dp" android:top="1dp" android:right="0dp" android:bottom="1dp"/>
                <solid android:color="#898989" />
          </shape>
    </item>
    <!-- This is the main color -->
    <item>
         <shape>
             <solid android:color="#ffffff" />
         </shape>
    </item>
</layer-list>
— ug_
kaynak
4
Yuvarlak köşelere ihtiyacınız varsa, bu açık ara en iyi cevaptır.
— MacKinley Smith
Bu da bana çok yardımcı oldu. Lütfen bir deneyin ve olumlu oy verin
— Boy
@ug_ Bence bu en iyi yaklaşım. Mükemmel çalışıyor, teşekkürler
— Lalit Sharma
İşler. Android Studio (v1.1) önizleme bölmesinde tamamen yanlış görünüyor, ancak cihazda sorun değil.
— Murat Ögat
26

@ Katman listesi çekilebilir öğeleri yukarıdan aşağıya çekildiğinden (listedeki son öğenin en üste çizildiği anlamına gelir), Maragues'in cevabı geriye doğrudur:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item>
      <shape>
            <solid android:color="#535353" />
      </shape>
</item>
<!-- This is the main color -->
<item android:bottom="1dp">
     <shape>
           <solid android:color="#252525" />
     </shape>
</item>

</layer-list>

Bu, şekli çizgi rengiyle etkili bir şekilde dolduracak, ardından arka plan rengini bunun üzerine çizecek ve çizgi renginin görünmesi için son 1dp'yi temiz bırakacaktır.

— Alex Pretzlav
kaynak
2 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


<item>
    <shape android:shape="rectangle" >
        <stroke  android:width="2dp"
                 android:color="#BBBBBB" />
        <solid android:color="@android:color/transparent" />
    </shape>
</item>
<item  android:bottom="2dp" >
    <shape android:shape="rectangle" >
        <stroke  android:width="2dp"
                 android:color="@color/main_background_color" />
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

— güneşli
kaynak
2

Aşağıdaki kodu kullandım.

<?xml version="1.0" encoding="UTF-8"?>
<!-- inset is used to remove border from top, it can remove border from any other side-->
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetTop="-2dp" android:insetLeft="-2dp" android:insetRight="-2dp"
    >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rectangle">
        <stroke android:width="1dp" android:color="@color/colorPrimary" />
        <solid android:color="#0000"/>
        <padding android:left="2dp" android:top="2dp" android:bottom="2dp" android:right="2dp"/>
    </shape>
</inset>
— Ken W.
kaynak
0

Basit ve verimli

Şeffaf bir görünüme sahip olmak ve dışarıdaki her şeyin bir renk kaplamasına sahip olması için, yapabileceğiniz şey , dış görünümler merkez görünümün üzerine basmadan merkez görünümü çevreleyen görünümler oluşturmaktır .

Bu şekilde, mizanpajın dışında bir çekilebilirlikten kaçınırsınız ve çalışma zamanında hesaplamalar yapmak zorunda kalmadan görünümlerin mesafeleri üzerinde daha fazla kontrole sahip olursunuz.

<androidx.constraintlayout.widget.ConstraintLayout .. >

    <View
        android:id="@+id/center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:background="@color/transparent"/>

   <View
        android:id="@+id/left_overlay"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/center"
        app:layout_constraintTop_toBottomOf="@id/top_overlay"
        app:layout_constraintBottom_toTopOf="@id/bottom_overlay"
        android:background="@color/black"
        android:alpha="0.5"
        />

    <View
        android:id="@+id/right_overlay"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="@id/center"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/top_overlay"
        app:layout_constraintBottom_toTopOf="@id/bottom_overlay"
        android:background="@color/black"
        android:alpha="0.5"
        />

    <View
        android:id="@+id/top_overlay"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/center"
        android:background="@color/black"
        android:alpha="0.5"
        />

    <View
        android:id="@+id/bottom_overlay"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/center"
        android:background="@color/black"
        android:alpha="0.5"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

GL

— Braian Coronel
kaynak
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.