使用 Android Navigation Drawer 製作側選單 (2)

Navigation Drawer

本篇接續：使用 Android Navigation Drawer 製作側選單(1)
前面我們做到從螢幕左邊往右滑來開啟側選單，但是觸碰 ActionBar 的 App icon 時卻沒有任何反應，現在就來處理 App icon 的動作。很簡單，覆寫 onOptionsItemSelected 方法即可：

public boolean onOptionsItemSelected(MenuItem item) {

    //home
    if (drawerToggle.onOptionsItemSelected(item)) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

這樣當你觸碰 App icon 時就可以開關 drawer 了。

Action Buttons 事件

onOptionsItemSelected 這個方法同時也可以處理 Action button 的事件。首先，加入 action button 要用到的字串資源 strings.xml：

<string name="action_refresh">重新整理</string>
<string name="action_edit">編輯</string>
<string name="action_search">搜尋</string>
<string name="action_info">軟體資訊</string>

接著建立 res/menu/main.xml：

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/action_refresh"
        android:orderInCategory="1"
        android:showAsAction="ifRoom|withText"
        android:icon="@drawable/ic_launcher"
        android:title="@string/action_refresh"/>
    <item
        android:id="@+id/action_edit"
        android:orderInCategory="2"
        android:showAsAction="ifRoom|withText"
        android:title="@string/action_edit"/>
    <item
        android:id="@+id/action_info"
        android:orderInCategory="4"
        android:showAsAction="ifRoom|withText"
        android:title="@string/action_info"/>
    <item
        android:id="@+id/action_search"
        android:orderInCategory="3"
        android:showAsAction="ifRoom|withText"
        android:title="@string/action_search"/>

</menu>

參數說明：

• android:id：在 Activity 中可以用來判斷是否被點選。
• android:orderInCategory：選單的順序。若省略，會依 xml 中的順序呈現。
• android:showAsAction：在另一篇中有選項的說明，這裡我們讓它"位置夠用才顯示 | 同時顯示文字"。
• android:icon：圖示。
• android:title：選單的文字。

這裡我故意用到 4 個選單那麼多，並且第 3 個及第 4 個故意順序對換，但以 orderInCategory 來設定順序；來看看直式(空間不夠)，及橫式(空間足夠)時，Action Button 的不同顯示方式。

Portrait (直式)

Landscape (橫式)

空間不夠時，只會顯示 icon (若有)，並且擠不下的會在 overflow (3個點)裡出現。空間夠用當然就全部顯示。

最後在 Activity 中覆寫 onCreateOptionsMenu：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

就能讓 Action button 出現了。點選後的事件在 onOptionsItemSelected 中處理，在剛才的程式碼中加入 switch 的部份：

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    //home
    if (drawerToggle.onOptionsItemSelected(item)) {
        return true;
    }

    //action buttons
    switch (item.getItemId()) {
    case R.id.action_edit:
        //....
        break;

    case R.id.action_search:
        //....
        break;

    default:
        break;
    }

    return super.onOptionsItemSelected(item);
}

Drawer item 點選事件

最後，我們要讓側選單的項目被點選時，載入對應的內容，即 Fragment。這邊示範 3 個 Fragment，程式碼大同小異，其中一個示範如何接受傳過來的值。

FragmentApple.java

public class FragmentApple extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return initView(inflater, container);
    }

    private View initView(LayoutInflater inflater, ViewGroup container) {
        View view = inflater.inflate(R.layout.fragment_apple, container, false);

        return view;
    }

}

fragment_apple.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" >

    <TextView
        android:id="@+id/txtApple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Apple"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

簡單的顯示一個文字欄位。

和 FragmentBook.java 一樣，但 FragmentCat.java 多了接值的部份：

public class FragmentCat extends Fragment {

    public static final String CAT_COLOR = "cat_color";

    private String color = "";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        color = this.getArguments().getString(CAT_COLOR);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return initView(inflater, container);
    }

    private View initView(LayoutInflater inflater, ViewGroup container) {
        View view = inflater.inflate(R.layout.fragment_cat, container, false);

        TextView txtCat = (TextView) view.findViewById(R.id.txtCat);
        String colorCat = color + " " + txtCat.getText().toString();
        txtCat.setText(colorCat);

        return view;
    }

}

呼叫 getArguments() 來接值參數，然後 getXXX() 來取得該值。

MainActivity.java

回到 MainActivity 中，建立一個當側選單項目被點選時要做什麼的方法 selectItem()：

