2017-10-12 79 views
-1

我工作的無線電的應用程序與一個簡單的用戶界面(Y-順序):佈局與重量和最低高度

  • 標題+藝術家
  • 按鈕播放/暫停/ .. 。
  • 迴音璧

但我面臨着屏幕尺寸的問題。

封面需要留在頂部,並保持1:1的比例(如果有空間)。 聲吧停留在底部。

帶軌道信息和播放/暫停按鈕的部分需要調整其自身的大小以佔據剩餘空間並將其中的內容居中。

我通過使用LinearLayout對中間佈局加權1來實現此目的,但在小屏幕上,內容被裁剪爲

我嘗試多個解決方案(協調員,相對...),但沒有人按預期工作。

當我的內容沒有被裁剪時,它對齊底部而不是居中。

這是我的真正的XML,在正常和大屏幕上按預期工作,但在小屏幕上裁剪出android:id =「@ + id/content」

<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> 

非常感謝您的幫助。

的Fab

+1

請發佈輸出截圖 –

+0

http://hpics.li/a318fff –

+0

如果沒有足夠的空間(最初爲1:1),封面(綠色條紋)需要裁剪自己。信息/按鈕部分(綠色括號)需要將其自身置於封面和條形音箱之間的剩餘空間中。 –

回答

0

嘗試這樣

選項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> 

影集圖像將可能的最大空間。如果屏幕尺寸很小,則專輯圖像將被裁剪。

選項2

包住ImageView內的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> 

在這種情況下,將ImageView始終保持1:1的比例,並在不提供足夠的空間將變小。