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

您需要创建自定义Navigation drawer。用于演示目的。NavigationDrawer-MaterialDesign和JamsMusicPlayer

Answer 2

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

以RelativeLayout为根。
标题应在顶部对齐：
- android:layout_alignParentTop="true"
页脚应在底部对齐：
- android:layout_alignParentBottom="true"
正文应在页眉和页脚之间对齐
- android:layout_above="@+id/footer"
- android:layout_below="@+id/header"

这会产生如下布局：

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

注意：您也可以使用嵌套的LinearLayout，但这会导致性能不佳（see here）。

代码

产生上述图像的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作为根元素。指南here。

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

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

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

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

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

3 个答案:

代码