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


Answers:


1273

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

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

和矩形drawable back.xml(放入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>

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


83
如果我只想要顶部边框怎么办?
happyhardik 2012年

19
@whyoz他的方法为视图层次结构增加了不必要的复杂性。您将需要两个其他视图(布局容器和边框视图)才能使用他的方法。因此,如果您有许多视图需要添加边框,则视图树将变得难以管理。
康斯坦丁·布鲁夫

5
@whyoz仍然可以通过主题样式来应用此方法,而YongGu的方法不能以这种方式使用。
康斯坦丁·布鲁夫

12
对于顶部边框,请参阅此问题

7
您可以使用此工具http://shapes.softartstudio.com生成可绘制对象。
Arda Basoglu 2015年

186

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

使用可绘制形状

将以下内容另存为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 -->
    <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>

然后只需将其设置为TextView的背景即可:

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

更多帮助:

使用9补丁

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

<TextView
    android: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添加边框,则可以很好地工作。

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

这里有一些更多的链接:


24
哎呀,一个人border: 1px solid #999;不应该这么复杂。
Achshar

如果我想使用具有阴影和波纹效果的textview边框怎么办?
Akash Dubey

@AkashDubey,对不起,我之前没有做过。我建议您分别尝试每个,然后将它们合并。如果遇到问题,请在堆栈溢出问题上提出一个新问题。
Suragch

49

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

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

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


3
以我的经验,此解决方案在旧设备上对应用程序性能的影响很小。
罗伯托·伦巴第

43
从通货膨胀的角度来看,这是一个可怕的解决方案。您将创建3个新的视图元素,并在视图层次结构深度中再添加一个级别
philipp

菲利普说,最糟糕的解决方案是基于通胀观点。您是否知道textView仅具有特定的xml标记即可:定义要在TextView周围向左/向右/顶部/底部绘制的图片,因此它们被称为android:drawable ****
Mathias Seguy Android2ee

32

我已通过扩展textview并手动绘制边框解决了此问题。我什至添加了,因此您可以选择边框是虚线还是虚线。

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

和边界类:

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

希望这可以帮助某人:)


如何初始化边框?
zionpi

它无法正常工作,如代码所示,它以定义值的一半大小绘制边框
ucMedia

14

我只是在寻找类似的答案-可以通过Stroke和以下替代来完成:

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

大!我唯一关心的是,无论是在手机上还是在仿真器中,我都使用drawRoundRect时,笔触在角落时很难看。
erdomester 2012年

1
@erdomester也许Paint StrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG); 将解决“丑陋的角落”问题
P-RAD

14

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

使用可绘制

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

形状XML与textView有何关系?
Neo42

14

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

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

可以将其从一个地方应用于所有文本视图吗?
伊恩·沃伯顿

不错,适合作速成。但是,根据运行设备的版本,这会产生非常不同的效果。这是因为Google一直在改变EditTexts的外观(您必须保持时尚!)
Scott Biggs

11

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

将九个修补图像用作背景。这非常简单,SDK附带了一个用于制作9补丁图像的工具,并且绝对不需要任何编码。

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


2
有用,是的,但这会更好吗?
聚合

2
使用形状作为公认的答案说起来比9补丁更好,XML文件比图形资产更灵活
Jose_GD 2013年

当然,如果您希望限于以编程方式创建所需的图形,那么它会更加灵活。
尼克,

2
形状处理是没有用的。也许我是唯一一个经历过的人,无论是否设置为透明,标签“ solid”总是会被处理。如果我要创建BORDER,我的意思是说,BORDER而不是具有彩色内部边界线和其他彩色边界线的矩形。而且它永远不会是透明的固体。它总是干扰颜色。同样,从另一个继承的类也应该具有所有功能,因为它是继承的。真的无法理解,为什么基本的OO设计指南被android破坏了。例如,我继承自button。所有功能都消失了。为什么呢
icbytes 2014年

2
@Jeremie明显慢吗?您如何看待它?
IgorGanapolsky

11

您可以在代码中添加以下内容:

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

为什么需要中风?
IgorGanapolsky

@IgorGanapolsky,描边创建实际边框吗?
Tash Pemhiwa '16

10

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

Android项目中res下的drawable文件夹不仅限于位图(PNG或JPG文件),而且还可以保存XML文件中定义的形状。

这些形状然后可以在项目中重复使用。形状可用于在布局周围放置边框。此示例显示了带有弯曲拐角的矩形边框。在drawable文件夹中创建了一个名为customborder.xml的新文件(在Eclipse中,使用File菜单,然后依次选择New和File,在文件名中选择了drawable文件夹,然后单击Finish)。

输入定义边框形状的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参考)。

padding属性用于移动应用了形状的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>

不鼓励仅使用链接的答案,因为链接将来可能会在某些时候断开。将链接的相关部分拉入此答案,以便即使链接不可用,信息也仍然可用。
安迪

8

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

当我想平方mi TextViews时,我只是将它们放在LinearLayout中。我设置了LinearLayout的背景色,并向TextView添加了页边距。结果完全就像您将TextView平方。


2

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

compileSdkVersion 26(Android 8.0),minSdkVersion 21(Android 5.0),targetSdkVersion 26,实现'com.android.support:appcompat-v7:26.1.0',gradle:4.1


2

您可以为文本视图创建自定义背景。步骤1.转到您的项目。2.转到资源,然后右键单击以绘制。3.单击“新建”->“可绘制资源文件”。4.为文件命名。5.将以下代码粘贴到文件中

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="@color/colorBlack" />
<padding android:left="1dp"
    android:top="1dp"
    android:right="1dp"
    android:bottom="1dp" />
<corners android:radius="6dp" />
<solid android:color="#ffffffff" />

  1. 对于要用作背景的文本视图,

    android:background =“ @ drawable / your_fileName”


1

这是我的“简单”帮助程序类,该类返回带有边框的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 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;
    }
}

如何使用selectionBorder
Tash Pemhiwa '16

@TashPemhiwa Button.setBackgroundDrawable();
NinjaOnSafari

0

这可能对您有帮助。

<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

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



0

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

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

        <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
  <View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="@android:color/black" />

此代码足够您可以将其放置在任何位置


0

xml textview上的setBackground,

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

在textView背景中设置可绘制文件。


-1

实际上,这很简单。如果要在Textview后面有一个简单的黑色矩形,只需android:background="@android:color/black"在TextView标记内添加即可。像这样:

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

他要求边界不完整的背景。
盖伊
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.