Style Bottom Line in Android


120

Ich muss eine Android-Form erstellen, damit nur der Boden einen Strich hat (eine gestrichelte Linie). Wenn ich Folgendes versuche, halbiert der Strich die Form mitten durch die Mitte. Weiß jemand, wie man es richtig macht? Der Strich muss die unterste Linie / Grenze sein. Ich verwende die Form als Hintergrund für eine Textansicht. Bitte, egal warum ich es brauche.

<?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
Warum sollte ich mir dein Git-Projekt für etwas so Einfaches ansehen? Suchen Sie nach Hits für dieses Projekt?
Cote Mounyo

Warum verwenden Sie aus Neugier px, um Strichgrößen anzugeben?
Jose_GD

Antworten:


313

Es ist eine Art Hack, aber ich denke, dies ist wahrscheinlich der beste Weg, dies zu tun. Die gestrichelte Linie befindet sich unabhängig von der Höhe immer unten.

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

Erläuterung:

Die zweite Form ist ein transparentes Rechteck mit einem gestrichelten Umriss. Der Schlüssel, um den Rand nur am unteren Rand erscheinen zu lassen, liegt in den negativen Rändern auf den anderen Seiten. Diese negativen Ränder "drücken" die gestrichelte Linie außerhalb des gezeichneten Bereichs auf diesen Seiten, wobei nur die Linie am unteren Rand verbleibt. Ein möglicher Nebeneffekt (den ich nicht ausprobiert habe) ist, dass bei Ansichten, die außerhalb ihrer eigenen Grenzen liegen, die negativen Randgrenzen sichtbar werden können.


5
In der Tat klug. Ich habe einige Zeit
gebraucht,

5
Das funktioniert perfekt, aber könnte jemand bitte die Antwort mit einer Erklärung der Mathematik ergänzen (für arme Seelen wie mich und alle anderen, die in den kommenden Tagen hier ankommen) :)
source.rar

Funktioniert super. Sie können sogar einen Selektor verwenden, der je nach Status auf xmls mit Ebenenliste verweist. Ich musste das herausfinden und es funktioniert auch.
Dacker

Führen Sie keine unnötige Überziehung ein. Ich denke, @ Anonan Lösung ist besser. Versuchen Sie, diese an Ihre Bedürfnisse anzupassen.
Vlad

44

Das macht den Trick ...

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

Es gibt zwei Rechtecke, die sich überlappen und einen unteren Bereich hinzufügen, um eine andere Farbe als Linie anzuzeigen. Sie können dies also auch auf andere Weise
anwenden

3
Gute Antwort, aber mit redundanter Überziehung
Lester

und wird auch nicht funktionieren, wenn Sie Farben mit Alpha haben
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>

Hat perfekt für mich funktioniert! Vielen Dank.
Hetsgandhi

19

Diese Antwort ist für diejenigen Google-Sucher, die einen gepunkteten unteren Rand EditTextwie hier anzeigen möchten

Stichprobe

Erstellen Sie dotted.xmlinnerhalb drawableOrdner und fügen Sie diese

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

Setzen Sie dann einfach das android:backgroundAttribut auf dotted.xmldas gerade erstellte. Du EditTextsiehst so aus.

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

13

Ich denke, es ist unkompliziert, ohne all diese negativen Polsterungen oder Störche.

<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
Wenn Sie keinen speziellen Hintergrund benötigen, können Sie den<item android:drawable="@color/main_bg_color"/>
Overclover

1
Funktioniert mit Android 27, funktioniert nicht mit Android 19 ... hat andere Versionen nicht getestet.
Ridcully

10

Versuchen Sie den nächsten XML-Zeichencode:

    <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

Ich denke, Sie müssen keine Form verwenden, wenn ich Sie verstanden habe.

Wenn Sie wie im folgenden Bild gezeigt aussehen, verwenden Sie das folgende Layout.

Geben Sie hier die Bildbeschreibung ein

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

BEARBEITEN

Wenn Sie mit diesen Eigenschaften spielen, erhalten Sie ein Ergebnis

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

versuche es so

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

Mein Schlaganfall ist eine gestrichelte Linie
Cote Mounyo

Dies funktioniert, die einzige Einschränkung ist, wenn die Größe der Ansicht zu klein wird, die Form unsichtbar wird
Jose_GD

Sie sollten immer darauf achten, keine unnötige Überziehung zu verursachen.
Vlad

5

Eine einfache Lösung:

Erstellen Sie eine Zeichendatei als edittext_stroke.xml im Zeichenordner. Fügen Sie den folgenden Code hinzu:

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

Fügen Sie in der Layoutdatei das Drawable zu edittext as hinzu

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"
      />

In diesem Fall wird Ihre Linie in der Mitte sein, nicht unten
Sviatoslav Zaitsev

4

Normalerweise für ähnliche Aufgaben - Ich habe eine Ebenenliste erstellt, die wie folgt gezeichnet werden kann:

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

Die Idee ist, dass Sie zuerst das Rechteck mit underlineColor zeichnen und dann darüber ein weiteres Rechteck mit der eigentlichen buttonColor zeichnen, aber bottomPadding anwenden. Es funktioniert immer.

Aber wenn ich buttonColor brauchte, um transparent zu sein, konnte ich das obige Zeichen nicht verwenden. Ich habe noch eine Lösung gefunden

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

(Wie Sie hier sehen können, ist die mainButtonColor transparent und white_box ist nur ein einfaches Rechteck, das mit weißem Volumen gezeichnet werden kann.)


2

Verwenden Sie diese XML-Datei, um die Farbe nach Ihren Wünschen zu ändern.

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

Für den Fall, dass Sie programmgesteuert möchten

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;
}

nenne diese Methode wie

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

2

Das hat bei mir am besten funktioniert:

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

Zeigt nur die Zeile unten an. Sie können die Strichbreite ganz einfach auf die gewünschte Größe ändern und auch die obere, linke und rechte Seite entsprechend aktualisieren.


1

Der einfachste Weg, dies zu tun, ist nach dieser Ansicht dort zu platzieren, wo Sie den unteren Rand möchten

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

0

es ist vollständig transparent Edittext mit transparentem Hintergrund.

<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

Eine einfache Lösung :

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

Und endlich haben wir so etwas :)

Geben Sie hier die Bildbeschreibung ein

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.