Comment puis-je placer une frontière autour d'un Android textview?
Est-il possible de dessiner une bordure autour d'un textview?
16 réponses
vous pouvez définir une forme dessinable (un rectangle) comme arrière-plan pour la vue.
<TextView android:text="Some text" android:background="@drawable/back"/>
et rectangle rabattable.xml (put in res / drawable folder):
<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 rembourrage pour séparer le texte de la frontière.
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).
utilisant une forme dessinable
enregistrez ce qui suit sous forme de fichier XML dans votre dossier de tirage (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>
il suffit alors de le Définir 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:
à l'Aide d'un 9-patch
un 9-patch est une image de fond extensible. Si vous faites une image avec une bordure, elle donnera une bordure à votre TextView. Tout ce que vous avez à faire est de créer l'image et 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 vous montrent comment faire 9-patch de l'image:
- Draw 9-patch
- Simple Neuf-patch Générateur
- Un guide simple pour 9-patch pour l'INTERFACE utilisateur Android
- création et utilisation d'images 9 correctifs dans Android
et si je veux juste la frontière du haut?
En utilisant une liste de calques
vous pouvez utiliser une liste de calques pour empiler deux rectangles l'un sur l'autre. En faisant le deuxième rectangle juste un peu plus petit que le premier rectangle, vous pouvez faire un effet de bordure. Le premier (en bas) rectangle est la couleur de bordure et le second est la couleur de fond.
<?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 (plus petit) par 2dp. Cela permet au premier rectangle (inférieur) d'afficher à travers, donnant un effet de bordure. Vous pouvez appliquer ceci au fond TextView de la même manière que le shape a été fait ci-dessus.
Voici d'autres liens à propos des listes de calques:
- Compréhension Android
- comment faire le bord inférieur dans le sélecteur XML de forme étirable?
- créer des frontières sur un vue android en xml, sur 3 côtés?
utilisant un 9-patch
vous pouvez simplement faire une image 9-patch avec une seule bordure. Tout le reste est le même que discuté ci-dessus.
utilisant une vue
c'est une sorte d'astuce, mais cela fonctionne bien si vous avez besoin d'ajouter un séparateur entre deux vues ou une bordure à une seule vue 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:
la façon simple est d'ajouter une vue pour votre TextView. Exemple pour la ligne du bas:
<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 séparateur.
j'ai résolu ce problème en étendant le textview et en dessinant une bordure manuellement. J'ai même ajouté pour que vous puissiez sélectionner si une frontière est pointillée ou pointillée.
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 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;
}
}
Espérons que cela aide quelqu'un :)
je regardais juste une réponse similaire-- cela peut être fait avec une course et la commande de surpassement suivante:
@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);
}
vous pouvez définir la frontière par deux méthodes. L'un est dessinable et le second est programmable.
En Utilisant Tirable
<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 frontière autour d'un TextView.
utilisez une image à neuf patchs pour l'arrière-plan. C'est assez simple, le SDK est livré avec un outil pour faire l'image 9-patch, et il implique absolument Non codage.
le lien est http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch .
vérifiez le lien ci-dessous pour faire des coins arrondis http://androidcookbook.com/Recipe.seam?recipeId=2318
le dossier à dessiner, sous res, dans un projet Android n'est pas limité aux fichiers bitmaps (PNG ou JPG), mais il peut aussi contenir des formes définies dans les 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 disposition. Cet exemple montre une bordure rectangulaire avec courbe coin. Un nouveau fichier appelé customborder.le xml est créé dans le dossier dessinable (dans Eclipse, utilisez le menu fichier et sélectionnez New then File, avec le dossier dessinable sélectionné, tapez le nom du fichier et cliquez 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 positionné sur un rectangle (les fichiers shape supportent également ovale, line et ring). Rectangle est la valeur par défaut, donc cet attribut pourrait être laissé de côté s'il est un rectangle défini. 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 shape.
l'élément coins indique les coins du rectangle à arrondir. Il est possible de définir un rayon différent sur chaque coin (voir la référence Android).
les attributs de remplissage sont utilisés pour déplacer le contenu de la vue à laquelle le la forme est appliquée, pour éviter le chevauchement du contenu frontière.
la couleur de bordure ici est définie à un gris clair (valeur cccccc hexadécimal RVB).
Les formes supportent également les gradients, mais cela n'est pas utilisé ici. Encore une fois, voir les ressources Android pour voir comment un gradient est défini. La forme est appliquée à la laypout en utilisant android:background="@drawable/customborder" .
dans la disposition, 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 RGB). Le fond est réglé sur bleu, plus un peu de transparence pour réduire la luminosité (a00000ff valeur alpha RVB hexadécimale). Enfin, la mise en page est décalée du 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 complète 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>
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>
j'ai une façon de le faire très simple, et j'aimerais la partager.
quand je veux mettre en place mes TextViews, je les mets juste dans une LinearLayout. J'ai mis la couleur de fond de mon LinearLayout, et j'ai ajouté un rembourrage à mon TextView. Le résultat est exactement comme si vous quadrillez le TextView.
la solution la plus simple que j'ai trouvée (et qui fonctionne réellement):
<TextView
...
android:background="@android:drawable/editbox_background" />
voici ma classe d'aide 'simple' qui retourne une vue D'image avec la bordure. Il suffit de le déposer dans votre dossier utils, et de l'appeler 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;
}
}
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
créez une vue de bordure avec la couleur d'arrière-plan comme la couleur de la bordure et la taille de votre vue de texte. set border vue rembourrage que la largeur de la bordure. Définissez la couleur du fond de la vue texte comme la couleur que vous voulez pour la vue texte. Maintenant, ajoutez votre vue texte à l'intérieur de la vue frontière.
réponse changeante de Konstantin Burov parce que pas de travail 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, la mise en œuvre", com.Android.support: appcompat-v7: 26.1.0', Grad: 4.1
en Fait, c'est très simple. Si vous voulez un simple rectangle noir derrière Textview, ajoutez simplement android:background="@android:color/black" dans les balises TextView. Comme ceci:
<TextView
android:textSize="15pt" android:textColor="#ffa7ff04"
android:layout_alignBottom="@+id/webView1"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="@android:color/black"/>