Xamarin.Android之ActionBar與菜單

一、選項卡

如今很多應用都會使用碎片以便在同一個活動中能夠顯示多個不同的視圖。在Android 3.0 以上的版本中，我們已經可以使用ActionBar提供的Tab來實現這種效果，而不需要我們自己去實現碎片的切換。ActionBar默認是不具備選項卡功能的，所以我們需要給一個屬性賦上對應的枚舉，比如下面的方式將開啟選項卡。

ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;

開啟之后，我們就需要往ActionBar中添加Tab，當然這里我們不能直接new一個Tab而需要使用ActionBar的AddTab方法創建，然后設置對應的屬性，比如下面的方式將創建兩個選項卡。

            var tab = ActionBar.NewTab();
            tab.SetText("Tab1");
            tab.SetIcon(Resource.Drawable.Icon);
            var tab2 = ActionBar.NewTab();
            tab2.SetText("Tab2");
            tab2.SetIcon(Resource.Drawable.Icon);

我們利用選項卡的SetText設置選項卡的文本，通過SetIcon設置選項的圖片，比如下面這張圖。

我們只是實現了添加兩個選項卡，但是點擊之后是沒有任何效果的。所以我們還需要創建兩個碎片，以便在點擊不同的選項卡后能夠切換。首先我們在Resources/layout下分別新建Fragment1.axml和Fragment2.axml，其中的內容讀者可以自行設置，只要最后能夠區分的出來即可。

有了這些碎片，下面我們就可以監聽選項卡的點擊事件，從而切換不同的選項卡。首先我們需要將我們需要使用的碎片實例化。

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

然后監聽tab的事件。

            tab.TabSelected += (s, e) =>
            {
                if (!fragment1.IsAdded)
                {
                    e.FragmentTransaction.Add(Resource.Id.frameLayout1, fragment1);
                }
                if (fragment2.IsAdded && !fragment2.IsHidden)
                {
                    e.FragmentTransaction.Hide(fragment2);
                }
                e.FragmentTransaction.Show(fragment1);
            };

因為筆者原本從事過java下的android開發，所以這里還是沿用了java下的方式，首先是判斷fragment1是否添加進去了，如果沒有則添加，然后又判斷了fragment2是否添加，並且是否已經顯示，如果顯示則隱藏。最后才顯示fragment1。同理tab2的方式也是一樣的，只是fragment1與fragment2互調。最后通過ActionBar的AddTab添加選項卡，這樣做還沒有結束，我們還要默認選項第一個選項卡，這里需要通過ActionBar的SelectTab方法設置。下面是活動中的所有代碼。

    [Activity(Label = "ActionBarStudy", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        Fragment fragment1;
        Fragment fragment2;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            ActionBar.NavigationMode = ActionBarNavigationMode.Tabs;

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

            var tab = ActionBar.NewTab();
            tab.SetText("Tab1");
            tab.SetIcon(Resource.Drawable.Icon);
            var tab2 = ActionBar.NewTab();
            tab2.SetText("Tab2");
            tab2.SetIcon(Resource.Drawable.Icon);

            tab.TabSelected += (s, e) =>
            {
                if (!fragment1.IsAdded)
                {
                    e.FragmentTransaction.Add(Resource.Id.frameLayout1, fragment1);
                }
                if (fragment2.IsAdded && !fragment2.IsHidden)
                {
                    e.FragmentTransaction.Hide(fragment2);
                }
                e.FragmentTransaction.Show(fragment1);
            };
            


            tab2.TabSelected += (s, e) =>
            {
                if (!fragment2.IsAdded)
                {
                    e.FragmentTransaction.Add(Resource.Id.frameLayout1, fragment2);
                }
                if (fragment1.IsAdded && !fragment1.IsHidden)
                {
                    e.FragmentTransaction.Hide(fragment1);
                }
                e.FragmentTransaction.Show(fragment2);
            };

            ActionBar.AddTab(tab);
            ActionBar.AddTab(tab2);

            ActionBar.SelectTab(tab);
        }
}

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

 

選擇TAB2后的結果。

 

 

 

 

 

二、菜單

說道菜單我們可以看下下面的圖片。

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

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

 

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

但是我們點擊這個菜單並不會發生什么，因為我們還沒有對這個菜單進行響應。跟創建菜單一樣，響應菜單也需要通過重寫一個方法實現，這樣我們就需要通過判斷的菜單的id來區分哪個菜單被點擊了，比如下面我們將響應上面的菜單並彈出提示。

        public override bool OnOptionsItemSelected(IMenuItem item)
        {
            switch (item.ItemId)
            {
                case 1:
                    {
                        Toast.MakeText(this, "測試1被按下", ToastLength.Short).Show();
                    }
                    break;
            }
            return base.OnOptionsItemSelected(item);
        }

菜單的id最終是存放在ItemId屬性中的，所以我們就需要switch這個屬性。下面我們點擊這個菜單就能夠看到提示信息了。如果你想將這個菜單設置到ActionBar的右邊其實很簡單，只要通過SetShowAsActionFlags即可，比如下面的代碼將把菜單設置到ActionBar的右。

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

接着我們就可以看到如下的結果了。

當然對應的事件並不會消失，最后我們需要設置一個圖片，這個就更簡單了，相信很多人都可以猜出，就是通過SetIcon方法。

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

 

最后我們回到之前所說的分組，到底能夠干什么用，他可以讓我們呈現出單選、多選形式的菜單。主要是通過SetGroupCheckable方法設置，比如下面的方法將呈現單選形式。

        public override bool OnCreateOptionsMenu(IMenu menu)
        {
            var m1 = menu.Add(0, 1, 0, "測試1");
            var m2 = menu.Add(0, 2, 0, "測試2");
            var m3 = menu.Add(0, 3, 0, "測試3");

            menu.SetGroupCheckable(0, true, true);
            return base.OnCreateOptionsMenu(menu);
        }

 

如圖。

如果我們將SetGroupCheckable方法的最后一個參數設置為false將會變為多選形式。

最后就是子菜單，最終的效果就是我們點擊一個菜單后將會以彈窗的方式呈現它的子菜單，這里我們只需要將Add改成AddSubMenu即可創建子菜單。

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

然后我們點擊子菜單將會出現如下結果。