2017-10-12 76 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的比例,并在不提供足够的空间将变小。