协调器布局将布局放在彼此之上

Question

我有一个CoordinatorLayout，我希望在所有其他Layouts and widgets下面有一个FrameLayout。我尝试过使用android:layout_below/above和app:layout_constraintVertical_bias="0.0"，但没有一个超过其android:id="@+id/container"FrameLayout。

我认为最简单的方法是将FrameLayout置于他人之下。例如，在javascript中Z-index。

该FrameLayout将包含Google's Camera2 API的预览。

这是我的 XML：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:ignore="ExtraText">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_marginTop="8dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay"
app:layout_constraintBottom_toTopOf="@+id/songTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/container"
app:layout_constraintVertical_bias="0.025">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:elevation="6dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<Button
android:id="@+id/backToSongList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Song List" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/gameBoard"
android:layout_width="match_parent"
android:layout_height="132dp"
android:layout_alignParentStart="true"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="@+id/songTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/app_bar"
app:layout_constraintVertical_bias="0.0">
<com.jjoe64.graphview.GraphView
android:id="@+id/graph"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

<ImageButton
android:id="@+id/playRecord"
android:layout_width="70dp"
android:layout_height="75dp"
android:layout_above="@id/container"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="@android:drawable/star_big_on"
app:layout_constraintVertical_bias="0.0"/>
<TextView
android:id="@+id/pitchText"
android:layout_width="113dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="@+id/playRecord"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.724"
app:layout_constraintStart_toEndOf="@+id/playRecord"
app:layout_constraintTop_toBottomOf="@+id/songTitle"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/songTitle"
android:layout_width="380dp"
android:layout_height="61dp"
android:layout_above="@id/container"
android:layout_marginBottom="12dp"
android:layout_marginEnd="8dp"
android:text="TextView"
android:textColor="@android:color/background_dark"
android:textSize="24sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toTopOf="@+id/playRecord"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="391dp"
android:layout_height="569dp"
android:background="#000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:context="com.example.richard.smarttabs.SongPlayer" />

</android.support.constraint.ConstraintLayout>

由于我正在学习，也欢迎所有对我的风格发表评论！

Answer 1

我不知道我是否理解您要查找的内容，但我尝试对其进行编辑以订购所有组件。

在彼此之间对视图进行排序的最佳方法(imo)是使用RelativeLayout，它允许您设置toLeftOf，Above，Below，...

试着看看这个：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:ignore="ExtraText">

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:layout_alignParentBottom="true"
tools:context="com.example.richard.smarttabs.SongPlayer" />
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_marginTop="8dp"
android:fitsSystemWindows="true"
android:background="#ffffff"
android:theme="@style/AppTheme.AppBarOverlay"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:elevation="6dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<Button
android:id="@+id/backToSongList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Song List" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/gameBoard"
android:layout_width="match_parent"
android:layout_height="132dp"
android:layout_alignParentLeft="true"
android:layout_below="@+id/app_bar"
android:layout_marginBottom="8dp"
android:layout_above="@id/songTitle"
android:background="#c1c1c1"
>
<com.jjoe64.graphview.GraphView
android:id="@+id/graph"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

<ImageButton
android:id="@+id/playRecord"
android:layout_width="70dp"
android:layout_height="75dp"
android:layout_above="@+id/pitchText"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#fff"
android:src="@mipmap/ic_launcher"
/>
<TextView
android:id="@+id/pitchText"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textSize="24sp"
android:text="This is centered, above frame"
android:textColor="#fff"
android:layout_centerInParent="true"
/>
<TextView
android:id="@+id/songTitle"
android:layout_width="380dp"
android:layout_height="61dp"
android:layout_above="@+id/playRecord"
android:layout_marginBottom="12dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textColor="#b3b3"
android:textSize="24sp"
android:textStyle="bold|italic"
/>

</RelativeLayout>

如果没有关于您正在寻找什么的"指南"，我很难重现确切的预期结果，但这应该是您的开始。(我更改了一些颜色和文本，以更清楚地显示每个视图的位置)

在RelativeLayout中，Z 顺序只是关于哪个视图写在另一个视图之上，XML中的第一个视图在后面，第二个视图在它上面，依此类推。

如需任何帮助，请随意询问。我建议你在youtube上看一些教程，我最喜欢新波士顿的教程，希望对你有帮助。

小提示

尝试为view使用最小数量的精确dp值，因为它不会换行文本或适合屏幕尺寸，只需以多种尺寸和内部包含许多文本测试您的布局，以获得更好的结果。

IE：你写了一个固定大小为 113dp 的TextView，但像"this is centered"这样的文本太大并且被严重截断。仅在必要时使用精确的dp，并检查其许多屏幕尺寸(以及在许多情况下需要精确值的margins/paddings)