xamarin学习笔记B04(ios的xib)

我不是女神ヾ 2022-06-04 03:40 275阅读 0赞

(每次学习一点xamarin就做个学习笔记和视频来加深记忆巩固知识)

如有不正确的地方，请帮我指正。

***XIB简介***

Xib和storyboard一样，都是用来描述界面的，本质都是XML，但XIB比storyboard要轻量。从下两张图对比可看出（右边是xib的）

![SouthEast][]

个人觉得XIB有点类似winform中的用户控件，有点类似于android中的Fragment。如果一个界面中的某一块界面是相对独立的或者在多个界面都要用到，那么可以使用XIB。

***XIB的创建***

打开VisualStudio，新建一个IOS项目后，然后新建文件时可以选“视图”或“空用户界面”，前者默认创建了一个VIEW。

![SouthEast 1][]

创建完后，在属性中设置Class为MyView

![SouthEast 2][]

回车后，在解决方案中会自动创建一个MyView.cs文件，它关联着此XIB文件，用来专门管理这个XIB文件，我们可以在代码中来进行相关处理，如创建此XIB对象等。

![SouthEast 3][]

打开这个XIB文件，在属性面板中设置Size为Freeform，设置背景色为Cyan，再在MyView这个默认的视图内添加一个红色的视图view1，再添加一个和MyView并列的控件Switch,如下图：

![SouthEast 4][]

***XIB的使用***

打开MyView.cs文件，创建相关代如下：

public partial class MyView : UIView  
    \{   
        //自定义一个静态方法供外部创建这个MyView  
        public static MyView Create()  
        \{   
            //加载MyView.xib  
            var arr = NSBundle.MainBundle.LoadNib("MyView", null, null);  
            //取出第一个view（XIB里面可以有多个并列的View）  
            var v = Runtime.GetNSObject<MyView>(arr.ValueAt(0));  
  
            return v;  
        \}  
  
        //XIB加载完毕后被调用  
        public override void AwakeFromNib()  
        \{   
            base.AwakeFromNib();  
            view1.Layer.CornerRadius = 30;//设置圆角半径  
        \}  
  
        //布局子控件时被调用  
        public override void LayoutSubviews()  
        \{   
            base.LayoutSubviews();  
            Console.WriteLine("MyView LayoutSubviews()");  
            //设置位置和宽高  
            this.Frame = new CGRect(0, 0, 340, 240);  
        \}  
    \}

接着打开ViewController.cs用如下代码去使用这个XIB：

public partial class ViewController : UIViewController  
    \{   
        private MyView myView;  
        public override void ViewDidLoad()  
        \{   
            base.ViewDidLoad();  
            myView = MyView.Create();  
            this.View.AddSubview(myView);  
        \}  
    \}

运行结果如下图：

![SouthEast 5][]

因为代码只显示了第一个视图，所以Switch控件没有显示。一个简单的XIB的创建和使用就是这样。

代码和视频在我上传的CSDN资源中 http://download.csdn.net/download/junshangshui/10143153

[SouthEast]: /images/20220604/50f80307797f4e3e995fadf6a79897ed.png
[SouthEast 1]: /images/20220604/48a7d960d48f434188b121ea395e3092.png
[SouthEast 2]: /images/20220604/85c0af854c484476b216c164db43de85.png
[SouthEast 3]: /images/20220604/9be7f3d7bf0c4e8094d528409d877d2c.png
[SouthEast 4]: /images/20220604/a40b6d39336b46228cb90c6c0d1f55f6.png
[SouthEast 5]: /images/20220604/da2869d9fda440fe934e020e9ceda4e4.png