Xamarin.iOS 导航抽屉
-
创建新的 Xamarin.iOS 空白项目(Single View App)。
-
右键单击
Components
文件夹,然后选择获取更多组件: -
在搜索框中输入:
Flout Navigation
并将以下组件添加到你的应用中:
还记得添加“Mono.Touch.Dialog-1”参考:
-
现在紧紧点击项目并添加名为
NavigationDrawerController
的新 UIViewController: -
现在,
NavigationDrawerController
类的代码应如下所示:
public partial class NavigationDrawerController : UIViewController
{
public NavigationDrawerController(IntPtr handle) : base(handle)
{
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
NavigationItem.LeftBarButtonItem = getMenuItem();
NavigationItem.RightBarButtonItem = new UIBarButtonItem { Width = 40 };
}
UIBarButtonItem getMenuItem()
{
var item = new UIBarButtonItem();
item.Width = 40;
//Please provide your own icon or take mine from the GitHub sample:
item.Image = UIImage.FromFile("Images/menu_button@2x.png");
item.Clicked += (sender, e) =>
{
if (ParentViewController is MainNavigationController)
(ParentViewController as MainNavigationController).ToggleMenu();
};
return item;
}
}
不用担心 MainNavigationController
会突出显示为红色 - 我们将在下一步中添加它。
- 现在打开“Main.storyboard”文件:
a)添加一个 UIViewController:
使用以下名称填写 Class
和 StoryboardID
字段:FirstViewController
b)之后添加带有根 UIViewController 的 Navigation Controller:
使用以下名称填写 Class
和 StoryboardID
字段:导航控制器的 MainNavigationController
使用以下名称填写 Class
和 StoryboardID
字段:根控制器的 DetailsViewController
Xamarin(或 Visual)Studio 将为上述控制器创建代码隐藏类。
- 现在打开
FirstViewController
类并粘贴下面的代码:
public partial class FirstViewController : UIViewController
{
public FirstViewController (IntPtr handle) : base (handle)
{
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
createNavigationFlyout();
}
void createNavigationFlyout()
{
var navigation = new FlyoutNavigationController
{
//Here are sections definied for the drawer:
NavigationRoot = new RootElement("Navigation")
{
new Section ("Pages")
{
new StringElement ("MainPage")
}
},
//Here are controllers definied for the drawer (in this case navigation controller with one root):
ViewControllers = new[]
{
(MainNavigationController)Storyboard.InstantiateViewController("MainNavigationController")
}
};
View.AddSubview(navigation.View);
}
}
-
打开
MainNavigationController
类并粘贴下面的代码:public partial class MainNavigationController : UINavigationController { public MainNavigationController (IntPtr handle) : base (handle) { } //Responsible for opening/closing drawer: public void ToggleMenu() { if (ParentViewController is FlyoutNavigationController) (ParentViewController as FlyoutNavigationController).ToggleMenu(); } }
-
最后一个名为
DetailsViewController
的类应该如下所示:
public partial class DetailsViewController : NavigationDrawerController
{
public DetailsViewController (IntPtr handle) : base(handle)
{
}
}
请注意,DetailsViewController
派生自我们在开头创建的 NavigationDrawerController
。
而已。现在你可以根据需要自定义抽屉。还请在我的 GitHub 上找到准备好的样本:
https://github.com/Daniel-Krzyczkowski/XamarinIOS/tree/master/Xamarin.iOS.NavigationDrawer