如何在我的Android应用程序中实现这样的布局？

Question

我是新手android程序员。 我正在设计我的第一个应用程序，这是一个MP3播放器。 我希望实现如下所示的布局

https://m2.behance.net/rendition/pm/12717697/disp/05ec216e30ef24ec7a2cac85a5329140.jpg

这是我的初步结构：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="@+id/content_frame"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="fill_parent"
    android:background="#33000000"
    android:layout_height="20dp"
    android:layout_weight="1"
    android:id="@+id/_header"
    android:layout_gravity="top"
    android:orientation="vertical"
    >



</LinearLayout>

<RelativeLayout
    android:layout_width="fill_parent"
    android:background="#74000000"
    android:layout_height="40dp"
    android:layout_weight="2"
    android:id="@+id/_footer"
    android:layout_gravity="bottom"
    >



</RelativeLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:background="#1A000000"
    android:layout_height="478dp"
    android:layout_weight="3"
    android:id="@+id/_middle"
    android:layout_gravity="center"
    android:orientation="vertical"
    >



</LinearLayout>


</FrameLayout>

但是我没有达到预期的效果。 布局是重叠的，我不知道如何解决它们。 我尝试过RelativeLayouts，片段和LinearLayouts。 但没有任何工作。

我该怎么做呢？

Answer 1

您需要创建自定义导航抽屉 。 用于演示目的。 NavigationDrawer-MaterialDesign和JamsMusicPlayer

Answer 2

为了帮助您入门，请使用：

1. 一个RelativeLayout作为根。
2. 标题应在顶部对齐：
   • android:layout_alignParentTop="true"
3. 页脚应在底部对齐：
   • android:layout_alignParentBottom="true"
4. 正文应该在页眉和页脚之间对齐
   • android:layout_above="@+id/footer"
   • android:layout_below="@+id/header"

这会产生如下布局：

可以在页眉和页脚内部使用相同的模式来对齐那里的项目，除非这次您将对齐父项的右侧和左侧而不是顶部和底部。 至于NavigationDrawer，谷歌在这里有一些文件。

注意：您也可以使用嵌套的LinearLayout但这会导致性能不佳（ 请参阅此处 ）。

---

码

生成上述图像的xml布局如下：

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

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="HEADER"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/footer"
        android:layout_below="@+id/header">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="BODY"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:gravity="center"/>

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="FOOTER"
            android:textAppearance="@android:style/TextAppearance.Large"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

</RelativeLayout>

Answer 3

如果您想要一个菜单​​（默认是隐藏的，用户可以滑动以显示它），您应该使用DrawerLayout作为根元素。 在这里指导。

第二个根元素应该是LinearLayout ，具有垂直方向。 此布局将包含3个其他LinearLayout布局：

第一个（水平方向）包含菜单图标，标题，3个点......

第二个（垂直方向）包含专辑图片，歌手姓名......

最后一个（水平方向）包含播放，暂停，下一个...按钮