Comment faire pour que ImageView flotte au-dessus d'un LinearLayout?

Question

S'il vous plaît vérifier le lien à l'image ci-dessous. Je suis incapable de poster l'image en raison de la mauvaise réputation.

http://i.stack.imgur.com/nupZo.png

Mon but est d'obtenir une mise en page comme celui de gauche et à la place que je suis obtenir celui de droite. Voici mon code xml pour la mise en page.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" android:layout_height="match_parent" 
android:background="@color/metalDark" 
android:orientation="vertical" 
> 
<LinearLayout 
    android:id="@+id/topPanel" 
    android:layout_width="fill_parent" 
    android:layout_height="65dp" 
    android:background="@color/metalList" 
    android:elevation="6dp" 
    android:layout_marginBottom="5dp" 
    android:orientation="horizontal"> 

    <TextView 
     .../> 


</LinearLayout> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/topPanel" 
    android:layout_margin="10dp" 
    android:orientation="vertical"> 

    <LinearLayout 
     android:id="@+id/albumheader" 
     android:layout_width="match_parent" 
     android:layout_height="150dp" 
     android:background="@color/metalList" 
     android:elevation="6dp"> 
     <LinearLayout 
      android:id="@+id/underlay" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginTop="25dp" 
      android:layout_marginBottom="25dp" 
      android:background="@drawable/canvas2"> 
     <ImageView 
      android:id="@+id/al_art" 
      android:layout_width="135dp" 
      android:layout_height="135dp" 
      android:layout_toLeftOf="@+id/al_details" 
      android:layout_marginLeft="25dp" 
      android:layout_marginTop="-17dp" 
      android:elevation="4dp"/> 
     <LinearLayout 
      android:id="@+id/al_details" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_gravity="right|center" 
      android:orientation="vertical"> 

      <TextView 
       .../> 
      <TextView 
       .../> 
      <TextView 
       .../> 

     </LinearLayout> 
      </LinearLayout> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="fill_parent" 
     android:background="@color/metalList" 
     android:layout_marginTop="15dp" 
     android:layout_marginBottom="15dp" 
     android:elevation="6dp" 
     > 
     <ListView 
      ..../> 
    </LinearLayout> 

</LinearLayout> 

Answer 1

LinearLayout est pas génial pour mettre Views les uns sur les autres.

Cet article est très utile pour plus d'informations: http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html

Voici ce que je ferais:

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 

    <View 
     android:id="@+id/header" 
     android:layout_width="match_parent" 
     android:layout_marginBottom="12dp" 
     android:layout_height="?listPreferredItemHeight"/> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_marginStart="12dp" 
     android:layout_marginEnd="12dp" 
     android:layout_marginBottom="12dp" 
     android:layout_height="wrap_content"> 


     <ImageView 
      android:id="@+id/img_orange_rectangle" 
      android:background="#ff6600" 
      android:layout_centerVertical="true" 
      android:layout_width="match_parent" 
      android:layout_height="128dp"/> 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_centerVertical="true" 
      android:text="hi I'm some text" 
      android:gravity="end|top" 
      android:padding="6dp" 
      android:layout_alignStart="@id/img_orange_rectangle" 
      android:layout_alignEnd="@id/img_orange_rectangle" 
      android:layout_alignBottom="@id/img_orange_rectangle" 
      android:layout_alignTop="@id/img_orange_rectangle" 
      android:layout_height="0dp"/> 


     <ImageView 
      android:id="@+id/img_blue_square" 
      android:background="#2541ba" 
      android:layout_marginStart="24dp" 
      android:layout_centerVertical="true" 
      android:layout_width="156dp" 
      android:layout_height="156dp"/> 
    </RelativeLayout> 


    <ListView 
     android:id="@+id/listview" 
     android:layout_marginStart="12dp" 
     android:layout_marginEnd="12dp" 
     android:layout_marginBottom="12dp" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"/> 
</LinearLayout> 

Mis à jour le 15 Août, ici à 2015 par commentaires ci-dessous:

Mais s'il vous plaît dites-moi pourquoi avez-vous gardé le layout_height du RelativeLayout à 0?

J'ai utilisé une hauteur de 0 sur la RelativeLayout parce que la mise en page obtient sa hauteur en fonction de la layout_weight.

Et la hauteur du rectangle orange change-t-elle en fonction du périphérique et de la taille de l'écran?

Non Bien que j'ai mis à jour la disposition pour pouvoir le faire. Je recommande article this pour savoir comment prendre en charge plusieurs tailles d'écran. Vers le bas de cette partie de this StackOverflow post il parle de dimensions xml pour chaque taille d'écran du pdf d'IO de Google.

De même, si je veux placer des textes à l'intérieur du rectangle orange, comment puis-je m'assurer qu'il reste à l'intérieur?

J'ai ajouté une autre disposition ci-dessus. Il y a plusieurs façons d'y parvenir. Celui que j'ai choisi était de faire un TextView qui aligne les attributs du ImageView dessus.

Answer 2

Pourquoi vous définissez pas android:gravity="center" sur votre mise en page albumheader. Maintenant, votre taille ImageViews est codée en dur à 135dp, alors pourquoi ne pas simplement définir toutes les autres mises en page albumheader à une hauteur définie de 100dp par exemple au lieu de match_parent. Maintenant que albumheader gravité est définie sur le centre, vous devriez obtenir l'effet de l'ImageView flottant au-dessus.

Je pense que cela devrait faire l'affaire mais s'il ne me le permet pas.

Answer 3

son parce que votre sous-couche LinearLayout a 100dp top Maring et en bas

son parent a 150dp hauteur et déjà 100dp est consommé par les marings alors que 50dp est sorcière à gauche ne suffit pas pour imageView avec 135dp hauteur à afficher dans il.

il serait plus facile d'implémenter cette vue si vous utilisiez RelativeLayout pour certaines des vues qui aideraient particulièrement à positionner cette vue d'image et la zone orange (en utilisant l'attribut center vertical).