2012-08-14 48 views
14

Este es mi diseño que he probado hasta ahora sin ningún éxito¿Cómo poner una imageview encima de otro imageview en Android

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:background="@color/white"> 

<LinearLayout 
    android:id="@+id/lltest" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:layout_centerHorizontal="true"> 

     <ImageView 
     android:id="@+id/inside_imageview" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="5dip" 
     android:layout_marginBottom="5dip" 
     android:src="@drawable/frame"/> 

</LinearLayout> 

<ImageView 
     android:id="@+id/outside_imageview" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@id/inside_imageview" 
     android:scaleType="fitXY"/> 
</RelativeLayout> 

Lo que exactamente quiero es tener mi outside_imageview en la parte superior de inside_imageview con la exacta alto y ancho ... ¿Cómo hacerlo a través del diseño?

+0

has necesitado añadir layout_alignLeft = "@ id/inside_imageview "además de alignTop? – CSmith

+0

@CSmith Sí, lo intenté. –

+0

El problema es que tiene la imagen_interior dentro de un LinearLayout por lo que el atributo 'layout_alignTop' no puede ver la ID de referencia a' inside_imageView'. 'outside_imageview' se alinearía con LinearLayout si las referencias de ID fueran' lltest' en su lugar. – DeeV

Respuesta

34
<RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:background="@color/white" > 

    <ImageView 
     android:id="@+id/inside_imageview" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="5dip" 
     android:layout_marginTop="5dip" 
     android:src="@drawable/frame" /> 

     <ImageView 
     android:id="@+id/outside_imageview" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@id/inside_imageview" 
     android:layout_alignBottom="@id/inside_imageview" 
     android:layout_alignLeft="@id/inside_imageview" 
     android:layout_alignRight="@id/inside_imageview"    
     android:scaleType="fitXY" /> 
    </RelativeLayout> 

El atributo layout_align[Top|Bottom|Left|Right] en RelativeLayout se utiliza para alinear vistas sobre la base de sus respectivos valores x e y dentro del margen. El segundo ImageView ahora se alineará con la parte superior, inferior, izquierda y derecha del primer ImageView según los márgenes. El relleno se ignora en la alineación.

+0

Hmmm ... En realidad tengo dos vistas de imagen más junto con inner_imageview ... así que Pensé en ponerlos en un diseño lineal separado ... El interno necesito hacer una orientación horizontal y el exterior quiero una vertical ... Así que por favor sugiérame en este –

+0

Eso complica las cosas un poco más. No puede hacer referencia a vistas que son secundarias en otras vistas. Solo aceptan referencias a niños en el mismo nivel. Si 'inside_imageview' y' outside_imageview' tienen el mismo ancho y alto, simplemente necesita colocarlos en dos 'Linearlayouts' separados y alinear dos' LinearLayouts' por la parte superior e izquierda. Si las dimensiones son muy diferentes, puede que tenga que usar 'layout_below' para una y' layout_toRightOf' para la otra. – DeeV

+0

¡excelente respuesta! quiéralo ! – uLYsseus

6

Deberías probar FrameLayout. Dentro de FrameLayout cada niño está uno encima del otro.

+0

solo se muestra 1 imagen en el dispositivo y 2 imágenes, una encima de la otra, se muestran correctamente en la vista de diseño del diseño – iOSAndroidWindowsMobileAppsDev

4

Necesita un diseño de marco. Intente verificar AndroidFrameLayout.

+0

solo se muestra 1 imagen en el dispositivo y 2 imágenes, una encima de la otra se muestran correctamente en la vista de diseño del diseño – iOSAndroidWindowsMobileAppsDev

19

FrameLayout es lo que necesita. Simplemente puede combinar el diseño principal que es FrameLayout también. Tome un vistazo a la Desarrolladores de Android Blog: http://android-developers.blogspot.it/2009/03/android-layout-tricks-3-optimize-by.html

<?xml version="1.0" encoding="utf-8"?> 
<merge xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_gravity="center"> 

    <ImageView 
     android:id="@+id/outside_imageview" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:scaleType="fitXY"/> 

    <ImageView 
     android:id="@+id/inside_imageview" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="5dip" 
     android:layout_marginBottom="5dip" 
     android:src="@drawable/frame" /> 
</merge> 
+2

tristemente el tipo que hizo la pregunta, no entiende y ni siquiera quiere para entender qué diseño de marco puede hacer y nos votó a todos por la baja. upvoted u two guys :) –

+0

Esto incluso reduce la jerarquía de vista en un nivel: woot: –

+0

Buena solución. El FrameLayout es sin duda el camino a seguir. – nurxyz

0

Probé esta manera y funcionó para mí, creo que sirve

<FrameLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:padding="5dip"> 
<ImageView 
    android:id="@+id/image_first" 
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/imga"/> 
<ImageView 
    android:id="@+id/imageview" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:src="@drawable/image"/> 
</FrameLayout> 
+0

; solo se muestra 1 imagen en el dispositivo y 2 imágenes, una encima de la otra. se muestra correctamente en la vista de diseño del diseño – iOSAndroidWindowsMobileAppsDev

+0

, por lo que ¿cuál es el problema –

1
   <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:padding="@dimen/_15dp"> 
       <ImageView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:padding="@dimen/_10dp" 
        android:layout_marginTop="@dimen/_50dp" 
        android:background="@drawable/white_background" 
        /> 
       <ImageView 
        android:layout_width="@dimen/_100dp" 
        android:layout_height="@dimen/_100dp" 
        android:background="@drawable/my_credit" 
        android:layout_marginTop="@dimen/_5dp" 
        android:layout_centerHorizontal="true" 
        /> 
      </RelativeLayout> 
+0

? ¿Puede explicar qué hace exactamente su código? – Alex

+0

coloca una vista de imagen en lo de arriba de otra imagview ... no hay necesidad de utilizar ningún diseño de marco – Sunil