412 votos

¿Existe una manera fácil de añadir un borde en la parte superior e inferior de una vista de Android?

Tengo un TextView y me gustaría añadir un borde negro a lo largo de sus bordes superior e inferior. He intentado añadir android:drawableTop y android:drawableBottom a la TextView, pero eso sólo hizo que toda la vista se volviera negra.

<TextView
    android:background="@android:color/green"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawableTop="@android:color/black"
    android:drawableBottom="@android:color/black"
    android:text="la la la" />

¿Existe una forma de añadir fácilmente un borde superior e inferior a una vista (en particular, a una TextView) en Android?

432voto

Emile Puntos 4660

En Android 2.2 puedes hacer lo siguiente.

Crear un dibujable xml como /res/drawable/textlines.xml y asignarlo como propiedad de fondo de un TextView.

<TextView
android:text="My text with lines above and below"
android:background="@drawable/textlines"
/>

/res/drawable/textlines.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FF000000" />
            <solid android:color="#FFDDDDDD" />

        </shape>
   </item>

   <item android:top="1dp" android:bottom="1dp"> 
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FFDDDDDD" />
            <solid android:color="#00000000" />
        </shape>
   </item>

</layer-list>

El lado negativo de esto es que tienes que especificar un color de fondo opaco, ya que las transparencias no funcionarán. (Al menos yo creía que sí, pero me equivoqué). En el ejemplo anterior se puede ver que el color sólido de la primera forma #FFdddd se copia en el color del trazo de la segunda forma.

281voto

user1051892 Puntos 1264

He utilizado un truco para que el borde se muestre fuera del contenedor. Con este truco sólo se dibuja una línea para que se muestre el fondo de la vista subyacente.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle" >
            <stroke
                android:width="1dp"
                android:color="#FF000000" />

            <solid android:color="#00FFFFFF" />

            <padding android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</layer-list>

98voto

Timmmm Puntos 9909

Opción 1: Forma Dibujable

Esta es la opción más sencilla si desea un borde alrededor de un diseño o vista en el que pueda establecer el fondo. Cree un archivo XML en el directorio drawable carpeta que se parece a esto:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#8fff93" />

    <stroke
        android:width="1px"
        android:color="#000" />

</shape>

Puede eliminar el solid si no quieres un relleno. El conjunto background="@drawable/your_shape_drawable" en su diseño/vista.

Opción 2: Vista de fondo

Este es un pequeño truco que he utilizado en un RelativeLayout . Básicamente, tienes un cuadrado negro debajo de la vista a la que quieres dar un borde, y luego le das a esa vista algo de relleno (¡no margen!) para que el cuadrado negro se vea a través de los bordes.

Obviamente, esto sólo funciona correctamente si la vista no tiene áreas transparentes. Si las tiene, te recomiendo que escribas un BorderView que sólo dibuja el borde - debería ser sólo unas pocas docenas de líneas de código.

<View
    android:id="@+id/border"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/image"
    android:layout_alignLeft="@+id/image"
    android:layout_alignRight="@+id/image"
    android:layout_alignTop="@+id/main_image"
    android:background="#000" />

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_...
    android:padding="1px"
    android:src="@drawable/..." />

Si te lo estás preguntando, es hace trabajar con adjustViewBounds=true . Sin embargo, no funciona si quieres tener un fondo en un RelativeLayout porque hay un error que impide llenar un RelativeLayout con un View . En ese caso recomendaría el Shape dibujable.

Opción 3: 9 parches

Una última opción es utilizar un dibujable de 9 parches como éste:



Puede utilizarlo en cualquier vista en la que pueda establecer android:background="@drawable/..." . Y sí, tiene que ser de 6x6, yo probé con 5x5 y no funcionó.

La desventaja de este método es que no puedes cambiar los colores muy fácilmente, pero si quieres bordes extravagantes (por ejemplo, sólo un borde en la parte superior e inferior, como en esta pregunta) entonces no podrás hacerlo con el método Shape dibujable, que no es muy potente.

Opción 4: Vistas adicionales

Se me olvidó mencionar esta opción realmente sencilla si sólo quieres bordes por encima y por debajo de tu vista. Usted puede poner su vista en una vertical LinearLayout (si no lo está ya) y luego añadir un View s por encima y por debajo, así:

<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>

35voto

phreakhead Puntos 2265

Así que quería hacer algo ligeramente diferente: un borde en la parte inferior SOLO, para simular un divisor ListView. Modifiqué la respuesta de Piet Delport y obtuve esto:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item>
      <shape 
        android:shape="rectangle">
            <solid android:color="@color/background_trans_light" />    

        </shape>
   </item>

    <!-- this mess is what we have to do to get a bottom border only. -->
   <item android:top="-2dp"
         android:left="-2dp"
         android:right="-2dp"
         android:bottom="1px"> 
      <shape 
        android:shape="rectangle">    
            <stroke android:width="1dp" android:color="@color/background_trans_mid" />
            <solid android:color="@null" />
        </shape>
   </item>

</layer-list>

Tenga en cuenta el uso de px en lugar de dp para obtener exactamente un divisor de píxeles (algunos DPI del teléfono harán desaparecer una línea de 1dp).

7voto

okaram Puntos 51

También puede envolver la vista en un FrameLayout, y luego establecer el color de fondo del marco y el relleno que desee; sin embargo, el textview, por defecto tiene un fondo "transparente", por lo que tendría que cambiar el color de fondo del textview también.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X