2010-12-01 26 views
21

he configurar un LinearLayout con los siguientes antecedentes dibujable:XML Android esquinas redondeadas recortadas

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <corners android:radius="10dp" /> 
    <solid android:color="#CCFFFFFF"/> 
</shape> 

El problema que estoy teniendo es dentro del LinearLayout tengo otro elemento LinearLayout que se encuentra en la parte inferior de la misma de los padres . Como no tiene esquinas redondeadas, sus esquinas se extienden más allá de las esquinas inferiores izquierda y derecha de los padres.

El fondo estirable en la LinearLayout niño se ve así:

<?xml version="1.0" encoding="utf-8"?> 
<bitmap 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:src="@drawable/pedometer_stats_background" 
    android:tileMode="repeat" 
/> 

El tema es el siguiente: http://kttns.org/hn2zm en el dispositivo de la no saturación es más evidente.

¿Cuál es el mejor método para lograr el recorte?

+2

Supongo que se resolverá con el uso inteligente de relleno y márgenes – schwiz

Respuesta

6

Lo que sus sonidos que describen como esta:

<LinearLayout android:shape="rounded"> 
    <LinearLayout android:background="@drawable/pedometer_stats_background"> 
    </LinearLayout> 
</LinearLayout> 

y la distribución interior está empujando fuera de las esquinas redondeadas, ya que no se redondea. Tendrás que redondear las esquinas de tu mapa de bits. Si tiene un mapa de bits repetitivo, querrá ver la definición de un dibujo dibujable de nueve parches. Redondea las esquinas y luego define la parte del gráfico que se puede expandir.

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Sería bueno si pudiéramos añadir un mapa de bits para el dibujable forma y hemos que ser aplicado como una piel sobre cualquier forma estamos dibujo. Y, apuesto a que si sabes lo que estás haciendo, podrías crear una subclase Shape que dibuje un mapa de bits, pero eso no está incluido en Android de forma predeterminada.

+0

Gracias por esto, estaba tratando de escapar sin la configuración personalizada de los mapas de bits. No puedo creer que no puedas evitar que los niños sangren. – sgarman

+0

Bueno, puedes detenerlos, pero no está listo para usar. Con un poco de código e ingenio puedes crear algo que lo haga. – chubbsondubs

26

Necesitaba diseños redondeados de estilo iPhone, con un fondo gris detrás de ellos. (suspiro, siempre copiando el iPhone)

Estaba frustrado porque no pude encontrar una manera de enmascarar un diseño. La mayoría de las respuestas aquí dicen usar una imagen de fondo, pero esto no es lo que necesitaba.


Editar: respuesta anterior sugiere el uso de un FrameLayout y ajuste de la dibujable android:foreground. Esto introdujo un extraño relleno en la vista. He actualizado mi respuesta para usar la técnica más simple RelativeLayout.


El truco es usar un RelativeLayout; coloque su diseño dentro de él. Debajo de su diseño, agregue otro ImageView, estableciendo su background en un marco de imagen de enmascaramiento adecuado. Esto dibujará eso encima de tu otro diseño.

En mi caso, hice un archivo de 9Patch que era un fondo gris, con un rectángulo redondeado transparente cortado de él.

frame

Esto crea la máscara perfecta para su diseño subyacente.

código XML es abajo - este es un archivo de diseño XML normales:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_height="wrap_content" android:layout_width="fill_parent"> 

    <!-- this can be any layout that you want to mask --> 
    <LinearLayout android:id="@+id/mainLayout" 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" android:orientation="vertical" 
     android:background="@android:color/white"> 

     <TextView android:layout_height="wrap_content" 
      android:layout_width="wrap_content" android:layout_gravity="center" 
      android:text="Random text..." /> 

    </LinearLayout> 

    <!-- FRAME TO MASK UNDERLYING VIEW --> 
    <ImageView android:layout_height="fill_parent" 
     android:layout_width="fill_parent" 
     android:background="@drawable/grey_frame" 
     android:layout_alignTop="@+id/mainLayout" 
     android:layout_alignBottom="@+id/mainLayout" /> 

</RelativeLayout> 

Nota del ImageView en la parte inferior, alineado superior & inferior a la disposición principal, con el conjunto de imágenes de enmascaramiento:

  • android:background="@drawable/grey_frame"

Esto hace referencia a mi archivo 9Patch - máscaras y el diseño subyacente al ser dibujado en primer plano.

Aquí hay un ejemplo que muestra las esquinas redondeadas grises en un diseño estándar.

maskedLayout

hth

+2

He intentado varios enfoques para esquinas redondeadas en ListViews y este es definitivamente el más confiable. Funciona de maravilla. ¡Gracias! – jenzz

+1

Esta es definitivamente la mejor manera. También permite que tus diseñadores se vuelvan locos y agreguen sombras/brillo a las esquinas redondeadas y no tienes que hacer un dibujo loco ni nada. – phreakhead

+3

Me divertí con "siempre copiando desde iPhone". ¡Tan verdadero! :( – princepiero

3

nivel API 21 (Jellybean) añadido View.setClipToOutline. A partir de la documentación de Android en Defining Shadows and Clipping Views:

para recortar miras a la forma de un estirable, establecer el dibujable como el fondo de la vista ... y llame al método View.setClipToOutline().

He probado esto mediante el establecimiento de un fondo de matriz Ver a un GradientDrawable con un radio de esquina, y el niño vistas son recortan correctamente para que coincida con las mismas esquinas redondeadas de los padres.

Cuestiones relacionadas