網易雲音樂首頁布局如何做的？

頂部導航欄用的材料設計規範，但是左邊和中間高度自定義，這種效果如何實現，還有他的側邊欄。

側邊欄下面是menu但是它的menu裡面還有其他控制項。

---

從整個布局來講，最外層可以使用DrawerLayout。

然後嵌套一個Toolbar（頂部導航欄），

一個RelativeLayout嵌套RecyclerView（抽屜側滑欄）

還有一個ViewPager。

光說無憑，自己親手做了一遍，遇到了三個問題

1. 頂部導航欄怎麼添加三個tab，並與ViewPager聯動。

2. 抽屜很明顯不是簡單的NavigationView（從下面底下的設置、退出應用兩個按鈕可以看出）。

3. 抽屜怎麼頂到狀態欄，並不讓狀態欄半透明顯示。

那麼，我的解決方案是,如圖：

1.如圖，頂部導航欄依舊使用Toolbar，但是裡面包裹一個TabLayout，使用TabLayout.addTab三個Tab，但是三個Tab只設置圖標，不設置標題。

使用TabLayout和ViewPager聯動，可以：

• TabLayout中的setupWithViewPager(ViewPager)。

• 也可以使用分別給TabLayout和viewPager添加監聽器來完成聯動。

2.抽屜我使用的是一個RelativeLayout嵌套一個RecyclerView和一個LinearLayout（底部設置、退出應用）。

整個RelativeLayout 包裹在DrawerLayout裡面並設置

android:layout_gravity="start"


3.最後一個問題，直接貼代碼。

//設置狀態欄為透明
if (Build.VERSION.SDK_INT &>= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
}


（另外，左邊的抽屜開關我使用的是ActionBarDrawerToggle，右邊的搜索按鈕使用getMenuInflater().inflate來實現。）

效果圖：

歡迎交流～

微信號:zhengmanbin123

---

因為此處的側邊抽屜式面板是自定義的模塊，而並非系統自帶的控制項。

從截圖可以看出是ios的系統，ios系統並沒有麵包屑抽屜這種控制項。既然是自己寫的面板，那自然是想加入什麼元素都行，不受系統限制。可以看看別的案例，例如wps和qq也有自定義的側面板，它們都是自定義的，面板內容可以因需而定，非常自由。

wps for ios

qq for ios

順道一提，這種抽屜面板是安卓material design規範裡面的控制項，近幾年才被引用到ios，它並不蘋果式。

---

正好之前模仿過網易雲音樂首頁的布局，等整理一下。

---

推薦閱讀：