Xamarin.Android開發實踐（九）

原文:Xamarin.Android開發實踐（九）

Xamarin.Android之ActionBar與菜單

1、選項卡

現在不少應用都會使用碎片以便在同一個活動中可以顯示多個不一樣的視圖。在 Android 3.0 以上的版本中，咱們已經可使用ActionBar提供的Tab來實現這種效果，而不須要咱們本身去實現碎片的切換。ActionBar默認是不具有選項 卡功能的，因此咱們須要給一個屬性賦上對應的枚舉，好比下面的方式將開啓選項卡。

1 ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;

開啓以後，咱們就須要往ActionBar中添加Tab，固然這裏咱們不能直接new一個Tab而須要使用ActionBar的AddTab方法建立，而後設置對應的屬性，好比下面的方式將建立兩個選項卡。

1             var tab = ActionBar.NewTab(); 2 tab.SetText("Tab1"); 3  tab.SetIcon(Resource.Drawable.Icon); 4 var tab2 = ActionBar.NewTab(); 5 tab2.SetText("Tab2"); 6 tab2.SetIcon(Resource.Drawable.Icon);

咱們利用選項卡的SetText設置選項卡的文本，經過SetIcon設置選項的圖片，好比下面這張圖。

咱們只是實現了添加兩個選項卡，可是點擊以後是沒有任何效果的。因此咱們還須要建立兩個碎片，以便在點擊不一樣的選項卡後可以切換。首先咱們在Resources/layout下分別新建Fragment1.axml和Fragment2.axml，其中的內容讀者能夠自行設置，只要最後可以區分的出來便可。

有了這些碎片，下面咱們就能夠監聽選項卡的點擊事件，從而切換不一樣的選項卡。首先咱們須要將咱們須要使用的碎片實例化。

1             fragment1 = new Fragment1(); 2 fragment2 = new Fragment2();

而後監聽tab的事件。

 1             tab.TabSelected += (s, e) =>
 2  {  3 if (!fragment1.IsAdded)  4  {  5  e.FragmentTransaction.Add(Resource.Id.frameLayout1, fragment1);  6  }  7 if (fragment2.IsAdded && !fragment2.IsHidden)  8  {  9  e.FragmentTransaction.Hide(fragment2); 10  } 11  e.FragmentTransaction.Show(fragment1); 12 };

由於筆者本來從事過java下的android開發，因此這裏仍是沿用了java下的方式，首先是判斷fragment1是否添加進去了，若是沒有則添加，而後又判斷了fragment2是否添加，而且是否已經顯示，若是顯示則隱藏。最後才顯示fragment1。同理tab2的方式也是同樣的，只是fragment1與fragment2互調。最後經過ActionBar的AddTab添加選項卡，這樣作尚未結束，咱們還要默認選項第一個選項卡，這裏須要經過ActionBar的SelectTab方法設置。下面是活動中的全部代碼。

 1     [Activity(Label = "ActionBarStudy", MainLauncher = true, Icon = "@drawable/icon")]  2 public class MainActivity : Activity  3  {  4  Fragment fragment1;  5  Fragment fragment2;  6  7 protected override void OnCreate(Bundle bundle)  8  {  9 base.OnCreate(bundle); 10  SetContentView(Resource.Layout.Main); 11 ActionBar.NavigationMode = ActionBarNavigationMode.Tabs; 12 13 fragment1 = new Fragment1(); 14 fragment2 = new Fragment2(); 15 16 var tab = ActionBar.NewTab(); 17 tab.SetText("Tab1"); 18  tab.SetIcon(Resource.Drawable.Icon); 19 var tab2 = ActionBar.NewTab(); 20 tab2.SetText("Tab2"); 21  tab2.SetIcon(Resource.Drawable.Icon); 22 23 tab.TabSelected += (s, e) => 24  { 25 if (!fragment1.IsAdded) 26  { 27  e.FragmentTransaction.Add(Resource.Id.frameLayout1, fragment1); 28  } 29 if (fragment2.IsAdded && !fragment2.IsHidden) 30  { 31  e.FragmentTransaction.Hide(fragment2); 32  } 33  e.FragmentTransaction.Show(fragment1); 34  }; 35 36 37 38 tab2.TabSelected += (s, e) => 39  { 40 if (!fragment2.IsAdded) 41  { 42  e.FragmentTransaction.Add(Resource.Id.frameLayout1, fragment2); 43  } 44 if (fragment1.IsAdded && !fragment1.IsHidden) 45  { 46  e.FragmentTransaction.Hide(fragment1); 47  } 48  e.FragmentTransaction.Show(fragment2); 49  }; 50 51  ActionBar.AddTab(tab); 52  ActionBar.AddTab(tab2); 53 54  ActionBar.SelectTab(tab); 55  } 56 }

