CoordinatorLayout 将布局放在彼此之上
CoordinatorLayout place layouts on top of eachother
我有一个 CoordinatorLayout
,我想要一个 FrameLayout
在所有其他 Layouts and widgets
的下面。我试过使用 android:layout_below/above
和 app:layout_constraintVertical_bias="0.0"
,但是其中 none 超过了 FrameLayout
的 android:id="@+id/container"
。
我认为最简单的方法是将 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>
学习中,也欢迎大家对我的风格提出意见!
我不知道我是否明白你在找什么,但我试着编辑它以订购所有组件。
在彼此之间排序视图的最佳方式 (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>
如果没有 "guide" 关于您正在寻找的内容,我很难重现准确的预期结果,但这对您来说应该是一个开始。 (我更改了一些颜色和文本,以便更清楚地显示每个视图的位置)
在RelativeLayout
中,Z顺序只是关于哪个视图写在另一个视图之上,XML
中的第一个在后面,第二个在它上面等等。
如有任何帮助,请随意询问。我会建议你看看 youtube 上的一些教程,我最喜欢 TheNewBoston 的,希望对你有所帮助。
小提示
尝试为 view
使用最小数量的精确 dp
值,因为它不会换行文本或适合屏幕尺寸,只需以多种尺寸和多种尺寸测试您的布局里面的文字,争取更好的结果。
即:您写了一个固定大小为 113dp 的 TextView
,但是像 "this is centered"
这样的文本太大并且被严重截断了。只在必要时使用精确 dp 并检查它的许多屏幕尺寸,(对于 margins/paddings
在许多情况下需要精确值)
我有一个 CoordinatorLayout
,我想要一个 FrameLayout
在所有其他 Layouts and widgets
的下面。我试过使用 android:layout_below/above
和 app:layout_constraintVertical_bias="0.0"
,但是其中 none 超过了 FrameLayout
的 android:id="@+id/container"
。
我认为最简单的方法是将 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>
学习中,也欢迎大家对我的风格提出意见!
我不知道我是否明白你在找什么,但我试着编辑它以订购所有组件。
在彼此之间排序视图的最佳方式 (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>
如果没有 "guide" 关于您正在寻找的内容,我很难重现准确的预期结果,但这对您来说应该是一个开始。 (我更改了一些颜色和文本,以便更清楚地显示每个视图的位置)
在RelativeLayout
中,Z顺序只是关于哪个视图写在另一个视图之上,XML
中的第一个在后面,第二个在它上面等等。
如有任何帮助,请随意询问。我会建议你看看 youtube 上的一些教程,我最喜欢 TheNewBoston 的,希望对你有所帮助。
小提示
尝试为 view
使用最小数量的精确 dp
值,因为它不会换行文本或适合屏幕尺寸,只需以多种尺寸和多种尺寸测试您的布局里面的文字,争取更好的结果。
即:您写了一个固定大小为 113dp 的 TextView
,但是像 "this is centered"
这样的文本太大并且被严重截断了。只在必要时使用精确 dp 并检查它的许多屏幕尺寸,(对于 margins/paddings
在许多情况下需要精确值)