mise en page avec le poids et la hauteur min

Question

Je travaille sur une application radio avec une interface utilisateur simple (y-commande):

• couverture
• titre + artiste
• boutons lecture/pause/.. .
• Soundbar

Mais je suis face à un problème avec la taille des écrans.

La couverture doit rester en haut et conserver un ratio de 1: 1 (si la pièce est suffisante). La barre de son reste au fond.

La partie avec les informations de piste et le bouton de lecture/pause doit être redimensionnée pour prendre l'espace restant et centrer le contenu.

J'obtiens ceci en utilisant LinearLayout avec un poids de 1 pour la mise en page du milieu mais sur un petit écran, le contenu est rogné.

J'essaie une solution multiple (Coordinateur, Relatif, ...) mais personne n'a fonctionné comme prévu.

Lorsque mon contenu n'est pas recadré, il est aligné en bas au lieu d'être centré.

Voici mon XML actuel qui fonctionne comme prévu sur les écrans normaux et grands mais recadrée android: id = "@ + id/content" sur les petits écrans.

<LinearLayout 
    android:id="@+id/content_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

    <include 
     android:id="@+id/layout_cover" 
     layout="@layout/layout_cover" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:elevation="1dp" /> 

    <LinearLayout 
     android:id="@+id/content" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:gravity="center" 
     android:orientation="vertical"> 

     <include 
      android:id="@+id/layout_informations" 
      layout="@layout/layout_informations" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_margin="@dimen/medium_margin" 
      android:elevation="2dp" /> 

     <include 
      android:id="@+id/layout_actionbar" 
      layout="@layout/layout_actionbar" 
      android:layout_width="match_parent" 
      android:layout_height="@dimen/layout_actionbar_height" 
      android:layout_margin="@dimen/common_margin" /> 

    </LinearLayout> 

    <include 
     android:id="@+id/layout_soundbar" 
     layout="@layout/layout_soundbar" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 

</LinearLayout> 

Merci d'avance pour votre aide.

Fab

Answer 1

Essayez comme cette

Option 1

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

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="@color/colorPrimary"/> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:scaleType="centerCrop" 
     android:src="@drawable/ic_audiotrack_black_24dp"/> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="100dp" 
     android:orientation="vertical" 
     android:gravity="center" 
     android:background="@color/colorPrimary"> 

     <!--Title play pause--> 

     <FrameLayout 
      android:layout_width="40dp" 
      android:layout_height="40dp" 
      android:layout_gravity="center"/> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="40dp" 
     android:background="@color/colorPrimaryDark"> 

     <!--Soundbar--> 

    </LinearLayout> 

</LinearLayout> 

L'image de l'album prendra l'espace maximum possible. Si la taille de l'écran est petite, l'image de l'album sera rognée.

Option 2

Enroulez le ImageView dans un ConstraintLayout

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

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="@color/colorPrimary"/> 

    <android.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"> 

     <ImageView 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:src="@drawable/ic_audiotrack_black_24dp" 
      app:layout_constraintBottom_toBottomOf="parent" 
      android:layout_marginBottom="0dp" 
      app:layout_constraintTop_toTopOf="parent" 
      android:layout_marginTop="0dp" 
      android:layout_marginRight="0dp" 
      app:layout_constraintRight_toRightOf="parent" 
      android:layout_marginLeft="0dp" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintDimensionRatio="w,1:1" 
      app:layout_constraintHorizontal_bias="0.538" 
      app:layout_constraintVertical_bias="0.0" /> 

    </android.support.constraint.ConstraintLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="100dp" 
     android:orientation="vertical" 
     android:gravity="center" 
     android:background="@color/colorPrimary"> 

     <!--Title play pause--> 

     <FrameLayout 
      android:layout_width="40dp" 
      android:layout_height="40dp" 
      android:layout_gravity="center"/> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="40dp" 
     android:background="@color/colorPrimaryDark"> 

     <!--Soundbar--> 

    </LinearLayout> 

</LinearLayout> 

Dans ce cas, le ImageView maintiendra toujours le rapport 1: 1 et se réduiront de plus si un espace suffisant est pas fourni.