天天看點

實作滑動菜單(富文本版本)主要内容步驟概要

所謂的滑動菜單就是将一些菜單選項隐藏起來,而不是放置在主螢幕上,然後可以通過滑動的方式将菜單顯示出來。這種方式既節省了螢幕空間,又實作了非常好的動畫效果。
下面我們實作一個相對基本的滑動菜單。 參考文獻:《第一行代碼(第2版)》

主要内容

1.使用DrawerLayout控件搭建基礎架構

2.使用NavigationView優化滑動菜單頁面

步驟概要

建立一個空項目,修改主布局檔案如下,DrawerLayout中放置了兩個直接子控件,第一個字控件是FrameLayout,用于作為主螢幕中顯示的内容,第二個控件這裡使用了一個TextView,用于作為滑動菜單中顯示的内容:
實作滑動菜單(富文本版本)主要内容步驟概要
效果圖如下:        啟動程式,主界面如下:
實作滑動菜單(富文本版本)主要内容步驟概要
在螢幕左側邊緣向右拖動,就可以讓滑動菜單顯示出來了:
實作滑動菜單(富文本版本)主要内容步驟概要

NavigationView是Design Support庫中提供的一個控件,它可以将滑動菜單頁面的實作變得非常簡單。
接下來我們實作一下這個控件, NavigationView是Design Support庫中提供的,那麼我們需要将這個庫引入到項目中才行,如圖中32-33行: 注:Sync的時候可能會出錯,這時候添加如27、31兩行相關注釋即可
實作滑動菜單(富文本版本)主要内容步驟概要
其中CircleImageView是一個開源項目,它可以用來輕松實作圖檔圓形化: 2.2 在開始使用NavigationView之前,我們需要準備好兩個東西: 1)menu。用來自NavigationView中顯示具體的菜單項; 2)headerLayout。用來在NavigationView中顯示頭部布局的; 下面開始操作, 建立一個布局檔案,編寫如下代碼:
實作滑動菜單(富文本版本)主要内容步驟概要
layout檔案夾下再建立一個header布局:
實作滑動菜單(富文本版本)主要内容步驟概要
現在menu和header都準備好了,可以使用NavigaView了,修改activity_main.xml中的代碼,如下: 其中我們可以看到,如圖中27-28行,我們将準備好的menu和header設定到NavigaView裡面,
實作滑動菜單(富文本版本)主要内容步驟概要
到此為止滑動菜單的UI設計便大功告成了,運作程式,在螢幕左側邊緣向右拖動,就可以如下效果圖了:
實作滑動菜單(富文本版本)主要内容步驟概要

繼續閱讀