Question Comment mettre une bordure autour d'un textview Android?


Est-il possible de dessiner une bordure autour d'un textview?


603
2017-08-16 18:50


origine


Réponses:


Vous pouvez définir une forme pouvant être dessinée (un rectangle) en arrière-plan pour la vue.

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

Et rectangle draw.xml (mettre dans le dossier res / drawable):

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

Vous pouvez utiliser @android:color/transparent pour que la couleur solide ait un fond transparent. Vous pouvez également utiliser un remplissage pour séparer le texte de la bordure. pour plus d'informations, voir: http://developer.android.com/guide/topics/resources/drawable-resource.html


1074
2017-08-16 18:56



Permettez-moi de résumer quelques méthodes différentes (non programmatiques).

Utilisation d'une forme dessinable

Enregistrez les éléments suivants en tant que fichier XML dans votre dossier pouvant être dessiné (par exemple, 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>

Ensuite, il suffit de le définir comme l'arrière-plan de votre TextView:

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

Plus d'aide:

En utilisant un patch 9

Un 9-patch est une image d'arrière-plan extensible. Si vous créez une image avec une bordure, cela donnera une bordure à votre TextView. Tout ce que vous avez à faire est de créer l'image, puis de la mettre en arrière-plan dans votre TextView.

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

Voici quelques liens qui montreront comment faire une image de 9 patchs:

Que faire si je veux juste la bordure supérieure?

Utiliser une liste de calques

Vous pouvez utiliser une liste de calques pour empiler deux rectangles l'un sur l'autre. En rendant le deuxième rectangle juste un peu plus petit que le premier rectangle, vous pouvez créer un effet de bordure. Le premier rectangle (inférieur) est la couleur de la bordure et le second rectangle est la couleur de l'arrière-plan.

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

Réglage android:top="2dp" Compense le haut (le rend plus petit) de 2dp. Cela permet au premier rectangle (inférieur) de s'afficher, donnant un effet de bordure. Vous pouvez appliquer ceci à l'arrière-plan TextView de la même manière que shape drawable a été fait ci-dessus.

Voici d'autres liens sur les listes de calques:

En utilisant un patch 9

Vous pouvez simplement créer une image de 9 pièces avec une seule bordure. Tout le reste est le même que discuté ci-dessus.

Utiliser une vue

C'est un peu une astuce, mais cela fonctionne bien si vous avez besoin d'ajouter un séparateur entre deux vues ou une bordure à un seul TextView.

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

Voici d'autres liens:


135
2018-04-04 10:02



Le moyen simple est d'ajouter une vue pour votre TextView. Exemple pour la ligne de bordure inférieure:

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

Pour les bordures de l'autre direction, veuillez ajuster l'emplacement de la vue du séparateur.


44
2017-11-22 01:59



J'ai résolu ce problème en étendant le textview et en dessinant une bordure manuellement. J'ai même ajouté que vous pouvez choisir si une bordure est en pointillés ou en pointillé.

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

Et la classe de frontière:

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

J'espère que cela aide quelqu'un :)


28
2017-07-17 20:25



Je regardais juste une réponse similaire, elle peut être faite avec un Stroke et le remplacement suivant:

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

11
2017-08-16 18:56



J'ai trouvé un meilleur moyen de mettre une bordure autour d'un TextView.

Utilisez une image de neuf pièces pour l'arrière-plan. C'est assez simple, le SDK est livré avec un outil pour faire l'image 9-patch, et cela implique absolument non codage.

Le lien est http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch.


9
2018-02-25 04:28



Vous pouvez définir la bordure par deux méthodes. L'un est tirable et le second est programmatique.

Utilisation de Drawable

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

Programmatique


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

9
2017-09-11 19:19



Vérifiez le lien ci-dessous pour faire des coins arrondis http://androidcookbook.com/Recipe.seam?recipeId=2318

Le dossier drawable, sous res, dans un projet Android n'est pas limité aux bitmaps (fichiers PNG ou JPG), mais il peut également contenir des formes définies dans des fichiers XML.

Ces formes peuvent ensuite être réutilisées dans le projet. Une forme peut être utilisée pour mettre une bordure autour d'une mise en page. Cet exemple montre une bordure rectangulaire avec des coins courbes. Un nouveau fichier appelé customborder.xml est créé dans le dossier drawable (dans Eclipse, utilisez le menu File et sélectionnez New puis File, avec le dossier drawable selected type dans le nom du fichier et cliquez sur Finish).

Le XML définissant la forme de la bordure est entré:

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

L'attribut android:shape est défini sur rectangle (les fichiers de forme prennent également en charge ovale, ligne et anneau). Rectangle est la valeur par défaut, donc cet attribut pourrait être omis s'il s'agit d'un rectangle en cours de définition. Voir la documentation Android sur les formes à http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape pour des informations détaillées sur un fichier de forme.

Les coins de l'élément définissent les coins du rectangle à arrondir. Il est possible de définir un rayon différent à chaque coin (voir la référence Android).

Les attributs de remplissage sont utilisés pour déplacer le contenu de la vue à laquelle la forme est appliquée afin d'éviter que le contenu ne chevauche le frontière.

La couleur de la bordure est ici définie en gris clair (valeur hexadécimale RVB).

Les formes prennent également en charge les dégradés, mais cela n'est pas utilisé ici. Encore une fois, consultez les ressources Android pour voir comment un dégradé est défini. La forme est appliquée à la laypologie en utilisant android:background="@drawable/customborder".

Dans la mise en page, d'autres vues peuvent être ajoutées comme d'habitude. Dans cet exemple, un seul TextView a été ajouté et le texte est blanc (FFFFFF hexadécimal RVB). L'arrière-plan est défini sur bleu, plus une certaine transparence pour réduire la luminosité (valeur hexadécimale alpha RVB A00000FF). Enfin, la mise en page est décalée par rapport au bord de l'écran en la plaçant dans une autre mise en page avec une petite quantité de rembourrage. Le fichier de mise en page complet est ainsi:

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

8
2018-04-06 18:13



Vous pouvez ajouter quelque chose comme ça dans votre code:

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

8
2018-05-13 04:39