Pregunta ¿Cómo pongo un borde alrededor de una vista de texto de Android?


¿Es posible dibujar un borde alrededor de una vista de texto?


603
2017-08-16 18:50


origen


Respuestas:


Puede establecer una forma dibujable (un rectángulo) como fondo para la vista.

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

Y rectángulo drawable.xml (poner en la carpeta 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>

Puedes usar @android:color/transparent para que el color sólido tenga un fondo transparente. También puede usar el relleno para separar el texto del borde. Para más información, ver: http://developer.android.com/guide/topics/resources/drawable-resource.html


1074
2017-08-16 18:56



Permítanme resumir algunos métodos diferentes (no programáticos).

Usando una forma dibujable

Guarde lo siguiente como un archivo XML en su carpeta dibujable (por ejemplo, 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>

Entonces simplemente configúrelo como fondo de su TextView:

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

Más ayuda:

Usando un parche de 9

Un parche de 9 es una imagen de fondo estirable. Si crea una imagen con un borde, le dará a su TextView un borde. Todo lo que necesita hacer es crear la imagen y luego establecerla en segundo plano en su TextView.

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

Aquí hay algunos enlaces que mostrarán cómo hacer una imagen de 9 parches:

¿Qué pasa si solo quiero el borde superior?

Usando una lista de capas

Puede usar una lista de capas para apilar dos rectángulos uno encima del otro. Al hacer que el segundo rectángulo sea un poco más pequeño que el primer rectángulo, puede hacer un efecto de borde. El primer rectángulo (inferior) es el color del borde y el segundo rectángulo es el color de fondo.

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

Ajuste android:top="2dp" desplaza la parte superior (la hace más pequeña) por 2dp. Esto permite que el primer rectángulo (inferior) se muestre, dando un efecto de borde. Puede aplicar esto al fondo de TextView de la misma manera que shape dibujable fue hecho arriba.

Aquí hay algunos enlaces más sobre listas de capas:

Usando un parche de 9

Puede hacer una imagen de 9 parches con un solo borde. Todo lo demás es lo mismo que se discutió anteriormente.

Usando una vista

Esto es un truco, pero funciona bien si necesita agregar un separador entre dos vistas o un borde a un solo 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>

Aquí hay algunos más enlaces:


135
2018-04-04 10:02



La forma simple es agregar una vista para su TextView. Ejemplo para la línea del borde inferior:

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

Para los bordes de la otra dirección, ajuste la ubicación de la vista del separador.


44
2017-11-22 01:59



He resuelto este problema extendiendo la vista de texto y dibujando un borde de forma manual. Incluso agregué para que pueda seleccionar si un borde está punteado o discontinuo.

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

Y la clase de borde:

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

Espero que esto ayude a alguien :)


28
2017-07-17 20:25



Solo estaba viendo una respuesta similar: se puede hacer con un trazo y la siguiente anulación:

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

11
2017-08-16 18:56



Encontré una mejor manera de poner un borde alrededor de un TextView.

Use una imagen de nueve parches para el fondo. Es bastante simple, el SDK viene con una herramienta para hacer la imagen de 9 parches, e implica absolutamente no codificación.

El enlace es http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch.


9
2018-02-25 04:28



Puede establecer el borde por dos métodos. Uno es dibujable y el segundo es programático.

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

Programático


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

9
2017-09-11 19:19



Consulte el siguiente enlace para hacer esquinas redondeadas http://androidcookbook.com/Recipe.seam?recipeId=2318

La carpeta dibujable, bajo res, en un proyecto de Android no está restringida a bitmaps (archivos PNG o JPG), sino que también puede contener formas definidas en archivos XML.

Estas formas pueden ser reutilizadas en el proyecto. Una forma se puede usar para poner un borde alrededor de un diseño. Este ejemplo muestra un borde rectangular con esquinas curvas. Se crea un nuevo archivo llamado customborder.xml en la carpeta dibujable (en Eclipse use el menú Archivo y seleccione Nuevo luego Archivo, con la carpeta dibujable seleccionada escriba en el nombre del archivo y haga clic en Finalizar).

Se ingresa el XML que define la forma del borde:

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

El atributo android:shape se establece en rectángulo (los archivos de formas también admiten ovales, líneas y anillos). Rectángulo es el valor predeterminado, por lo que este atributo podría omitirse si se trata de un rectángulo definido. Consulte la documentación de Android sobre formas en http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape para obtener información detallada sobre un archivo de forma.

Las esquinas del elemento configuran las esquinas del rectángulo para que sean redondeadas. Es posible establecer un radio diferente en cada esquina (ver la referencia de Android).

Los atributos de relleno se utilizan para mover los contenidos de la Vista a la que se aplica la forma, para evitar que los contenidos se superpongan frontera.

El color del borde aquí se establece en un gris claro (valor RGB hexadecimal).

Las formas también admiten degradados, pero eso no se está utilizando aquí. Nuevamente, vea los recursos de Android para ver cómo se define un degradado. La forma se aplica a laypout usando android:background="@drawable/customborder".

Dentro del diseño, se pueden agregar otras vistas de forma normal. En este ejemplo, se ha agregado un solo TextView y el texto es blanco (FFFFFF hexadecimal RGB). El fondo se establece en azul, más cierta transparencia para reducir el brillo (A00000FF valor hexadecimal alfa RGB). Finalmente, el diseño se compensa con el borde de la pantalla colocándolo en otro diseño con una pequeña cantidad de relleno. El archivo de diseño completo es así:

<?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
2018-04-06 18:13



Puede agregar algo como esto en su código:

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

8
2018-05-13 04:39