如何在我的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個點......

第二個（垂直方向）包含專輯圖片，歌手姓名......

最后一個（水平方向）包含播放，暫停，下一個...按鈕