Comment insérer une bordure autour d'un textview Android?
Est-il possible de tracer une bordure autour d'une vue de texte?
Vous pouvez définir une forme dessinable (un rectangle) comme arrière-plan de la vue.
<TextView Android:text="Some text" Android:background="@drawable/back"/>
Et rectangle drawable back.xml (placé 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 unie 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
Permettez-moi de résumer quelques méthodes différentes (non programmatiques).
Utiliser 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, définissez-le comme 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:
- Forme Drawable (Documents Android)
- Trucs et astuces pour les développeurs Android: XML Drawables (Part I)
Utiliser 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 à votre TextView une bordure. Tout ce que vous avez à faire est de créer l'image, puis de la définir 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 créer une image de 9 correctifs:
- Draw 9-patch
- Générateur Simple à Neuf Patchs
- n guide simple pour 9-patch pour Android UI
- Création et utilisation d'images 9 correctifs sous Android
Et si je veux juste la bordure supérieure?
Utiliser une liste de couches
Vous pouvez utiliser une liste de calques pour empiler deux rectangles l'un sur l'autre. En rendant le deuxième rectangle un peu plus petit que le premier, 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>
Le réglage de Android:top="2dp" décale le haut (le rend plus petit) de 2dp. Cela permet au premier rectangle (inférieur) de s’exprimer, donnant un effet de bordure. Vous pouvez l'appliquer à l'arrière-plan TextView de la même manière que la shape dessinable a été effectuée ci-dessus.
Voici quelques liens supplémentaires sur les listes de couches:
- Comprendre la <liste de couches> d'Android
- Comment faire une bordure inférieure dans un sélecteur XML de forme dessinable?
- Créer des bordures sur une vue Android en xml dessinable, sur 3 côtés?
Utilisation d'un 9-patch
Vous pouvez simplement créer une image de 9 patchs 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 devez 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 quelques liens supplémentaires:
Le moyen le plus 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 autres limites de direction, veuillez ajuster l’emplacement de la vue séparateur.
J'ai résolu ce problème en étendant la vue texte et en traçant une bordure manuellement. J'ai même ajouté pour que vous puissiez choisir si une bordure est en pointillé 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 ça aide quelqu'un :)
Je cherchais simplement une réponse similaire - cela peut être fait avec un trait 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);
}
La solution la plus simple que j'ai trouvée (et qui fonctionne réellement):
<TextView
...
Android:background="@Android:drawable/editbox_background" />
Vous pouvez définir la bordure de deux manières. On est en dessinable et le second est programmatique.
Utiliser 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;
}
J'ai trouvé un meilleur moyen de placer une bordure autour d'un TextView.
Utilisez une image de neuf patchs pour l’arrière-plan. C'est assez simple, le SDK est livré avec un outil pour créer une image de 9 correctifs, et il implique absolument pas de codage .
Le lien est http://developer.Android.com/guide/topics/graphics/2d-graphics.html#nine-patch .
Vous pouvez ajouter quelque chose comme ceci 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>
Vérifiez le lien ci-dessous pour créer des angles arrondis http://androidcookbook.com/Recipe.seam?recipeId=2318
Le dossier pouvant être dessiné, 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 placer 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 pouvant être dessiné (sous Eclipse, utilisez le menu Fichier et sélectionnez Nouveau puis Fichier, le type de dossier pouvant être dessiné sélectionné dans le nom du fichier et cliquez sur Terminer).
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 étant la valeur par défaut, cet attribut peut être omis s'il s'agit d'un rectangle en cours de définition. Consultez la Android documentation sur les formes à l’adresse http://developer.Android.com/guide/topics/resources/drawable-resource.html#Shape pour obtenir 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 servent à déplacer le contenu de la vue à laquelle la forme est appliquée, afin d'éviter que le contenu ne chevauche la bordure.
La couleur de la bordure est définie sur un gris clair (valeur RVB hexadécimale).
Les formes prennent également en charge les dégradés, mais cela n’est pas utilisé ici. Encore une fois, voir les ressources Android pour voir comment un dégradé est défini. La forme est appliquée au laypout en utilisant Android:background="@drawable/customborder".
Dans la présentation, d'autres vues peuvent être ajoutées normalement. Dans cet exemple, un seul TextView a été ajouté et le texte est en blanc (FFFFFF hexadécimal RVB). L'arrière-plan est défini sur bleu, avec un peu de transparence pour réduire la luminosité (valeur alpha-hexadécimale alpha 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 un peu de remplissage. Le fichier de mise en page complet est donc:
<?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>
J'ai un moyen de le faire très simplement et j'aimerais le partager.
Quand je veux utiliser mes TextViews, je les mets simplement dans un LinearLayout. Je règle la couleur d'arrière-plan de LinearLayout et j'ajoute une marge à TextView. Le résultat est exactement comme si vous mettiez le TextView au carré.
Changer la réponse de Konstantin Burov parce que cela ne fonctionne pas dans mon cas:
<?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, implémentation 'com.Android.support:appcompat-v7:26.1.0', classement: 4.1
Voici ma classe d'assistance 'simple' qui retourne un ImageView avec la bordure. Déposez ceci dans votre dossier utils, et appelez-le comme ceci:
ImageView selectionBorder = BorderDrawer.generateBorderImageView(context, borderWidth, borderHeight, thickness, Color.Blue);
Voici le 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;
}
}
Créez une vue de bordure avec la couleur d'arrière-plan comme couleur de la bordure et la taille de votre vue texte. définissez le remplissage de la vue de la bordure comme largeur de la bordure. Définissez la couleur d'arrière-plan de la vue de texte comme couleur souhaitée pour la vue de texte. Ajoutez maintenant votre vue texte à l’intérieur de la vue bordure.
Il y a beaucoup de façons d'ajouter une bordure à un textView. Le plus simple consiste à créer un dessin personnalisable et à le définir comme Android:background="@drawable/textview_bg" pour votre textView.
Le textview_bg.xml ira sous Drawables et peut être quelque chose comme ceci. Vous pouvez avoir un arrière-plan solid ou gradient (ou rien si cela n'est pas nécessaire), corners pour ajouter un rayon de coin et stroke pour ajouter une bordure.
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>
Essaye ça:
<shape>
<solid Android:color="@color/txt_white"/>
<stroke Android:width="1dip" Android:color="@color/border_black"/>
</shape>
Cela peut vous aider.
<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