Повторное использование uiview xib в раскадровке


обычно мне нравится создавать и проектировать свои uiviews в interface builder. Иногда мне нужно создать один вид в xib, который можно повторно использовать в нескольких контроллерах вида в раскадровке.

5 65

5 ответов:

повторное использование и визуализация xib в раскадровке.

протестировано с Swift 2.2 & Xcode 7.3.1

1 ---- Создайте новый UIView с именем 'DesignableXibView'

  • Файл > Создать > Файл > Источник > Какао-Сенсорный Класс > Наследник UIView

2 ---- Создайте соответствующий xib-файл с именем 'DesignableXibView'

  • File > New > File > User Interface > View

3 ---- Установите владельца файла xib

  1. выберите xib
  2. выберите файл
  3. установите пользовательский класс В "DesignableXibView" в Инспекторе идентификации.

Setting a Xib's Owner to a Custom Class

  • Примечание: не устанавливайте пользовательский класс представления о xib. Только владелец файла!

4 ---- реализация DesignableXibView

//  DesignableXibView.swift

import UIKit

@IBDesignable

class DesignableXibView: UIView {

    var contentView : UIView?

    override init(frame: CGRect) {
        super.init(frame: frame)
        xibSetup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        xibSetup()
    }

    func xibSetup() {
        contentView = loadViewFromNib()

        // use bounds not frame or it'll be offset
        contentView!.frame = bounds

        // Make the view stretch with containing view
        contentView!.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]

        // Adding custom subview on top of our view (over any custom drawing > see note below)
        addSubview(contentView!)
    }

    func loadViewFromNib() -> UIView! {

        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView

        return view
    }

}

5 ---- Проверьте свой повторно используемый вид в a раскадровка

  1. откройте раскадровку
  2. добавить вид
  3. установите пользовательский класс этого представления
  4. Подожди секунду ... бум!!

Xib Rendering Inside a Storyboard View Controller

новый! обновлен ответ с возможностью визуализации непосредственно в раскадровке (и быстрое!)

работает в Xcode 6.3.1

создайте новый UIView с именем 'ReuseableView'

  • Файл > Создать > Файл > Источник > Какао-Сенсорный Класс > Наследник UIView

создайте соответствующий xib файл с именем 'ReuseableView'

  • File > New > File > User Interface > Посмотреть

установите владельца файла xib

  1. выберите xib
  2. выберите владельца файла
  3. установите пользовательский класс В 'ReusableView' в Инспекторе идентификации. enter image description here

    • Примечание: не устанавливайте пользовательский класс представления о xib. Только владелец файла!

сделайте выход из вида в окне ReuseableView.xib к вашему ReuseableView.ч интерфейс

  1. Открыть Помощник Редактора
  2. управление + перетаскивание из вида в интерфейс

enter image description here

добавить реализацию initWithCoder для загрузки представления и добавить в качестве подвида.

- (id)initWithCoder:(NSCoder *)aDecoder{
    self = [super initWithCoder:aDecoder];
    if (self) {

        // 1. load the interface
        [[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:self options:nil];
        // 2. add as subview
        [self addSubview:self.view];
        // 3. allow for autolayout
        self.view.translatesAutoresizingMaskIntoConstraints = NO;
        // 4. add constraints to span entire view
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view]|" options:0 metrics:nil views:@{@"view":self.view}]];
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view]|" options:0 metrics:nil views:@{@"view":self.view}]];

    }
    return self;
}

enter image description here

проверьте свой повторно используемый вид в раскадровке

  1. откройте раскадровку
  2. добавить a посмотреть
  3. установите пользовательский класс этого представления

enter image description here

Run и наблюдаем! enter image description here

Swift 3&4 обновление до принятого ответа

1. Создайте новый UIView с именем 'DesignableXibView'

  • Файл > Создать > Файл > Источник > Какао-Сенсорный Класс > Наследник UIView

2. Создайте соответствующий xib-файл с именем 'DesignableXibView'

  • File > New > File > User Interface > View

3. Установить владельца файла из xib

выберите " DesignableXibView.владелец xib" > "файл" - > установить "пользовательский класс" для DesignableXibView на инспектора удостоверение.

  • Примечание: не устанавливайте пользовательский класс представления о xib. Только Владелец Файла!

4. Реализация DesignableXibView

    import UIKit

@IBDesignable

class DesignableXibView: UIView {

    var contentView : UIView!

    override init(frame: CGRect) {
        super.init(frame: frame)
        xibSetup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        xibSetup()
    }

    func xibSetup() {
        contentView = loadViewFromNib()

        // use bounds not frame or it'll be offset
        contentView.frame = bounds

        // Make the view stretch with containing view
        contentView.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]

        // Adding custom subview on top of our view (over any custom drawing > see note below)
        addSubview(contentView)
    }

    func loadViewFromNib() -> UIView! {

        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView

        return view
    }
} 

5 Проверьте свой многоразовый вид в раскадровке

  • откройте раскадровку

  • добавить вид

  • установите пользовательский класс этого представления

функция initWithCoder в swift 2, Если у кого-то возникли проблемы с ее переводом:

required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        UINib(nibName: String(self.dynamicType), bundle: NSBundle.mainBundle()).instantiateWithOwner(self, options: nil)
        self.addSubview(view)
        self.view.translatesAutoresizingMaskIntoConstraints = false
        self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[view]|", options: NSLayoutFormatOptions.AlignAllCenterY , metrics: nil, views: ["view": self.view]))
        self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[view]|", options: NSLayoutFormatOptions.AlignAllCenterX , metrics: nil, views: ["view": self.view]))
    }

Если кто-то заинтересован, вот Xamarin.прошивкой версия кода Шаг 4 из @Garfbargle

public partial class CustomView : UIView
    {
        public ErrorView(IntPtr handle) : base(handle)
        {

        }

        [Export("awakeFromNib")]
        public override void AwakeFromNib()
        {
            var nibObjects = NSBundle.MainBundle.LoadNib("CustomView", this, null);
            var view = (UIView)Runtime.GetNSObject(nibObjects.ValueAt(0));
            view.Frame = Bounds;
            view.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;

            AddSubview(rootView);
        }
    }