wake-up-neo.com

Wie setze ich einen Rahmen um eine Android Textansicht?

Ist es möglich, einen Rahmen um eine Textansicht zu ziehen?

679
yamspog

Sie können eine zeichnbare Form (ein Rechteck) als Hintergrund für die Ansicht festlegen.

<TextView Android:text="Some text" Android:background="@drawable/back"/>

Und Rechteck drawable back.xml (in res/drawable Ordner):

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" >
   <solid Android:color="@Android:color/white" />
   <stroke Android:width="1dip" Android:color="#4fa5d5"/>
</shape>

Sie können @Android:color/transparent verwenden, damit die Volltonfarbe einen transparenten Hintergrund hat. Sie können den Text auch durch Auffüllen vom Rand trennen. Weitere Informationen finden Sie unter: http://developer.Android.com/guide/topics/resources/drawable-resource.html

1196

Lassen Sie mich einige verschiedene (nicht programmatische) Methoden zusammenfassen.

Mit einer Form zeichnbar

Speichern Sie Folgendes als XML-Datei in Ihrem Zeichenordner (z. B. my_border.xml):

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

    <!-- View background color -->
    <solid
        Android:color="@color/background_color" >
    </solid>

    <!-- View border color and width -->
    <stroke
        Android:width="1dp"
        Android:color="@color/border_color" >
    </stroke>

    <!-- The radius makes the corners rounded -->
    <corners
        Android:radius="2dp"   >
    </corners>

</shape>

Dann legen Sie es einfach als Hintergrund für Ihre TextView fest:

<TextView
    Android:id="@+id/textview1"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/my_border" />

Mehr Hilfe:

Verwenden eines 9-Patches

Ein 9-Patch ist ein dehnbares Hintergrundbild. Wenn Sie ein Bild mit einem Rahmen erstellen, erhält Ihre TextView einen Rahmen. Alles, was Sie tun müssen, ist, das Bild zu erstellen und es dann in Ihrem TextView in den Hintergrund zu stellen.

<TextView
    Android:id="@+id/textview1"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/my_ninepatch_image" />

Hier sind einige Links, die zeigen, wie ein 9-Patch-Image erstellt wird:

Was ist, wenn ich nur den oberen Rand haben möchte?

Verwenden einer Ebenenliste

Sie können eine Ebenenliste verwenden, um zwei Rechtecke übereinander zu stapeln. Wenn Sie das zweite Rechteck etwas kleiner als das erste Rechteck machen, können Sie einen Rahmeneffekt erzielen. Das erste (untere) Rechteck ist die Rahmenfarbe und das zweite Rechteck ist die Hintergrundfarbe.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <!-- Lower rectangle (border color) -->
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="@color/border_color" />
        </shape>
    </item>

    <!-- Upper rectangle (background color) -->
    <item Android:top="2dp">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/background_color" />
        </shape>
    </item>
</layer-list>

Durch Einstellen von Android:top="2dp" wird der obere Rand um 2dp versetzt (verkleinert). Dadurch kann das erste (untere) Rechteck durchscheinen und einen Randeffekt erzielen. Sie können dies auf die gleiche Weise auf den TextView-Hintergrund anwenden, wie dies oben mit der Zeichenfunktion shape geschehen ist.

Hier einige weitere Links zu Ebenenlisten:

Verwenden eines 9-Patches

Sie können einfach ein 9-Patch-Bild mit einem einzelnen Rand erstellen. Alles andere ist wie oben beschrieben.

Verwenden einer Ansicht

Dies ist eine Art Trick, funktioniert aber gut, wenn Sie einem einzelnen TextView ein Trennzeichen zwischen zwei Ansichten oder einen Rahmen hinzufügen müssen.

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical" >

    <TextView
        Android:id="@+id/textview1"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

    <!-- This adds a border between the TextViews -->
    <View
        Android:layout_width="match_parent"
        Android:layout_height="2dp"
        Android:background="@Android:color/black" />

    <TextView
        Android:id="@+id/textview2"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

</LinearLayout>

Hier noch ein paar Links:

168
Suragch

Die einfache Möglichkeit besteht darin, eine Ansicht für Ihre TextView hinzuzufügen. Beispiel für die untere Begrenzungslinie:

<LinearLayout Android:orientation="vertical"
              Android:layout_width="fill_parent"
              Android:layout_height="fill_parent">
    <TextView
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="10dp"
        Android:layout_marginLeft="10dp"
        Android:text="@string/title"
        Android:id="@+id/title_label"
        Android:gravity="center_vertical"/>
    <View
        Android:layout_width="fill_parent"
        Android:layout_height="0.2dp"
        Android:id="@+id/separator"
        Android:visibility="visible"
        Android:background="@Android:color/darker_gray"/>

