使用 xib 创建自定义视图 [英] Creating a custom view using a xib

问题描述

使用 MonoTouch，我尝试创建自定义视图，以便我可以在屏幕中多次重复使用该视图.(这是一堆标签和按钮)阅读这篇文章的答案后:如何添加自定义视图到单点触摸中的 XIB 文件定义视图我必须接近，但这似乎只允许我添加在 myCustomView.CS 中定义的自定义视图，但我正在寻找的是一种使用单独的 .XIB 在界面中设计我的自定义视图的方法builder 并且只使用相应的 cs-file 来添加逻辑.如果我尝试创建同名的 XIB，内容将不可见.

Using MonoTouch, I'm trying to make a custom view, so I can reuse this view multiple times in a screen. (it's a bunch of labels and buttons) After reading the answer to this post: How to add a custom view to a XIB file defined view in monotouch I must be getting close, but this only seems to allow me to add a custom view, defined in in myCustomView.CS, but what I'm looking for is a way to use a separate .XIB to design my custom view in the interface builder and only use the corresponding cs-file to add logic. If I try to make a XIB with the same name, the contents won't become visible.

以下步骤:

• 在 MyCustomView.CS 中，我放置了 [Register("MyCustomView")] .

我实现了构造函数 public MyView(IntPtr handle) : base(handle) {}

在 Interface Builder 中打开 ViewController.XIB，添加一个 UIView 并将它的 Class 设置为 MyCustomView.

Open ViewController.XIB in Interface Builder, add a UIView and set it's Class to MyCustomView.

当我运行这段代码时，我看到了新添加的 UIView，但没有看到视图内部的元素，即 MyCustomView.XIB 的内容

When I run this code, I see the newly added UIView, but not the elements inside of the view, i.e. the contents of MyCustomView.XIB

如果我在 MyCustomView.CS 的代码中添加一些东西，比如 this.Backgroundcolor = UIColor.Blue; 这会显示，但添加到 .XIB 的任何元素都不会.我如何告诉 Monotouch 显示 MyCustomView.XIB 中定义的所有内容?

If I add something to the code of MyCustomView.CS, like this.Backgroundcolor = UIColor.Blue; this is displayed, but any elements added to the .XIB are not. How do I tell Monotouch to display all the stuff defined inside MyCustomView.XIB?

在 Objective-C 示例中，我看到诸如initWithNib"之类的东西不幸的是，Monotouch api 中没有记录LoadNib"部分，但这听起来是我应该做的，但是如何以及在哪里做?

In Objective-C samples I see stuff like "initWithNib" Unfortunately the "LoadNib" section is not documented in in the Monotouch api, but that sounds like something I should do, but how and where?

推荐答案

一个非常非常好的问题，但更多的是关于 XIB 的工作原理以及我们可以做些什么.

A very very nice question, but it is more about how XIBs work and what we can do about it.

问题是，当您将对象添加到 XIB 并将其设置为自定义类时，您只需指示 UIKit 创建此对象的实例.您在 IB 中看到的作为视图、按钮或任何控件的事实正是 IB 为您绘制它的方式.这样，创建前景的责任就完全落在了您的班级身上.

The issue is when you add an object to a XIB and set it to be of a custom class, you just instruct the UIKit to create an instance of this object. The fact you see in IB as a view, a button or a whateverish control is just how IB draws it for you. This way the responsibility for creating the outlook falls completely on your class.

在Objective-C中，我们可以通过设置添加视图的类名来实现具有自定义视图的XIB，并且仍然将它们添加到IB中.这是可能的，因为您可以在 Objective-C 中从类的 -init 方法返回任何实例，而这在 C# 中是不可能的.

In Objective-C we can do a nice cheat to have XIBs with custom views and still add them to IB by setting the class name of the added view. This is possible because you can return any instance from the -init method of your class in Objective-C, which is not possible with C#.

但是，您仍然可以通过执行以下操作来减轻生活负担:

However, you can still ease your life by doing the following:

1. 让我们将 XIB 定义为包含自定义视图内容的 XIB；放置成为您想要添加自定义视图的 XIB.
2. 创建自定义视图类和一个 XIB 来放置它的内部
3. 处理 AwakeFromNib 方法以实际加载您的 XIB
4. 加载您的 XIB 后，只需将其内部结构作为子视图添加到您的实例中.
5. 放置一个常规视图并将其类设置为您自己的放置
6. 享受吧！

1. Let's define XIB to be a XIB which contains your custom view's content; Placement to be a XIB where you want to add you custom view.
2. Create you custom view class and a XIB to lay the internals of it
3. Handle AwakeFromNib method to actually load your XIB
4. After having loaded your XIB just add the internals of it to your instance as subviews.
5. Put a regular view and set it class to your own into Placement
6. Enjoy!

但是，您必须接受您的 XIB 将包含根视图或其他内容，这些视图将作为子视图添加到您的类实例中，放入放置.

You have, however, to accept that your XIB would contain a root view or something, which would be added as a subview onto the instance of your class put into Placement.

这样，你应该有类似的东西:

This way, you should have something like:

带有自定义视图内容的 XIB:

XIB with your custom view contents:

添加 XIB 的位置:

Placement where you add your XIB:

由于添加到您的展示位置的视图实例与您的 XIB 中的文件所有者相同，您可以在 XIB 和展示位置中设置出口和操作.只是不要忘记您的 XIB 中的根视图不是 UIKit 将创建以放置到 Placement 中的实例.

As the view instance added to your placement is the same as File Owner in your XIB you can set outlets and actions in both XIB and Placement. Just don't forget you root view in your XIB is not the instance UIKit will create to place into Placement.

为了方便起见，请在下面找到我的代码，它是简化此类视图创建的基类:

For convenience purposes, please find my code below which is base class to ease the creation of such views:

using System;

using MonoTouch.ObjCRuntime;
using MonoTouch.Foundation;
using MonoTouch.UIKit;

namespace Member.iOS.Base.Views {

    /// <summary>
    /// XibView is a Xib-backed UIView subclass which enables easy customization and custom
    /// behavior addition.
    /// </summary>
    public class XibView : UIView {

        /// <summary>
        /// Exception thrown when a loaded XIB doesn't contain any views inside it.
        /// </summary>
        class EmptyXibException : Exception {
        }

        /// <summary>
        /// Initializes a new instance of the <see cref="Member.iOS.Base.Views.XibView"/> class.
        /// </summary>
        /// <param name='handle'>
        /// Handle.
        /// </param>
        public XibView(IntPtr handle) : base(handle) {
        }

        /// <summary>
        /// Upon loading from a containing XIB, takes care of replacing the current instance (which acts as a stab) with
        /// a real view loaded from its XIB.
        /// </summary>
        public override void AwakeFromNib() {
            base.AwakeFromNib();

            NSArray views = NSBundle.MainBundle.LoadNib(GetType().Name, this, new NSDictionary());

            if (views.Count == 0) {
                throw new EmptyXibException();
            }

            UIView rootView = Runtime.GetNSObject(views.ValueAt(0)) as UIView;
            rootView.Frame = new System.Drawing.RectangleF(0, 0, Frame.Width, Frame.Height);
            AddSubview(rootView);
        }

    }
}

这篇关于使用 xib 创建自定义视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！