Styl dolnej linii w systemie Android


120

Muszę utworzyć kształt androida, tak aby tylko dół miał obrys (linia przerywana). Kiedy spróbuję wykonać następujące czynności, pociągnięcie dzieli kształt na pół przez środek. Czy ktoś wie, jak to zrobić dobrze? kreska musi być dolną linią / obramowaniem. Używam kształtu jako tła do TextView. Proszę, nieważne, dlaczego tego potrzebuję.

<?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="#1bd4f6" />
        </shape>
    </item>

    <item>
        <shape android:shape="line" >
            <padding android:bottom="1dp" />

            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

2
Po co miałbym iść zobaczyć twój projekt git dla czegoś tak prostego? Szukasz hitów do tego projektu?
Cote Mounyo

tak z ciekawości, dlaczego używasz px do określania rozmiarów myślników?
Jose_GD,

Odpowiedzi:


314

To trochę hack, ale myślę, że to prawdopodobnie najlepszy sposób, aby to zrobić. Linia przerywana zawsze będzie na dole, niezależnie od wysokości.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

Wyjaśnienie:

Drugi kształt to przezroczysty prostokąt z przerywanym konturem. Kluczem do pojawienia się obramowania tylko na dole są ujemne marginesy ustawione na pozostałych stronach. Te ujemne marginesy „wypychają” przerywaną linię poza narysowany obszar po tych stronach, pozostawiając tylko linię na dole. Jednym potencjalnym efektem ubocznym (którego nie próbowałem) jest to, że w przypadku widoków, które wykraczają poza własne granice, granice ujemnych marginesów mogą stać się widoczne.


5
Rzeczywiście sprytne. Zajęło mi trochę czasu, zanim zrozumiałem, że to, co sprawia, że ​​to działa, to różnica w 1 dp (w wartości bezwzględnej) między górą, prawym i lewym a szerokością obrysu :)
Jose_GD

5
To działa idealnie, ale czy ktoś mógłby uzupełnić odpowiedź o wyjaśnienie matematyki w tym (dla biednych dusz, takich jak ja i każdy, kto przyjedzie tutaj w nadchodzących dniach) :)
źródło.rar

Działa świetnie. Możesz nawet użyć selektora wskazującego pliki XML z listą warstw w zależności od stanu. Musiałem to rozgryźć i to też działa.
Dacker

Nie wprowadzaj niepotrzebnego przerysowania. Myślę, że rozwiązanie @Anonan jest lepsze. Spróbuj zmodyfikować go do swoich potrzeb.
Vlad

44

To załatwia sprawę ...

<item >
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BOTTOM_LINE_COLOR"/>
    </shape>
</item>

<item android:bottom="1.5dp">
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BG_COLOR"/>
    </shape>
</item>

Istnieją dwa prostokąty nakładające się na siebie i dodaj dolną przestrzeń, aby pokazać inny kolor jako linię. więc możesz zastosować to w inny sposób
Jongz Puangput

3
Dobra odpowiedź, ale ze zbyteczną nadwyżką
Lester

i nie będzie działać, gdy masz kolory z alfa
Dirk

43
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:bottom="0dp">

        <shape android:shape="rectangle">
            <solid android:color="#88FFFF00"/>
            <stroke
                android:width="5dp"
                android:color="#FF000000"/>
        </shape>
    </item>
</layer-list>

U mnie zadziałało idealnie! Dzięki.
hetsgandhi

19

Ta odpowiedź jest dla tych wyszukiwarek Google, którzy chcą wyświetlić przerywane dolne obramowanie, EditTextjak tutaj

próba

Utwórz folder dotted.xmlwewnętrzny drawablei wklej je

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="0.5dp"
                android:color="@android:color/black" />    
            <solid android:color="#ffffff" />
            <stroke
                android:width="1dp"
                android:color="#030310"
                android:dashGap="5dp"
                android:dashWidth="5dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

Następnie po prostu ustaw android:background atrybut na dotted.xmlwłaśnie utworzony. Twój EditTextwygląd wygląda tak.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Some Text"
    android:background="@drawable/dotted" />

13

Wydaje mi się, że jest to proste, bez tych wszystkich negatywnych poduszek i bocianów.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/main_bg_color"/>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="5dp"/>
            <solid android:color="@color/bottom_bar_color"/>
        </shape>
    </item>
</layer-list>

2
Jeśli nie potrzebujesz specjalnego tła, możesz usunąć<item android:drawable="@color/main_bg_color"/>
Overclover

1
Działa z Androidem 27, nie działa z Androidem 19 ... nie testowałem innych wersji.
Ridcully

10

Wypróbuj następny kod XML do rysowania:

    <layer-list>
        <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
            <shape>
                <solid android:color="@android:color/transparent" />
                <stroke
                    android:width="1dp"
                    android:color="#fff" />
            </shape>
        </item>
    </layer-list>

7

Myślę, że nie musisz używać kształtu, jeśli cię rozumiem.