</LinearLayout>

Passen Sie für die Ränder in der anderen Richtung die Position der Separatoransicht an.

48
Young Gu

Ich habe dieses Problem behoben, indem ich die Textansicht erweitert und manuell einen Rahmen gezeichnet habe. Ich habe sogar hinzugefügt, damit Sie auswählen können, ob ein Rand gepunktet oder gestrichelt ist.

public class BorderedTextView extends TextView {
        private Paint paint = new Paint();
        public static final int BORDER_TOP = 0x00000001;
        public static final int BORDER_RIGHT = 0x00000002;
        public static final int BORDER_BOTTOM = 0x00000004;
        public static final int BORDER_LEFT = 0x00000008;

        private Border[] borders;

        public BorderedTextView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            init();
        }

        public BorderedTextView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }

        public BorderedTextView(Context context) {
            super(context);
            init();
        }
        private void init(){
            Paint.setStyle(Paint.Style.STROKE);
            Paint.setColor(Color.BLACK);
            Paint.setStrokeWidth(4);        
        }
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if(borders == null) return;

            for(Border border : borders){
                Paint.setColor(border.getColor());
                Paint.setStrokeWidth(border.getWidth());

                if(border.getStyle() == BORDER_TOP){
                    canvas.drawLine(0, 0, getWidth(), 0, Paint);                
                } else
                if(border.getStyle() == BORDER_RIGHT){
                    canvas.drawLine(getWidth(), 0, getWidth(), getHeight(), Paint);
                } else
                if(border.getStyle() == BORDER_BOTTOM){
                    canvas.drawLine(0, getHeight(), getWidth(), getHeight(), Paint);
                } else
                if(border.getStyle() == BORDER_LEFT){
                    canvas.drawLine(0, 0, 0, getHeight(), Paint);
                }
            }
        }

        public Border[] getBorders() {
            return borders;
        }

        public void setBorders(Border[] borders) {
            this.borders = borders;
        }
}

Und die Grenzklasse:

public class Border {
    private int orientation;
    private int width;
    private int color = Color.BLACK;
    private int style;
    public int getWidth() {
        return width;
    }
    public void setWidth(int width) {
        this.width = width;
    }
    public int getColor() {
        return color;
    }
    public void setColor(int color) {
        this.color = color;
    }
    public int getStyle() {
        return style;
    }
    public void setStyle(int style) {
        this.style = style;
    }
    public int getOrientation() {
        return orientation;
    }
    public void setOrientation(int orientation) {
        this.orientation = orientation;
    }
    public Border(int Style) {
        this.style = Style;
    }
}

Hoffe das hilft jemandem :)

31
Bojan Jovanovic

Ich habe mir gerade eine ähnliche Antwort angesehen - es kann mit einem Strich und der folgenden Überschreibung durchgeführt werden:

@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {

Paint strokePaint = new Paint();
strokePaint.setARGB(255, 0, 0, 0);
strokePaint.setTextAlign(Paint.Align.CENTER);
strokePaint.setTextSize(16);
strokePaint.setTypeface(Typeface.DEFAULT_BOLD);
strokePaint.setStyle(Paint.Style.STROKE);
strokePaint.setStrokeWidth(2);

Paint textPaint = new Paint();
textPaint.setARGB(255, 255, 255, 255);
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setTextSize(16);
textPaint.setTypeface(Typeface.DEFAULT_BOLD);

canvas.drawText("Some Text", 100, 100, strokePaint);
canvas.drawText("Some Text", 100, 100, textPaint);

super.draw(canvas, mapView, shadow); 
}
14
sdtechcomm

Die einfachste Lösung, die ich gefunden habe (und die tatsächlich funktioniert):

<TextView
    ...
    Android:background="@Android:drawable/editbox_background" />
12
Protean

Sie können den Rahmen auf zwei Arten festlegen. Einer ist durch Zeichenbar und der zweite ist programmatisch.

Drawable verwenden

<shape>
    <solid Android:color="@color/txt_white"/>
    <stroke Android:width="1dip" Android:color="@color/border_gray"/>
    <corners Android:bottomLeftRadius="10dp"
             Android:bottomRightRadius="0dp"
             Android:topLeftRadius="10dp"
             Android:topRightRadius="0dp"/>
    <padding Android:bottom="0dip"
             Android:left="0dip"
             Android:right="0dip"
             Android:top="0dip"/>
</shape>

Programmatisch


public static GradientDrawable backgroundWithoutBorder(int color) {

    GradientDrawable gdDefault = new GradientDrawable();
    gdDefault.setColor(color);
    gdDefault.setCornerRadii(new float[] { radius, radius, 0, 0, 0, 0,
                                           radius, radius });
    return gdDefault;
}
12
Maulik Santoki

