2010-04-13 13 views
16

Tengo una vista personalizada que amplía la clase Vista. Me gustaría 2 instancias de mi vista personalizada en capas directamente una encima de la otra. ¿Cómo debería verse mi archivo de diseño para lograr esto?Cómo crear vistas en capas

Respuesta

27

Resulta que FrameLayout era lo que quería. Sólo hacer esto en su diseño:

<FrameLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" > 

     <com.proj.MyView 
      android:id="@+id/board1" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content"/> 

     <com.proj.MyView 
      android:id="@+id/board2" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" /> 

    </FrameLayout> 
+2

Gracias compañero. Me estaba volviendo loco sobre esto y eso parece funcionar bastante bien. Pensé que FrameLayout solo podía contener 1 vista infantil visible a la vez ... Ya estaba tratando de crear mi propio diseño y era como pensar: ¡tiene que haber una manera más fácil! P.S. Ah, y en caso de que no sea obvio, las vistas se muestran de arriba a abajo de manera predeterminada, por lo que board2 se dibuja sobre board1. – Timo

+1

Muy agradable. Debo decir que no me gusta la frecuencia con la que se usan los diseños relativos y estoy feliz de que este no use ninguno. (¡Los parientes son tan desordenados! ¡Cada objeto necesita tener algunos atributos que describan su posición! Parece que eso frustra el propósito de usar diseños ...) – ArtOfWarfare

24

Utilice un RelativeLayout. Los hijos posteriores del RelativeLayout se superpondrán a los hijos anteriores.

5

Si bien es cierto que se puede lograr usando capas RelativeLayout y FrameLayout, en la API de 21 y más .. las cosas han cambiado.

En API 21 y superior, los hijos posteriores de xml no significa que se superpondrá a los hijos anteriores. En su lugar, usa Elevation para determinar qué vista se superpondrá a otra vista (índice Z).

Por ejemplo, si tiene algo como esto.

<FrameLayout 
    android:layout_height="match_parent" 
    android:layout_width="match_parent"> 

    <Button 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@android:color/white" 
     android:text="Hello World" 
     android:layout_gravity="top" /> 

    <View 
     android:layout_width="match_parent" 
     android:layout_height="10dp" 
     android:background="@android:color/black" 
     android:layout_gravity="bottom" /> 

</FrameLayout> 

El View no serán visibles a pesar de que se añadió después Button. Eso es porque Button tiene una elevación más alta que View. Para reorganizar Z-Index puede agregar el atributo elevation a las vistas respectivas.

<FrameLayout 
    android:layout_height="match_parent" 
    android:layout_width="match_parent"> 

    <Button 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@android:color/white" 
     android:text="Hello World" 
     android:layout_gravity="top" 
     android:elevation="0dp" /> 

    <View 
     android:layout_width="match_parent" 
     android:layout_height="10dp" 
     android:background="@android:color/black" 
     android:layout_gravity="bottom" 
     android:elevation="2dp" /> 

</FrameLayout> 

De esta manera el View se solaparán la Button.

Más información sobre Elevación & sombras: https://material.io/guidelines/material-design/elevation-shadows.html

Cuestiones relacionadas