412 votos

¿Hay una manera fácil de agregar un borde a la parte superior e inferior de un Vista Android?

Tengo un TextView y me gustaría añadir un borde negro a lo largo de sus fronteras superior e inferior. He intentado añadir android:drawableTop y android:drawableBottom al TextView, pero que sólo causó todo el fin de convertirse en negro.

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

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

432voto

Emile Puntos 4660

En android 2.2 se podría hacer lo siguiente.

Crear un xml dibujable como /res/drawable/textlines.xml y asignar a este como un TextView del fondo de la propiedad.

<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 usted tiene que especificar un fondo opaco de color, las transparencias no funciona. (Al menos yo pensaba, pero me equivoqué). En el ejemplo anterior se puede ver que el color sólido de la primera forma #FFdddddd es copiado en la 2ª formas de trazo de color.

281voto

user1051892 Puntos 1264

He usado un truco para que se muestre la frontera exterior del contenedor. Con este truco sólo se dibuja una línea por lo que el fondo se mostrará 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 usted desea un borde alrededor de un diseño o vista en la que puede configurar el fondo. Crear un archivo XML en el drawable carpeta que se ve algo como 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>

Usted puede quitar el solid si no quieres que un relleno. El conjunto background="@drawable/your_shape_drawable" de su presentación/vista.

Opción 2: Visión De Fondo

He aquí un pequeño truco que he usado en un RelativeLayout. Básicamente, usted tiene un cuadrado negro en la vista que desea dar una frontera, y luego le dan ese punto de vista algunos de relleno (que no de margen!) así el cuadrado negro muestra a través de los bordes.

Obviamente, esto sólo funciona correctamente si la vista no tiene zonas transparentes. Si no te recomendaría escribir una costumbre BorderView que sólo dibuja la frontera - debería ser tan sólo un par de 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 estás preguntando, ¿ trabajar con adjustViewBounds=true. Sin embargo, no funciona si quieres tener un fondo en toda una RelativeLayout, porque hay un bug que detiene el llenado de un RelativeLayout con un View. En ese caso, me gustaría recomendar la Shape dibujable.

Opción 3: 9-patch

Una última opción es el uso de un 9-patch imagen como esta:

6hQyT.png

Se puede utilizar en cualquier vista en la que puede configurar android:background="@drawable/...". Y sí se hace necesario el 6x6 - traté de 5x5 y no funcionó.

La desventaja de este método es que no se puede cambiar los colores muy fácilmente, pero si quieres lujo fronteras (p. ej. sólo un borde en la parte superior y la parte inferior, como en esta pregunta) entonces no puede ser capaz de hacer con el Shape dibujable, que no es muy poderoso.

Opción 4: Extra vistas

Se me olvidó mencionar que esto realmente simple opción si sólo quieres fronteras por encima y por debajo de su punto de vista. Usted puede poner su vista en vertical LinearLayout (si no lo está ya) y, a continuación, añadir vacía Views por encima y por debajo de esta manera:

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

35voto

phreakhead Puntos 2265

Así que yo quería hacer algo un poco diferente: un borde en la parte inferior solamente, para simular un divisor ListView. He modificado la respuesta de Piet Delport y conseguí 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>
 

Nota usando píxeles en lugar de dp para obtener exactamente 1 divisor de pixel (algunos teléfonos DPI hará una línea 1DP desaparecer).

7voto

okaram Puntos 51

También puede ajustar la vista en un FrameLayout, a continuación, establecer el color de fondo del marco y el relleno a lo que quiere; Sin embargo, el TextView, por defecto tiene un fondo "transparente", por lo que había necesidad de 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