最後是實際的運行結果圖。

 

選擇TAB2後的結果。

 

 

 

 

 

2、菜單

說道菜單咱們能夠看下下面的圖片。

其中右上角和底部都屬於菜單，而下面的內容咱們將學習如何建立這些菜單，而且響應 這些菜單。首先咱們先建立最簡單的菜單，就是上圖中底部的菜單。可是菜單的建立跟上節的選項卡建立的方式是不同的，不能隨便在任何地方添加，咱們必須重 寫特定的方法，經過這個方法提供的參數建立菜單，而這個方法就是OnCreateOptionsMenu，其中有一個名爲menu的參數，而咱們就須要經過這個參數去建立菜單，下面咱們建立一個簡單的菜單。

1         public override bool OnCreateOptionsMenu(IMenu menu) 2  { 3 var m1 = menu.Add(0, 1, 0, "測試1"); 4 return base.OnCreateOptionsMenu(menu); 5 }

 

咱們須要經過add方法添加菜單，而它的第一個參數是用來分組的，而第二個是菜單的id，主要是後面用來響應菜單的點擊，第三個是菜單的位置，最後就是菜單的名稱了。運行上面的程序咱們將能夠看到以下所示的結果。

可是咱們點擊這個菜單並不會發生什麼，由於咱們尚未對這個菜單進行響應。跟建立菜單同樣，響應菜單也須要經過重寫一個方法實現，這樣咱們就須要經過判斷的菜單的id來區分哪一個菜單被點擊了，好比下面咱們將響應上面的菜單並彈出提示。

 1         public override bool OnOptionsItemSelected(IMenuItem item)  2  {  3 switch (item.ItemId)  4  {  5 case 1:  6  {  7 Toast.MakeText(this, "測試1被按下", ToastLength.Short).Show();  8  }  9 break; 10  } 11 return base.OnOptionsItemSelected(item); 12 }

菜單的id最終是存放在ItemId屬性中的，因此咱們就須要switch這個屬性。下面咱們點擊這個菜單就可以看到提示信息了。若是你想將這個菜單設置到ActionBar的右邊其實很簡單，只要經過SetShowAsActionFlags便可，好比下面的代碼將把菜單設置到ActionBar的右。

1         public override bool OnCreateOptionsMenu(IMenu menu) 2  { 3 var m1 = menu.Add(0, 1, 0, "測試1"); 4 m1.SetShowAsActionFlags(ShowAsAction.IfRoom | ShowAsAction.WithText); 5 return base.OnCreateOptionsMenu(menu); 6 }

接着咱們就能夠看到以下的結果了。

固然對應的事件並不會消失，最後咱們須要設置一個圖片，這個就更簡單了，相信不少人均可以猜出，就是經過SetIcon方法。

1         public override bool OnCreateOptionsMenu(IMenu menu) 2  { 3 var m1 = menu.Add(0, 1, 0, "測試1"); 4 m1.SetShowAsActionFlags(ShowAsAction.IfRoom | ShowAsAction.WithText); 5  m1.SetIcon(Resource.Drawable.Icon); 6 return base.OnCreateOptionsMenu(menu); 7 }

 

最後咱們回到以前所說的分組，到底可以幹什麼用，他可讓咱們呈現出單選、多選形式的菜單。主要是經過SetGroupCheckable方法設置，好比下面的方法將呈現單選形式。

1         public override bool OnCreateOptionsMenu(IMenu menu) 2  { 3 var m1 = menu.Add(0, 1, 0, "測試1"); 4 var m2 = menu.Add(0, 2, 0, "測試2"); 5 var m3 = menu.Add(0, 3, 0, "測試3"); 6 7 menu.SetGroupCheckable(0, true, true); 8 return base.OnCreateOptionsMenu(menu); 9 }

 

如圖。

若是咱們將SetGroupCheckable方法的最後一個參數設置爲false將會變爲多選形式。

最後就是子菜單，最終的效果就是咱們點擊一個菜單後將會以彈窗的方式呈現它的子菜單，這裏咱們只須要將Add改爲AddSubMenu便可建立子菜單。

1         public override bool OnCreateOptionsMenu(IMenu menu) 2  { 3 var m1 = menu.AddSubMenu("子菜單"); 4 m1.AddSubMenu("子菜單1"); 5 m1.AddSubMenu("子菜單2"); 6 return base.OnCreateOptionsMenu(menu); 7 }

而後咱們點擊子菜單將會出現以下結果。