private void selectItem(int position) {
    Fragment fragment = null;

    switch (position) {
    case 0:
        fragment = new FragmentApple();
        break;

    case 1:
        fragment = new FragmentBook();
        break;

    case 2:
        fragment = new FragmentCat();
        Bundle args = new Bundle();
        args.putString(FragmentCat.CAT_COLOR, "Brown");
        fragment.setArguments(args);
        break;

    default:
        //還沒製作的選項，fragment 是 null，直接返回
        return;
    }

    FragmentManager fragmentManager = getFragmentManager();
    fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

    // 更新被選擇項目，換標題文字，關閉選單
    lstDrawer.setItemChecked(position, true);
    setTitle(drawer_menu[position]);
    layDrawer.closeDrawer(lstDrawer);
}

@Override
public void setTitle(CharSequence title) {
    mTitle = title;
    getActionBar().setTitle(mTitle);
}

參數 position 是被點選的那個項目的索引。依不同的索引，建立不同的 Fragment ，其中 FragmentCat 有傳值(一個字串)。最後就是把原本的 Fragment 換成被選擇的，同時更新 ActionBar 的標題並關閉側選單。

接著就是建立偵聽器，在接收到事件時呼叫 selectItem() 方法：

private class DrawerItemClickListener implements ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        selectItem(position);
    }
}

然後在 initDrawerList() 中指定給 lstDrawer：

//側選單點選偵聽器
lstDrawer.setOnItemClickListener(new DrawerItemClickListener());

大功告成!!

範例程式碼：https://github.com/tony915/NavigationDrawerDemo

-- (補充 2014/6/4) --

側選單加入圖示

建立新的 layout 給 ListView 用，drawer_list_item2.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" >

    <ImageView
        android:id="@+id/imgIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/txtItem"
        android:layout_alignTop="@+id/txtItem"
        android:padding="3dp"
        android:scaleType="fitCenter" />
    
 <TextView
     android:id="@+id/txtItem"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentTop="true"
     android:layout_toRightOf="@+id/imgIcon"
     android:padding="10dp"
     android:text="Item"
     android:textAppearance="?android:attr/textAppearanceMedium"
     android:textColor="#cccccc" />

</RelativeLayout>

只是把原本的 TextView 外面多加一個 Layout，這樣就可以多加一個 ImageView 進來。接著修改程式碼。原本使用的 ArrayAdapter，在這裡無法使用，必須改用 SimpleAdapter，或自己建立 BaseAdapter 來使用。修改後的 initDrawerList() 方法如下：

private void initDrawerList(){
  drawer_menu = this.getResources().getStringArray(R.array.drawer_menu);
//  ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.drawer_list_item, drawer_menu);
  
  List<HashMap<String,String>> lstData = new ArrayList<HashMap<String,String>>();
  for (int i = 0; i < 10; i++) {
   HashMap<String, String> mapValue = new HashMap<String, String>();
   mapValue.put("icon", Integer.toString(R.drawable.ic_launcher));
   mapValue.put("title", drawer_menu[i]);
   lstData.add(mapValue);
  }
  SimpleAdapter adapter = new SimpleAdapter(this, lstData, R.layout.drawer_list_item2, new String[]{"icon", "title"}, new int[]{R.id.imgIcon, R.id.txtItem});
  lstDrawer.setAdapter(adapter);
  
  //側選單點選偵聽器
  lstDrawer.setOnItemClickListener(new DrawerItemClickListener());
 }

這裡的 icon 圖檔，我只示範一個同樣的圖示，你可以換成一個陣列，數量和 drawer_menu 陣列一樣，這樣每個項目就會有自己的圖示，記得要把圖示的資源碼轉成字串。

結果如下：

-- (補充 at 2014/8/11) --

如何讓實體按鈕的 "Back" 返回上一頁

將

fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

改為

FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
  fragmentTransaction.replace(R.id.content_frame, fragment);
  fragmentTransaction.addToBackStack("home");
  fragmentTransaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
  fragmentTransaction.commit();

這樣就會將前一個 Fragment 保留至堆疊，但是按 Back 鍵到最後一個的時候，因為是 content_frame，會顯示空空的內容，所以必須加寫 Back 事件，讓堆疊的數量等於 0 時，關閉 App。

@Override
 public void onBackPressed() {
  super.onBackPressed();
  FragmentManager fragmentManager = this.getFragmentManager();
  int stackCount = fragmentManager.getBackStackEntryCount();
  if (stackCount == 0) {
   this.finish();
  }
 }

範例程式放在 GitHub 中的 NavigationDrawerDemo 。

參考資料

• http://developer.android.com/design/patterns/navigation-drawer.html
• http://developer.android.com/training/implementing-navigation/nav-drawer.html
• http://wptrafficanalyzer.in/blog/android-sidebar-navigation-drawer-with-icons/

本文網址：https://blog.tonycube.com/2014/02/android-navigation-drawer-2.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