Android創建導航抽屜 → Creating a Navigation Drawer

創建抽屜導航

導航抽屜是在 屏幕左側邊緣的 應用主導航選項的面板. 它大多數時間是隱藏的, 但當用戶用手指從屏幕的左側滑動, 或者當用戶點擊應用頂部工具欄的應用圖標的時候, 它就會顯示.

此課程是描述 怎樣有效的使用在Support Library中的DrawLayout接口 去實現一個導航抽屜.

創建一個抽屜布局

添加一個抽屜, 聲明UI的時候需要吧DrawLayout作為你的布局文件的根視圖(root view). 在DrawLayout裡面, 添加一個主要內容的視圖(當抽屜導航隱藏的時候你的主要的布局文件), 和另一個包含導航抽屜的視圖.

舉例來說, 下面的布局使用了DrawLayout, 它有2個子視圖: 一個FrameLayout包含主要的內容, 一個ListView的導航抽屜.

1. <Android.support.v4.widget.DrawerLayout

2. xmlns:android="http://schemas.android.com/apk/res/android"

3. android:id="@+id/drawer_layout"

4. android:layout_width="match_parent"

5. android:layout_height="match_parent">

6. <!-- The main content view -->

7. <FrameLayout

8. android:id="@+id/content_frame"

9. android:layout_width="match_parent"

10. android:layout_height="match_parent"/>

11. <!-- The navigation drawer -->

12. <ListViewandroid:id="@+id/left_drawer"

13. android:layout_width="240dp"

14. android:layout_height="match_parent"

15. android:layout_gravity="start"

16. android:choiceMode="singleChoice"

17. android:divider="@android:color/transparent"

18. android:dividerHeight="0dp"

19. android:background="#111"/>

20. </android.support.v4.widget.DrawerLayout>

這個布局文件示范了一些重要的布局特征.

• 主要內容的視圖(FrameLayout)必須是DrawLayout的第一個子元素, 因為導航抽屜是在主要內容視圖的上面.

• 主要內容視圖設置為匹配父視圖的寬度和高度, 因為它代表了整個界面導航抽屜是隱藏的.
  

• 抽屜視圖(ListView)必須指定其水平重力與android:layout_gravity屬性。支持從右到左(RTL)語言,指定值與"start"代替"left"(所以抽屜裡出現在布局的右側當布局是RTL時).
  

• 抽屜視圖指定其寬度用dp單位和高度匹配父視圖。抽屜裡的寬度不能超過320 dp, 所以用戶總是可以看到主要內容視圖的一部分.

初始化抽屜列表

在你的Activity中, 第一件事就是初始化導航抽屜列表裡面的元素, 你如何做取決於你的應用程序的內容,但一個導航抽屜通常包括一個ListView, 因此清單應該由一個Adapter填充(例如ArrayAdapter或SimpleCursorAdapter).

例如, 這裡演示了如何用String array來初始化一個導航列表.

1. publicclass MainActivity extends Activity {

2. private String[] mPlanetTitles;

3. private ListView mDrawerList;

4. ...

5.  

6. @Override

7. publicvoid onCreate(Bundle savedInstanceState) {

8. super.onCreate(savedInstanceState);

9. setContentView(R.layout.activity_main);

10.  

11. mPlanetTitles = getResources().getStringArray(R.array.planets_array);

12. mDrawerList = (ListView) findViewById(R.id.left_drawer);

13.  

14. // Set the adapter for the list view

15. mDrawerList.setAdapter(new ArrayAdapter<String>(this,

16. R.layout.drawer_list_item, mPlanetTitles));

17. // Set the list's click listener

18. mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

19.  

20. ...

21. }

22. }

這個代碼調用setOnItemClickListener()去接收導航抽屜列表的點擊事件. 下一節將展示如何實現這個接口,當用戶選擇一個Item時改變內容視圖.

處理導航點擊事件

當用戶選擇了抽屜列表裡面的一個Item時, 系統調用onItemClickListener上的onItemClick(), 給setOnItemClickListener().

