如何在Android TextView周围放置边框?

是否有可能在AndroidTextView周围绘制边框?

886992 次浏览

您可以将可绘制的形状(矩形)设置为视图的背景。

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

和矩形可绘制back.xml(放入res/可绘制文件夹):

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

您可以使用@android:color/transparent作为纯色以获得透明背景。您还可以使用填充将文本与边框分开。更多信息请参见:http://developer.android.com/guide/topics/resources/drawable-resource.html

我只是在看一个类似的答案-它可以通过Stroke和以下覆盖来完成:

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

我找到了一种更好的方法来在TextView周围放置边框。

使用9个补丁图像作为背景。这很简单,SDK附带了一个制作9个补丁图像的工具,它绝对涉及编码。

链接是http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

简单的方法是为你的TextView添加一个视图。下边框线的示例:

<LinearLayout android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><TextViewandroid: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"/><Viewandroid:layout_width="fill_parent"android:layout_height="0.2dp"android:id="@+id/separator"android:visibility="visible"android:background="@android:color/darker_gray"/>
</LinearLayout>

对于其他方向边框,请调整分隔符视图的位置。

我通过扩展文本视图并手动绘制边框解决了这个问题。我甚至添加了,所以你可以选择是虚线还是虚线。

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);}@Overrideprotected 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);} elseif(border.getStyle() == BORDER_RIGHT){canvas.drawLine(getWidth(), 0, getWidth(), getHeight(), paint);} elseif(border.getStyle() == BORDER_BOTTOM){canvas.drawLine(0, getHeight(), getWidth(), getHeight(), paint);} elseif(border.getStyle() == BORDER_LEFT){canvas.drawLine(0, 0, 0, getHeight(), paint);}}}
public Border[] getBorders() {return borders;}
public void setBorders(Border[] borders) {this.borders = borders;}}

边界类:

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

希望能帮助到别人:)

检查下面的链接使圆角http://androidcookbook.com/Recipe.seam?recipeId=2318

Android项目中res下的可绘制文件夹不限于位图(PNG或JPG文件),但它也可以保存XML文件中定义的形状。

然后可以在项目中重复使用这些形状。形状可用于在布局周围放置边框。此示例显示了具有弯曲角落的矩形边框。在可绘制文件夹中创建了一个名为customborder.xml的新文件(在Eclipse中,使用文件菜单并选择新建然后文件,选择可绘制文件夹在文件名中键入并单击完成)。

输入定义边框形状的XML:

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

属性android:shape设置为矩形(形状文件也支持椭圆形、线条和环形)。Rectangle是默认值,因此如果定义的是矩形,则可以省略此属性。有关形状文件的详细信息,请参阅http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape中的Android形状留档。

元素角将矩形角设置为圆角。可以在每个角上设置不同的半径(请参阅Android参考)。

填充属性用于移动应用形状的View的内容,以防止内容重叠边境

这里的边框颜色设置为浅灰色(CCCCCC十六进制RGB值)。

形状也支持渐变,但这里没有使用。同样,请参阅Android资源以查看渐变是如何定义的。使用android:background="@drawable/customborder"将形状应用于布局。

在布局中可以正常添加其他视图。在此示例中,添加了单个TextView,文本为白色(FFFFFF十六进制RGB)。背景设置为蓝色,加上一些透明度以降低亮度(A00000FF十六进制alpha RGB值)。最后,通过将布局放置到具有少量填充的另一个布局中,布局与屏幕边缘偏移。完整的布局文件如下:

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

你可以在你的代码中添加这样的东西:

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

这可能对你有帮助。

<RelativeLayoutandroid: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" >
<TextViewandroid: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

实际上,这很简单。如果你想要一个简单的黑色矩形在TextView后面,只需在TextView标签中添加android:background="@android:color/black"。像这样:

<TextViewandroid:textSize="15pt" android:textColor="#ffa7ff04"android:layout_alignBottom="@+id/webView1"android:layout_alignParentRight="true"android:layout_alignParentEnd="true"android:background="@android:color/black"/>

让我总结一些不同的(非编程的)方法。

使用可绘制的形状

