Gibt es eine einfache Möglichkeit, einen Rahmen am oberen und unteren Rand einer Android-Ansicht hinzuzufügen?

Question

Ich habe eine TextView und ich möchte einen schwarzen Rand entlang der oberen und unteren Grenzen hinzufügen. Ich habe versucht, hinzuzufügen android:drawableTop y android:drawableBottom auf die TextView, aber das führte nur dazu, dass die gesamte Ansicht schwarz wurde.

<TextView
    android:background="@android:color/green"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawableTop="@android:color/black"
    android:drawableBottom="@android:color/black"
    android:text="la la la" />

Gibt es eine Möglichkeit, einfach einen oberen und unteren Rand zu einer Ansicht (insbesondere eine TextView) in Android hinzufügen?

Answer 1

Unter Android 2.2 konnten Sie Folgendes tun.

Erstellen Sie ein xml Drawable wie /res/drawable/textlines.xml und weisen Sie dieses als Hintergrund-Eigenschaft einer TextView zu.

<TextView
android:text="My text with lines above and below"
android:background="@drawable/textlines"
/>

/res/drawable/textlines.xml

<?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:width="1dp" android:color="#FF000000" />
            <solid android:color="#FFDDDDDD" />

        </shape>
   </item>

   <item android:top="1dp" android:bottom="1dp"> 
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FFDDDDDD" />
            <solid android:color="#00000000" />
        </shape>
   </item>

</layer-list>

Der Nachteil dabei ist, dass Sie eine undurchsichtige Hintergrundfarbe angeben müssen, da Transparenzen nicht funktionieren. (Zumindest dachte ich das, aber ich habe mich geirrt). Im obigen Beispiel können Sie sehen, dass die Volltonfarbe der ersten Form #FFdddddd in der zweiten Form Strichfarbe kopiert wird.

Answer 2

Ich habe einen Trick angewandt, damit der Rahmen außerhalb des Containers angezeigt wird. Mit diesem Trick wird nur eine Linie gezeichnet, so dass der Hintergrund der darunter liegenden Ansicht angezeigt wird.

<?xml version="1.0" encoding="utf-8"?>
<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="1dp"
                android:color="#FF000000" />

            <solid android:color="#00FFFFFF" />

            <padding android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</layer-list>

Answer 3

Zum Hinzufügen einer 1dp weißen Rand nur am unteren Rand und einen transparenten Hintergrund zu haben, können Sie das Folgende verwenden, was einfacher ist als die meisten Antworten hier.

Para el TextView oder eine andere Ansicht hinzufügen:

android:background="@drawable/borderbottom"

Und in der drawable Verzeichnis die folgende XML-Datei mit dem Namen borderbottom.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-2dp" android:left="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#ffffffff" />
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

Wenn Sie einen Rahmen am oberen Rand wünschen, ändern Sie die android:top="-2dp" a android:bottom="-2dp"

Die Farbe muss nicht weiß sein und der Hintergrund muss auch nicht transparent sein.

En solid Element ist möglicherweise nicht erforderlich. Dies hängt von Ihrem Entwurf ab (danke V. Kalyuzhnyu).

Grundsätzlich wird mit dieser XML-Datei ein Rahmen mit der Rechteckform erstellt, aber die obere, rechte und linke Seite wird über den Renderbereich für die Form hinausgeschoben. Dadurch bleibt nur der untere Rand sichtbar.

Answer 4

Option 1: Zeichnungsfähige Form

Dies ist die einfachste Option, wenn Sie einen Rahmen um ein Layout oder eine Ansicht wünschen, in dem Sie den Hintergrund festlegen können. Erstellen Sie eine XML-Datei im Verzeichnis drawable der in etwa so aussieht:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#8fff93" />

    <stroke
        android:width="1px"
        android:color="#000" />

</shape>

Sie können die solid wenn Sie keine Füllung wünschen. Der Satz background="@drawable/your_shape_drawable" auf Ihr Layout/Ihre Ansicht.

Option 2: Hintergrundansicht

Hier ist ein kleiner Trick, den ich in einem RelativeLayout . Im Grunde genommen haben Sie ein schwarzes Quadrat unter der Ansicht, der Sie einen Rahmen geben wollen, und dann geben Sie dieser Ansicht etwas Polsterung (nicht Rand!), so dass das schwarze Quadrat an den Rändern durchscheint.

Das funktioniert natürlich nur, wenn die Ansicht keine transparenten Bereiche enthält. Wenn dies der Fall ist, empfehle ich Ihnen, eine eigene BorderView die nur den Rand zeichnet - es sollten nur ein paar Dutzend Zeilen Code sein.

<View
    android:id="@+id/border"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/image"
    android:layout_alignLeft="@+id/image"
    android:layout_alignRight="@+id/image"
    android:layout_alignTop="@+id/main_image"
    android:background="#000" />

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_...
    android:padding="1px"
    android:src="@drawable/..." />

Falls Sie sich wundern, es tut Arbeit mit adjustViewBounds=true . Es funktioniert jedoch nicht, wenn Sie einen Hintergrund in einem ganzen Land haben wollen. RelativeLayout weil es einen Fehler gibt, der das Ausfüllen eines RelativeLayout mit einer View . In diesem Fall empfehle ich die Shape auslosbar.

Option 3: 9-Fleck

Eine letzte Möglichkeit ist die Verwendung einer 9-Felder-Ziehscheibe wie dieser:

Sie können es in jeder Ansicht verwenden, in der Sie die android:background="@drawable/..." . Und ja, es muss 6x6 sein - ich habe es mit 5x5 versucht und es hat nicht funktioniert.

Der Nachteil dieser Methode ist, dass man die Farben nicht so einfach ändern kann, aber wenn man ausgefallene Ränder haben möchte (z.B. nur einen Rand oben und unten, wie in dieser Frage), dann kann man das nicht mit der Shape zeichenbar, was nicht sehr leistungsfähig ist.

Option 4: Zusätzliche Ansichten

Ich habe vergessen, diese wirklich einfache Option zu erwähnen, wenn Sie nur Ränder über und unter Ihrer Ansicht haben möchten. Sie können Ihre Ansicht in eine vertikale LinearLayout (falls nicht bereits vorhanden) und fügen Sie dann leere View s über und unter ihm so:

<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>

Answer 5

Die derzeit akzeptierte Antwort funktioniert nicht. Sie erzeugt dünne vertikale Ränder auf der linken und rechten Seite der Ansicht als Ergebnis von Anti-Aliasing.

Diese Version funktioniert perfekt. Sie ermöglicht es Ihnen auch, die Randbreiten unabhängig voneinander einzustellen, und Sie können auch Ränder an den linken / rechten Seiten hinzufügen, wenn Sie wollen. Der einzige Nachteil ist, dass es NICHT unterstützt Transparenz.

Erstellen Sie eine xml-Zeichenfläche mit dem Namen /res/drawable/top_bottom_borders.xml mit dem nachstehenden Code und weisen Sie ihn als Hintergrund-Eigenschaft eines TextViews zu.

<?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="#DDDD00" /> <!-- border color -->
        </shape>
    </item>

    <item
        android:bottom="1dp" 
        android:top="1dp">   <!-- adjust borders width here -->
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />  <!-- background color -->
        </shape>
    </item>
</layer-list>

Getestet unter Android KitKat bis Marshmallow