Ich habe einen besseren Weg gefunden, um eine Textansicht mit einem Rahmen zu versehen.

Verwenden Sie ein Neun-Patch-Bild für den Hintergrund. Es ist ziemlich einfach, das SDK wird mit einem Tool geliefert, mit dem das 9-Patch-Image erstellt werden kann, und es wird absolut keine Codierung benötigt.

Der Link ist http://developer.Android.com/guide/topics/graphics/2d-graphics.html#nine-patch .

11
Nick

Sie können so etwas in Ihren Code einfügen:

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:shape="rectangle" >
    <solid Android:color="#ffffff" />
    <stroke Android:width="1dip" Android:color="#4fa5d5"/>
</shape>
11
newbie

Überprüfen Sie den Link unten, um abgerundete Ecken zu erstellen http://androidcookbook.com/Recipe.seam?recipeId=2318

Der zeichnbare Ordner unter res in einem Android-Projekt ist nicht auf Bitmaps (PNG- oder JPG-Dateien) beschränkt, sondern kann auch in XML-Dateien definierte Formen enthalten.

Diese Formen können dann im Projekt wiederverwendet werden. Eine Form kann verwendet werden, um einen Rahmen um ein Layout zu legen. Dieses Beispiel zeigt einen rechteckigen Rand mit gekrümmten Ecken. Eine neue Datei mit dem Namen customborder.xml wird im Zeichenordner erstellt (in Eclipse verwenden Sie das Menü Datei und wählen Sie Neu und dann Datei, wobei der Typ des Zeichenordners im Dateinamen ausgewählt ist und Sie auf Fertig stellen klicken).

Das XML, das die Rahmenform definiert, wird eingegeben:

<?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <corners Android:radius="20dp"/>
    <padding Android:left="10dp" Android:right="10dp" Android:top="10dp" Android:bottom="10dp"/>
    <solid Android:color="#CCCCCC"/>
</shape>

Das Attribut Android:shape ist auf "Rechteck" gesetzt (Formdateien unterstützen auch Oval, Linie und Ring). Der Standardwert ist "Rechteck", daher kann dieses Attribut weggelassen werden, wenn es sich um ein zu definierendes Rechteck handelt. Ausführliche Informationen zu einer Formdatei finden Sie in der Android Dokumentation zu Formen unter http://developer.Android.com/guide/topics/resources/drawable-resource.html#Shape .

Mit den Elementecken werden die abgerundeten Rechteckecken festgelegt. Es ist möglich, an jeder Ecke einen anderen Radius einzustellen (siehe die Referenz Android).

Mit den Auffüllattributen wird der Inhalt der Ansicht, auf die die Form angewendet wird, verschoben, um zu verhindern, dass sich der Inhalt mit dem Rand überschneidet.

Die Rahmenfarbe ist hier auf hellgrau eingestellt (hexadezimaler RGB-Wert).

Formen unterstützen auch Verläufe, aber das wird hier nicht verwendet. Weitere Informationen zum Definieren eines Verlaufs finden Sie in den Ressourcen Android. Die Form wird mit Android:background="@drawable/customborder" auf das Laypout angewendet.

Innerhalb des Layouts können wie gewohnt weitere Ansichten hinzugefügt werden. In diesem Beispiel wurde eine einzelne TextView hinzugefügt, und der Text ist weiß (FFFFFF hexadezimales RGB). Der Hintergrund ist auf Blau eingestellt, plus etwas Transparenz, um die Helligkeit zu verringern (hexadezimaler Alpha-RGB-Wert A00000FF). Schließlich wird das Layout vom Bildschirmrand versetzt, indem es in ein anderes Layout mit geringem Abstand eingefügt wird. Die vollständige Layoutdatei lautet daher:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
              Android:orientation="vertical"
              Android:layout_width="fill_parent"
              Android:layout_height="fill_parent"
              Android:padding="5dp">
    <LinearLayout Android:orientation="vertical"
                  Android:layout_width="fill_parent"
                  Android:layout_height="fill_parent"
                  Android:background="@drawable/customborder">
        <TextView Android:layout_width="fill_parent"
                Android:layout_height="fill_parent"
                Android:text="Text View"
                Android:textSize="20dp"
                Android:textColor="#FFFFFF"
                Android:gravity="center_horizontal"
                Android:background="#A00000FF" />
    </LinearLayout>
</LinearLayout>
10
Bahaa Hany

Ich habe eine Möglichkeit, es sehr einfach zu machen, und ich würde es gerne teilen.