将以下内容另存为可绘制文件夹中的XML文件(例如,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 --><solidandroid:color="@color/background_color" ></solid>
<!-- View border color and width --><strokeandroid:width="1dp"android:color="@color/border_color" ></stroke>
<!-- The radius makes the corners rounded --><cornersandroid:radius="2dp"   ></corners>
</shape>

然后将其设置为TextView的背景:

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

更多帮助:

使用9补丁

9补丁是可拉伸的背景图像。如果您制作带有边框的图像,那么它将为您的TextView提供边框。您需要做的就是制作图像,然后将其设置为TextView中的背景。

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

以下是一些链接,将展示如何制作9补丁图像:

如果我只想要顶部边界呢?

使用层列表

您可以使用图层列表将两个矩形堆叠在一起。通过使第二个矩形比第一个矩形小一点,您可以制作边框效果。第一个(较低)矩形是边框颜色,第二个矩形是背景颜色。

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

设置android:top="2dp"将顶部偏移(使其更小)2dp。这允许第一个(较低)矩形显示通过,从而产生边框效果。您可以将其应用于TextView背景,就像上面的shape绘图一样。

这里有一些关于层列表的更多链接:

使用9补丁

您可以只制作一个带有单个边框的9补丁图像。其他一切都与上面讨论的相同。

使用视图

这是一种技巧,但如果您需要在两个视图之间添加隔离器或为单个TextView添加边框,它会很好地工作。

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" >
<TextViewandroid:id="@+id/textview1"android:layout_width="match_parent"android:layout_height="wrap_content" />
<!-- This adds a border between the TextViews --><Viewandroid:layout_width="match_parent"android:layout_height="2dp"android:background="@android:color/black" />
<TextViewandroid:id="@+id/textview2"android:layout_width="match_parent"android:layout_height="wrap_content" />
</LinearLayout>

这里有更多的链接:

我有一个非常简单的方法,我想分享一下。

当我想平方我的TextView时,我只是把它们放在LinearLayout中。我设置了LinearLayout的背景颜色,并为我的TextView添加了一个边距。结果就像你平方TextView一样。

这是我的“简单”助手类,它返回一个带有边框的ImageView。只需将其放入您的utils文件夹中,并像这样调用它:

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

这是代码。

/*** 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 maskBitmap 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 bitmapBitmap 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 darknessViewBitmap 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;}}

您可以通过两种方法设置边框。一种是通过可绘制的,第二种是程序化的。

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

方案


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

创建一个边框视图,其背景颜色为边框的颜色和文本视图的大小。将边框视图填充设置为边框的宽度。将文本视图背景颜色设置为文本视图所需的颜色。现在将文本视图添加到边框视图中。

我找到的最简单的解决方案(实际上有效):

<TextView...android:background="@android:drawable/editbox_background" />

更改Konstantin Burov答案,因为在我的情况下不起作用:

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

编译SdkVersion 26(Android 8.0),minSdkVersion 21(Android 5.0),目标系统版本26实现'com.android.support: appcompat-v7:26.1.0',速度:4.1

试试这个:

<shape><solid android:color="@color/txt_white"/><stroke android:width="1dip" android:color="@color/border_black"/></shape>

有很多方法可以将边框添加到文本视图。最简单的方法是创建一个自定义可绘制对象并将其设置为文本视图的android:background="@drawable/textview_bg"

textview_bg.xml将在Drawables下,可以是这样的。您可以有solidgradient背景(如果不需要,则不需要),corners添加角半径,stroke添加边框。

textview_bg.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<cornersandroid:radius="@dimen/dp_10"/>
<gradientandroid:angle="225"android:endColor="#FFFFFF"android:startColor="#E0E0E0" />
<strokeandroid:width="2dp"android:color="#000000"/>
</shape>

您可以为文本视图创建自定义背景。步骤

  1. 去你的项目。
  2. 转到资源并右键单击可绘制。
  3. 单击新建->可绘制资源文件
  4. 把名字给你档案
  5. 将以下代码粘贴到文件中
<shape xmlns:android="http://schemas.android.com/apk/res/android"><strokeandroid:width="1dp"android:color="@color/colorBlack" /><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="1dp" /><corners android:radius="6dp" /><solid android:color="#ffffffff" /></shape>
  1. 对于要将其用作背景的文本视图,

    android: background="@your_fileName"

  <Viewandroid:layout_width="match_parent"android:layout_height="2dp"android:background="@android:color/black" />

这个代码足够你放在任何你想要的地方

在xml文本视图上设置背景,

将rounded_textview.xml文件添加到可绘制的目录中。

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

在文本视图背景中设置可绘制文件。

使用材料组件库,您可以使用#0

    <TextViewandroid:id="@+id/textview".../>

然后您可以以编程方式应用MaterialShapeDrawable

    TextView textView = findViewById(R.id.textview);MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable();shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,android.R.color.transparent));shapeDrawable.setStroke(1.0f, ContextCompat.getColor(this,R.color....));ViewCompat.setBackground(textView,shapeDrawable);

在此处输入图片描述

您可以设置可绘制的形状(带角的矩形)作为视图的背景。

<TextView android:background="@drawable/frame"/>

和矩形可绘制frame.xml(放入res/可绘制文件夹):

<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><solid android:color="@android:color/white" /><stroke android:width="1dip"android:color="#3d4caf"/><corners android:radius="50dp"/></shape>