Jeśli wyglądasz tak, jak pokazano na poniższym obrazku, użyj następującego układu.

wprowadź opis obrazu tutaj

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#1bd4f6"
    android:paddingBottom="4dp" >

    <TextView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="#ababb2"
        android:padding="5dp"
        android:text="Hello Android" />
 </RelativeLayout>

 </RelativeLayout>

EDYTOWAĆ

baw się z tymi właściwościami, a otrzymasz wynik

    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension"

spróbuj w ten sposób

<?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="#1bd4f6" />
    </shape>
</item>

<item android:top="20px"
    android:left="0px">
    <shape android:shape="line"  >
        <padding android:bottom="1dp" />

        <stroke
            android:dashGap="10px"
            android:dashWidth="10px"
            android:width="1dp"
            android:color="#ababb2" />
    </shape>
</item>

</layer-list>

mój udar to przerywana linia
Cote Mounyo

To działa, jedynym zastrzeżeniem jest to, że kiedy rozmiar widoku jest zbyt mały, kształt staje się niewidoczny
Jose_GD,

Należy zawsze uważać, aby nie wprowadzać niepotrzebnego przerysowania.
Vlad

5

Proste rozwiązanie:

Utwórz plik do rysowania jako edittext_stroke.xml w folderze do rysowania. Dodaj poniższy kod:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
   >
    <stroke
        android:width="1dp"
        android:color="@android:color/white" >
    </stroke>
</shape>

W pliku układu dodaj element do rysowania do pliku edittext jako

android: drawableBottom = "@ drawable / edittext_stroke"

<EditText
      android:textColor="@android:color/white"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableBottom="@drawable/edittext_stroke"
      />

W tym przypadku twoja linia będzie w środku, a nie na dole
Sviatoslav Zaitsev

4

Zwykle do podobnych zadań - utworzyłem listę warstw, którą można rysować, taką jak ta:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
        <solid android:color="@color/underlineColor"/>
        </shape>
    </item>
<item android:bottom="3dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/buttonColor"/>
    </shape>
</item>

Pomysł polega na tym, że najpierw rysujesz prostokąt za pomocą underlineColor, a następnie narysujesz inny prostokąt z faktycznym buttonColor, ale stosując bottomPadding. To zawsze działa.

Ale kiedy potrzebowałem, aby buttonColor był przezroczysty, nie mogłem użyć powyższego rysowalnego. Znalazłem jeszcze jedno rozwiązanie

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>

<item android:drawable="@drawable/white_box" android:gravity="bottom"     android:height="2dp"/>
</layer-list>

(jak widać tutaj mainButtonColor jest przezroczysty, a white_box to zwykły prostokąt, który można narysować za pomocą białej bryły)


2

użyj tego xml zmień kolor według własnego wyboru.

<item>
    <layer-list>
        <item>
            <shape>
                <solid android:color="@color/gray_500" />

            </shape>
        </item>
        <!-- CONTENT LAYER -->
        <item android:bottom="2dp" >
            <shape>
                <solid android:color="#ffffff" />
            </shape>
        </item>
    </layer-list>
</item>

W przypadku, jeśli chcesz programowo

public static Drawable getStorkLineDrawable(@ColorInt int colorStrok, int    iSize, int left, int top, int right, int bottom)

{
    GradientDrawable gradientDrawable = new GradientDrawable();
    gradientDrawable.setShape(GradientDrawable.RECTANGLE);
    gradientDrawable.setStroke(iSize, colorStrok);
    LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{gradientDrawable});
    layerDrawable.setLayerInset(0, left, top, right, bottom);
    return layerDrawable;
}

nazwij tę metodę jak

  Drawable yourLineDrawable=  getStorkLineDrawable(yourColor, iSize, -iSize, -iSize, -iSize, 0);

2

To zadziałało najlepiej dla mnie:

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

Pokazuje linię tylko na dole. Możesz łatwo zmienić szerokość obrysu do rozmiaru, który lubisz, a także odpowiednio zaktualizować górną, lewą i prawą stronę.


2

Najłatwiej to zrobić, umieszczając za tym widokiem, gdzie chcesz dolną granicę

    <?xml version="1.0" encoding="utf-8"?>
    <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/colorPrimary" />

0

jest to całkowicie przezroczysty Edittext z przezroczystym tłem.

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/transparent" />
    </shape>
</item>

<item android:top="-3dp" android:right="-3dp" android:left="-3dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke

            android:width="2dp"
            android:color="@color/bottomline" />
    </shape>
</item>


0

Proste rozwiązanie :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="-1dp"
        android:left="-1dp"
        android:right="-1dp"
        android:top="-1dp">

        <shape android:shape="rectangle">

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

            <stroke
                android:width="5dp"
                android:color="@android:color/red"
                android:dashWidth="10dp"
                android:dashGap="12dp" />

        </shape>
    </item>
</layer-list>

I wreszcie coś takiego :)

wprowadź opis obrazu tutaj

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.