Wenn ich mi TextViews quadrieren möchte, lege ich sie einfach in ein LinearLayout. Ich stelle die Hintergrundfarbe meines LinearLayouts ein und füge meiner Textansicht einen Rand hinzu. Das Ergebnis ist genau so, als würden Sie die Textansicht quadrieren.

7
Roman Panaget

Ändern Konstantin Burov Antwort, weil in meinem Fall nicht funktionieren:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="@Android:color/white" />
            <stroke Android:width="2dip" Android:color="#4fa5d5"/>
            <corners Android:radius="7dp"/>
        </shape>
    </item>
</selector>

compileSdkVersion 26 (Android 8.0), minSdkVersion 21 (Android 5.0), targetSdkVersion 26, Implementierung 'com.Android.support:appcompat-v7:26.1.0', Gradle: 4.1

1
Ejrr1085

Hier ist meine 'einfache' Hilfsklasse, die eine ImageView mit dem Rand zurückgibt. Legen Sie dies einfach in Ihrem utils-Ordner ab und nennen Sie es wie folgt:

ImageView selectionBorder = BorderDrawer.generateBorderImageView(context, borderWidth, borderHeight, thickness, Color.Blue);

Hier ist der Code.

/**
 * Because creating a border is Rocket Science in Android.
 */
public class BorderDrawer
{
    public static ImageView generateBorderImageView(Context context, int borderWidth, int borderHeight, int borderThickness, int color)
    {
        ImageView mask = new ImageView(context);

        // Create the square to serve as the mask
        Bitmap squareMask = Bitmap.createBitmap(borderWidth - (borderThickness*2), borderHeight - (borderThickness*2), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(squareMask);

        Paint paint = new Paint();
        Paint.setStyle(Paint.Style.FILL);
        Paint.setColor(color);
        canvas.drawRect(0.0f, 0.0f, (float)borderWidth, (float)borderHeight, Paint);

        // Create the darkness bitmap
        Bitmap solidColor = Bitmap.createBitmap(borderWidth, borderHeight, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(solidColor);

        Paint.setStyle(Paint.Style.FILL);
        Paint.setColor(color);
        canvas.drawRect(0.0f, 0.0f, borderWidth, borderHeight, Paint);

        // Create the masked version of the darknessView
        Bitmap borderBitmap = Bitmap.createBitmap(borderWidth, borderHeight, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(borderBitmap);

        Paint clearPaint = new Paint();
        clearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

        canvas.drawBitmap(solidColor, 0, 0, null);
        canvas.drawBitmap(squareMask, borderThickness, borderThickness, clearPaint);

        clearPaint.setXfermode(null);

        ImageView borderView = new ImageView(context);
        borderView.setImageBitmap(borderBitmap);

        return borderView;
    }
}
1
Aggressor

Erstellen Sie eine Rahmenansicht mit der Hintergrundfarbe als Farbe des Rahmens und der Größe Ihrer Textansicht. Legen Sie den Randansichtsabstand als Randbreite fest. Legen Sie die Hintergrundfarbe der Textansicht als die gewünschte Farbe für die Textansicht fest. Fügen Sie nun Ihre Textansicht in die Rahmenansicht ein.

0
praveen agrawal

Es gibt viele Möglichkeiten, einer Textansicht einen Rahmen hinzuzufügen. Am einfachsten ist es, eine benutzerdefinierte Zeichenfunktion zu erstellen und sie als Android:background="@drawable/textview_bg" für Ihre Textansicht festzulegen.

Die textview_bg.xml wird unter Drawables abgelegt und kann ungefähr so ​​aussehen. Sie können einen solid oder einen gradient Hintergrund haben (oder nichts, wenn nicht erforderlich), corners, um einen Eckenradius hinzuzufügen, und stroke, um einen Rand hinzuzufügen.

textview_bg.xml

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

        <corners
            Android:radius="@dimen/dp_10"/>

        <gradient
            Android:angle="225"
            Android:endColor="#FFFFFF"
            Android:startColor="#E0E0E0" />

        <stroke
            Android:width="2dp"
            Android:color="#000000"/>

    </shape>
0

Versuche dies:

<shape>
    <solid Android:color="@color/txt_white"/>
    <stroke Android:width="1dip" Android:color="@color/border_black"/>
</shape>
0
mohamad sheikhi

Dies kann Ihnen helfen.

<RelativeLayout
    Android:id="@+id/textbox"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_centerHorizontal="true"
    Android:layout_centerVertical="true"
    Android:background="@Android:color/darker_gray" >

    <TextView
        Android:id="@+id/text"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerHorizontal="true"
        Android:layout_centerVertical="true"
        Android:layout_margin="3dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="@string/app_name"
        Android:textSize="20dp" />

</RelativeLayout
0
Mete