2014年10月28日 星期二

[Android] Navigation Drawer的使用(簡易)

如果有看過Facebook app左側或右側可以拉出來的側邊欄, 那麼你已經看過Navigation Drawer了

不過在實際使用上不是那麼的容易(不然就不用寫教學了), 這邊我也研究了兩次,第一次失敗(覺

得太複雜就先做別的),第二次也就是這次才成功。決定把這個有點難的功能寫下來,當然也不

能說是全部都搞懂,就是把會的寫下來,以免以後忘掉。


這個是完成圖-也就是在手機上左側往右邊拉會出現這樣

的ListView選單。要多少選項可以自行調整(超過螢幕的

長度我就沒有測試了),選項一從編號0開始(所以用switch

case 搭配抓取該item的position就可以應用了)

















已經大概把Navigation Drawer大概介紹完了(詳細介紹可以找網路),先上程式碼:

(程式碼是下載 TonyCube來修改的)

Step1:

private void InitDrawer(){

fragmentManager = getFragmentManager();

layDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
lstDrawer = (ListView) findViewById(R.id.lst_drawer);

layDrawer.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);

mTitle = mDrawerTitle = getTitle();
drawerToggle = new ActionBarDrawerToggle(
this,
layDrawer,
R.drawable.ic_drawer,
R.string.drawer_open,
R.string.drawer_close) {

@Override
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
//getActionBar().setTitle(mTitle);
      //這邊可以改string內容,關閉時上方標題會改變,如果沒有要標題就不能用這一行
}

@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
//getActionBar().setTitle(R.string.drawer_open);
//這邊可以改string內容,開啟時上方標題會改變,如果沒有要標題就不能用這一行
}
};
drawerToggle.syncState();

layDrawer.setDrawerListener(drawerToggle);
}

首先一定是初始化,因此你需要宣告:

   private ActionBarDrawerToggle drawerToggle;
   private CharSequence mDrawerTitle;
   private CharSequence mTitle;
   private String[] drawer_menu;

以免等等會出現錯誤。

findByViewId的部分就是讓程式知道你要的那個元件是在xml裡面的哪一個,

setDrawerShadows的部分很明顯的就是設定陰影(這邊我沒有修改)

mTitle/Title的部分,如果你前面有設定隱藏title,那麼請把這一行+下面setTitle註解掉,因為會出錯

onDrawerOpen/onDrawerClose就是當側邊欄被拉開時/關閉時的動作,裡面可以自由發揮

setDrawerListener就是設一個監聽器,可以隨時抓取動作


Step2:

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>>();
//多少個item@String Array => for跑幾次
for (int i = 0; i <drawer_menu.length; 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());
}

這部分是在設定選項,你有多少個選項for就跑多少次(當然在res-value-Strings-StringArray裡面要

先設定好),旁邊圖示我沒有使用,當然要使用的話也是可以就把mapValue那一行重新恢復即

可。一樣設定監聽器,讓使用者點選時可以馬上反應。

Step3:

 private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    }
   
private void selectItem(int position) {
        Fragment fragment = null;
        FragmentTransaction fragmentTransaction;
        switch (position) {
case 0:
fragment = new Config();
//layDrawer.closeDrawer(lstDrawer);
info_txv.setVisibility(View.INVISIBLE);
main_txv.setVisibility(View.INVISIBLE);
imageView.setVisibility(View.INVISIBLE);
       fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.Linear_left_drawer, fragment);
fragmentTransaction.addToBackStack(null);
fragmentTransaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
fragmentTransaction.commit();
break;

case 1:
InitPopup_IP_setting();

break;

case 2:
Self_Test();
break;

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

        layDrawer.closeDrawer(lstDrawer);
    }

這部分監聽器會監聽使用者點選哪個item,會收到position是哪一個,然後再使用selectItem這個函

式處理,這邊使用switch...case。第一個選項是使用一個fragment去取代目前的fragment,由於

fragmentTransaction.addToBackStack(null)無法回去到原本的fragment,因此這個選項有回不去的

風險,請小心使用。第二個選項這邊是設定AlertDialog(),跟NavigationDrawer不相關,不重要因此

就不贅述,第三個選項亦同,default,或是任何你還沒設定的選項請使用return而不是break,否則就

會看到你的app掛點。最後記得要使用closeDrawer()來關閉NavigationDrawer。



NavigationDrawer大概就是這幾部分,然後如果要新增一個頁面(就是讓你點選一個選項會跳到

另一個頁面)的話,在res-layout這邊新增一個xml檔,在src裡面新增一個java檔*如下圖



這樣就可以連結囉!


以上就是NavigationDraw的小心得。 End