首页 文章

如何在Android文本视图周围添加边框?

提问于
浏览
633

是否可以在textview周围绘制边框?

16 回答

  • 151

    简单的方法是为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>
    

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

  • 0

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

  • 13

    改变康斯坦丁·布洛夫的答案,因为在我的情况下不起作用:

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

  • 1131

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

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

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

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

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

    <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

  • 47

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

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

    我通过扩展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;
        }
    }
    

    希望这有助于某人:)

  • 10

    让我总结一些不同的(非程序化)方法 .

    使用可绘制的形状

    将以下内容保存为drawable文件夹中的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补丁图像:

    如果我只想要顶部边框怎么办?

    Using a layer-list

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

    <?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 . 这允许第一个(下部)矩形显示,给出边框效果 . 您可以像上面的 shape drawable一样将它应用于TextView背景 .

    以下是有关图层列表的更多链接:

    Using a 9-patch

    您可以使用单个边框制作9个补丁图像 . 其他一切与上面讨论的相同 .

    Using a View

    这是一种技巧,但如果你需要在两个视图之间添加一个分隔符或者在一个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>
    

    这里有一些更多的链接:

  • 9

    我找到了一种更好的方法来围绕TextView设置边框 .

    使用九个补丁图像作为背景 . 它非常简单,SDK附带了一个制作9补丁图像的工具,它完全涉及 no 编码 .

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

  • 8

    我有办法很简单,我想分享它 .

    当我想对mi TextViews进行平方时,我只是将它们放在LinearLayout中 . 我设置了LinearLayout的背景颜色,并在TextView中添加了填充 . 结果就像你对TextView进行平方 .

  • 5

    实际上,它非常简单 . 如果你想在Textview后面有一个简单的黑色矩形,只需在TextView标签中添加 android:background="@android:color/black" 即可 . 像这样:

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

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

    Android项目中res下的drawable文件夹不限于位图(PNG或JPG文件),但它也可以包含XML文件中定义的形状 .

    然后可以在项目中重用这些形状 . 形状可用于在布局周围放置边框 . 此示例显示带有弯角的矩形边框 . 在drawable文件夹中创建一个名为customborder.xml的新文件(在Eclipse中使用File菜单并选择New then 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是默认值,因此如果它是一个定义的矩形,则可以省略该属性 . 请参阅有关形状的Android文档http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape有关形状文件的详细信息 .

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

    填充属性用于移动应用了形状的视图的内容,以防止内容与边框重叠 .

    此处的边框颜色设置为浅灰色(CCCCCC十六进制RGB值) .

    形状也支持渐变,但这里没有使用 . 再次,请参阅Android资源以查看如何定义渐变 . 使用 android:background="@drawable/customborder" 将形状应用于laypout .

    在布局中,可以正常添加其他视图 . 在此示例中,添加了单个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>
    
  • -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;
        }
    }
    
  • 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
    
  • 6

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

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

相关问题