代码之家  ›  专栏  ›  技术社区  ›  yamspog

如何在Android文本视图周围放置边框?

  •  652
  • yamspog  · 技术社区  · 16 年前

    是否可以在文本视图周围绘制边框?

    17 回复  |  直到 7 年前
        1
  •  1159
  •   Konstantin Burov    9 年前

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

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

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

        2
  •  156
  •   Community Mohan Dere    9 年前

    让我总结几个不同的(非编程的)方法。

    使用可拉伸的形状

    将以下内容保存为可绘制文件夹中的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
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/my_border" />
    

    更多帮助:

    使用9补丁

    9片是一个可伸缩的背景图像。如果使用边框制作图像,则它将为文本视图提供边框。你所需要做的就是制作图像,然后将其设置为文本视图中的背景。

    <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。这允许显示第一个(下)矩形,从而产生边框效果。您可以将此应用于文本视图背景,方法与 shape 上面已经画好了。

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

    使用9补丁

    你只需要用一个边框制作一个9片图像。其他都和上面讨论的一样。

    使用视图

    这是一种技巧,但如果您需要在两个视图之间添加分隔符或在一个文本视图中添加边框,它会很好地工作。

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

    以下是更多链接:

        3
  •  46
  •   Peter Mortensen Pieter Jan Bonestroo    9 年前

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

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

        4
  •  30
  •   Bojan Jovanovic    13 年前

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

    希望这能帮助别人:)

        5
  •  13
  •   Marc Bernstein    15 年前

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

    @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); 
    }
    
        6
  •  11
  •   Peter Mortensen Pieter Jan Bonestroo    9 年前

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

    使用可拉伸的

    <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;
    }
    
        7
  •  10
  •   Peter Mortensen Pieter Jan Bonestroo    9 年前

    我找到了一种更好的方法来在文本视图周围加上边框。

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

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

        8
  •  10
  •   Peter Mortensen Pieter Jan Bonestroo    9 年前

    您可以在代码中添加类似的内容:

    <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>
    
        9
  •  9
  •   Peter Mortensen Pieter Jan Bonestroo    9 年前

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

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

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

    输入定义边框形状的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 设置为矩形(形状文件还支持椭圆、直线和环形)。矩形是默认值,因此如果定义的是矩形,则可以忽略此属性。有关形状的Android文档,请参阅 http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape 有关形状文件的详细信息。

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

    填充属性用于移动应用形状的视图的内容,以防止内容与 边界。

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

    形状也支持渐变,但这里不使用。同样,请参阅android资源以了解如何定义渐变。该形状应用于laypout,使用 android:background="@drawable/customborder" .

    在布局中,其他视图可以正常添加。在本例中,添加了一个单独的文本视图,文本为白色(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>
    
        10
  •  7
  •   Protean    8 年前

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

    <TextView
        ...
        android:background="@android:drawable/editbox_background" />
    
        11
  •  7
  •   Roman Panaget    7 年前

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

    当我想平方米文本视图时,我只是把它们放在一个线性布局中。我设置了线性布局的背景色,并在文本视图中添加了一个边距。结果就像是对了textView。

        12
  •  1
  •   Peter Mortensen Pieter Jan Bonestroo    9 年前

    这是我的“Simple”助手类,它返回带有边框的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;
        }
    }
    
        13
  •  1
  •   Ejrr1085    8 年前

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

    编译dkversion 26(android 8.0) Minsdk21版(Android 5.0) 目标版本26, 实现'com.android.support:appcompat-v7:26.1.0', 年级:4.1

        14
  •  0
  •   Mete    12 年前

    这可能对你有帮助。

    <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
    
        15
  •  0
  •   praveen agrawal    8 年前

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

        16
  •  0
  •   mohamad sheikhi    7 年前

    试试这个:

    <shape>
        <solid android:color="@color/txt_white"/>
        <stroke android:width="1dip" android:color="@color/border_black"/>
    </shape>
    
        17
  •  -1
  •   Peter Mortensen Pieter Jan Bonestroo    9 年前

    其实很简单。如果您想要在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"/>
    
    推荐文章