你在onItemClick()方法裡面做什麼, 取決於你的app實現的結構. 在下面的例子中, 選擇每一個Item都會在主要內容的布局中插入一個不同的Fragment.

1. privateclass DrawerItemClickListener implements ListView.OnItemClickListener {

2. @Override

3. publicvoid onItemClick(AdapterView parent, View view, int position, long id) {

4. selectItem(position);

5. }

6. }

7.  

8. /** Swaps fragments in the main content view */

9. privatevoid selectItem(int position) {

10. // Create a new fragment and specify the planet to show based on position

11. Fragment fragment = new PlanetFragment();

12. Bundle args = new Bundle();

13. args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);

14. fragment.setArguments(args);

15.  

16. // Insert the fragment by replacing any existing fragment

17. FragmentManager fragmentManager = getFragmentManager();

18. fragmentManager.beginTransaction()

19. .replace(R.id.content_frame, fragment)

20. .commit();

21.  

22. // Highlight the selected item, update the title, and close the drawer

23. mDrawer.setItemChecked(position, true);

24. setTitle(mPlanetTitles[position]);

25. mDrawerLayout.closeDrawer(mDrawer);

26. }

27.  

28. @Override

29. publicvoid setTitle(CharSequence title) {

30. mTitle = title;

31. getActionBar().setTitle(mTitle);

32. }

監聽打開和關閉事件

偵聽抽屜打開和關閉事件,調用你的DrawerLayout setDrawerListener(), 並將其傳遞給DrawerLayout.DrawerListener的實現. 這個接口提供了回調抽屜事件, 如onDrawerOpened()和onDrawerClosed ()。

然而, 相對於實現DrawerLayout.DrawerListener, 如果你的Activity包括工具欄, 可以代替繼承ActionBarDrawerToggle類. ActionBarDrawerToggle實現了DrawerLayout.DrawerListener. 所以你仍然可以覆蓋這些回調, 但它也有助於正確的交互行為, 在工具欄的圖標和導航抽屜之間(下一節將進一步討論)。

就像在導航抽屜設計指南一樣,當抽屜是可見的時候, 你應該修改工具欄的內容, 如改變標題和刪除操作Item. 下面的代碼用ActionBarDrawerToggle類的一個實例, 顯示了如何重寫DrawerLayout.DrawerListener的回調方法:

1. publicclass MainActivity extends Activity {

2. private DrawerLayout mDrawerLayout;

3. private ActionBarDrawerToggle mDrawerToggle;

4. private CharSequence mDrawerTitle;

5. private CharSequence mTitle;

6. ...

7.  

8. @Override

9. publicvoid onCreate(Bundle savedInstanceState) {

10. super.onCreate(savedInstanceState);

11. setContentView(R.layout.activity_main);

12. ...

13.  

14. mTitle = mDrawerTitle = getTitle();

15. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

16. mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,

17. R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

18.  

19. /** Called when a drawer has settled in a completely closed state. */

20. publicvoid onDrawerClosed(View view) {

21. getActionBar().setTitle(mTitle);

22. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()

23. }

24.  

25. /** Called when a drawer has settled in a completely open state. */

26. publicvoid onDrawerOpened(View drawerView) {

27. getActionBar().setTitle(mDrawerTitle);

28. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()

29. }

30. };

31.  

32. // Set the drawer toggle as the DrawerListener

33. mDrawerLayout.setDrawerListener(mDrawerToggle);

34. }

35.  

36. /* Called whenever we call invalidateOptionsMenu() */

37. @Override

38. publicboolean onPrepareOptionsMenu(Menu menu) {

39. // If the nav drawer is open, hide action items related to the content view

40. boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);

41. menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);

42. returnsuper.onPrepareOptionsMenu(menu);

43. }

44. }

下一節描述ActionBarDrawerToggle構造函數參數和其他所需的步驟來設置它來處理工具欄的圖標.