ฉันกำลังสร้างแอพที่จะมีตัวจับเวลาหลายตัวซึ่งโดยพื้นฐานแล้วจะเหมือนกันทั้งหมด

ฉันต้องการสร้างคลาสแบบกำหนดเองที่ใช้โค้ดทั้งหมดสำหรับตัวจับเวลาตลอดจนเค้าโครง / ภาพเคลื่อนไหวดังนั้นฉันจึงมีตัวจับเวลาที่เหมือนกัน 5 ตัวที่ทำงานแยกกัน

ฉันสร้างเลย์เอาต์โดยใช้ IB (xcode 4.2) และโค้ดทั้งหมดสำหรับตัวจับเวลาขณะนี้อยู่ในคลาส viewcontroller

ฉันมีปัญหาในการห่อสมองของฉันเกี่ยวกับวิธีการห่อหุ้มทุกอย่างลงในคลาสที่กำหนดเองแล้วเพิ่มลงในตัวควบคุมมุมมองความช่วยเหลือใด ๆ จะได้รับการชื่นชมมาก

ดีที่จะตอบแนวคิดเวลาของคุณมีแนวโน้มที่ควรจะเป็น subclass ของแทนUIViewNSObject

ในการสร้างอินสแตนซ์ของตัวจับเวลาของคุณใน IB เพียงแค่ลากตัวจับเวลาออกจากUIViewมุมมองของตัวควบคุมมุมมองของคุณและตั้งค่าคลาสเป็นชื่อคลาสของตัวจับเวลาของคุณ

อย่าลืม#importคลาสจับเวลาของคุณในตัวควบคุมมุมมองของคุณ

แก้ไข: สำหรับการออกแบบ IB (สำหรับการสร้างอินสแตนซ์โค้ดดูประวัติการแก้ไข)

ฉันไม่ค่อยคุ้นเคยกับสตอรีบอร์ด แต่ฉันรู้ว่าคุณสามารถสร้างอินเทอร์เฟซของคุณใน IB โดยใช้.xibไฟล์ที่เกือบจะเหมือนกับการใช้สตอรีบอร์ดเวอร์ชัน คุณควรจะสามารถคัดลอกและวางมุมมองของคุณโดยรวมจากอินเทอร์เฟซที่คุณมีอยู่ไปยัง.xibไฟล์

เพื่อทดสอบสิ่งนี้ฉันได้สร้างช่องว่างใหม่.xibชื่อ "MyCustomTimerView.xib" จากนั้นฉันก็เพิ่มมุมมองและเพิ่มป้ายกำกับและปุ่มสองปุ่ม ชอบมาก:

ฉันสร้างคลาสย่อยUIViewObject -C คลาสใหม่ชื่อ "MyCustomTimer" ในของฉัน.xibฉันจะตั้งค่าของฉันเจ้าของไฟล์ของระดับที่จะMyCustomTimer ตอนนี้ฉันมีอิสระที่จะเชื่อมต่อการกระทำและร้านค้าเช่นเดียวกับมุมมอง / ตัวควบคุมอื่น ๆ ส่งผลให้.hไฟล์มีลักษณะเช่นนี้

@interface MyCustomTimer : UIView
@property (strong, nonatomic) IBOutlet UILabel *displayLabel;
@property (strong, nonatomic) IBOutlet UIButton *startButton;
@property (strong, nonatomic) IBOutlet UIButton *stopButton;
- (IBAction)startButtonPush:(id)sender;
- (IBAction)stopButtonPush:(id)sender;
@end

สิ่งกีดขวางเดียวที่เหลือในการกระโดดคือการได้รับสิ่งนี้.xibในUIViewคลาสย่อยของฉัน การใช้.xibการตั้งค่าที่จำเป็นต้องลดลงอย่างมาก และเนื่องจากคุณใช้สตอรีบอร์ดเพื่อโหลดตัวจับเวลาเราจึงทราบว่า-(id)initWithCoder:เป็นตัวเริ่มต้นเพียงตัวเดียวที่จะถูกเรียก นี่คือลักษณะของไฟล์การนำไปใช้งาน:

#import "MyCustomTimer.h"
@implementation MyCustomTimer
@synthesize displayLabel;
@synthesize startButton;
@synthesize stopButton;
-(id)initWithCoder:(NSCoder *)aDecoder{
    if ((self = [super initWithCoder:aDecoder])){
        [self addSubview:
         [[[NSBundle mainBundle] loadNibNamed:@"MyCustomTimerView" 
                                        owner:self 
                                      options:nil] objectAtIndex:0]];
    }
    return self;
}
- (IBAction)startButtonPush:(id)sender {
    self.displayLabel.backgroundColor = [UIColor greenColor];
}
- (IBAction)stopButtonPush:(id)sender {
    self.displayLabel.backgroundColor = [UIColor redColor];
}
@end

เมธอดที่ตั้งชื่อloadNibNamed:owner:options:ทำสิ่งที่ดูเหมือนเป็นอย่างนั้น มันโหลด Nib และตั้งค่าคุณสมบัติ "File's Owner" เป็น self เราแยกออบเจ็กต์แรกในอาร์เรย์และนั่นคือมุมมองรูทของ Nib เราเพิ่มมุมมองเป็นมุมมองย่อยและ Voila อยู่บนหน้าจอ

เห็นได้ชัดว่านี่เป็นเพียงการเปลี่ยนสีพื้นหลังของป้ายกำกับเมื่อกดปุ่ม แต่ตัวอย่างนี้จะช่วยให้คุณเดินทางได้ดี

หมายเหตุตามความคิดเห็น:

เป็นที่น่าสังเกตว่าหากคุณได้รับปัญหาการเรียกซ้ำแบบไม่สิ้นสุดคุณอาจพลาดเคล็ดลับเล็กน้อยของวิธีแก้ปัญหานี้ มันไม่ได้ทำอย่างที่คุณคิด มุมมองที่ใส่ในสตอรีบอร์ดจะไม่เห็น แต่จะโหลดมุมมองอื่นเป็นมุมมองย่อยแทน มุมมองที่โหลดคือมุมมองที่กำหนดไว้ในปลายปากกา "เจ้าของไฟล์" ในปลายปากกาคือมุมมองที่มองไม่เห็น ส่วนที่น่าสนใจคือมุมมองที่มองไม่เห็นนี้ยังคงเป็นคลาส Objective-C ซึ่งอาจใช้เป็นตัวควบคุมมุมมองประเภทต่างๆสำหรับมุมมองที่นำเข้ามาจากปลายปากกา ตัวอย่างเช่นIBActionวิธีการในMyCustomTimerคลาสเป็นสิ่งที่คุณคาดหวังในตัวควบคุมมุมมองมากกว่าในมุมมอง

ตามหมายเหตุด้านข้างบางคนอาจโต้แย้งว่าการหยุดพักนี้MVCและฉันเห็นด้วยบ้าง จากมุมมองของฉันมันเกี่ยวข้องอย่างใกล้ชิดกับประเพณีUITableViewCellซึ่งบางครั้งก็ต้องมีส่วนควบคุมด้วย

นอกจากนี้ยังเป็นที่น่าสังเกตว่าคำตอบนี้เป็นวิธีแก้ปัญหาที่เฉพาะเจาะจงมาก สร้างปลายปากกาหนึ่งอันที่สามารถสร้างอินสแตนซ์ได้หลายครั้งในมุมมองเดียวกับที่วางไว้บนกระดานเรื่องราว ตัวอย่างเช่นคุณสามารถนึกภาพตัวจับเวลาทั้งหมดหกตัวบนหน้าจอ iPad พร้อมกันได้อย่างง่ายดาย หากคุณต้องการเพียงระบุมุมมองสำหรับตัวควบคุมมุมมองที่จะต้องใช้หลาย ๆ ครั้งในแอปพลิเคชันของคุณโซลูชันที่ jyavenard ให้ไว้สำหรับคำถามนี้เกือบจะเป็นทางออกที่ดีกว่าสำหรับคุณ

ตัวอย่างรวดเร็ว

อัปเดตสำหรับ Xcode 10 และ Swift 4

นี่คือการเดินผ่านขั้นพื้นฐาน เดิมทีฉันได้เรียนรู้สิ่งนี้มากมายจากการดูซีรีส์วิดีโอ Youtubeนี้ ต่อมาผมปรับปรุงคำตอบของฉันอยู่บนพื้นฐานของบทความนี้

เพิ่มไฟล์มุมมองแบบกำหนดเอง

สองไฟล์ต่อไปนี้จะสร้างมุมมองแบบกำหนดเองของคุณ:

• .xib มีเค้าโครง
• ไฟล์. swift เป็นUIViewคลาสย่อย

รายละเอียดการเพิ่มอยู่ด้านล่าง

ไฟล์ Xib

เพิ่มไฟล์ .xib กับโครงการของคุณ(File> New> File ... > User Interface> ดู) ReusableCustomView.xibฉันโทรเหมือง

สร้างเค้าโครงที่คุณต้องการให้มุมมองแบบกำหนดเองของคุณมี ตัวอย่างเช่นฉันจะสร้างเค้าโครงด้วย a UILabelและUIButton. เป็นความคิดที่ดีที่จะใช้การจัดวางอัตโนมัติเพื่อให้สิ่งต่างๆปรับขนาดโดยอัตโนมัติไม่ว่าคุณจะตั้งค่าเป็นขนาดใดในภายหลัง (ฉันใช้Freeformสำหรับขนาด xib ในตัวตรวจสอบแอตทริบิวต์เพื่อที่ฉันจะสามารถปรับเมตริกจำลองได้ แต่ไม่จำเป็น)

ไฟล์ Swift

เพิ่มไฟล์ .swift กับโครงการของคุณ(File> New> File ... > ที่มา> Swift File) มันเป็น subclass ของและฉันเรียกเหมืองUIViewReusableCustomView.swift

import UIKit
class ResuableCustomView: UIView {

}

ทำให้ไฟล์ Swift เป็นเจ้าของ

กลับไปที่ไฟล์. xibของคุณและคลิกที่ "เจ้าของไฟล์" ในโครงร่างเอกสาร ใน Identity Inspector ให้เขียนชื่อไฟล์. swiftของคุณเป็นชื่อคลาสที่กำหนดเอง

เพิ่มรหัสมุมมองที่กำหนดเอง

แทนที่ReusableCustomView.swiftเนื้อหาของไฟล์ด้วยรหัสต่อไปนี้:

import UIKit

@IBDesignable
class ResuableCustomView: UIView {

    let nibName = "ReusableCustomView"
    var contentView:UIView?

    @IBOutlet weak var label: UILabel!

    @IBAction func buttonTap(_ sender: UIButton) {
        label.text = "Hi"
    }

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

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

    func commonInit() {
        guard let view = loadViewFromNib() else { return }
        view.frame = self.bounds
        self.addSubview(view)
        contentView = view
    }

    func loadViewFromNib() -> UIView? {
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: nibName, bundle: bundle)
        return nib.instantiate(withOwner: self, options: nil).first as? UIView
    }
}

ตรวจสอบให้แน่ใจว่าสะกดถูกต้องสำหรับชื่อไฟล์. xib ของคุณ

เชื่อมต่อร้านค้าและการดำเนินการ

เชื่อมต่อร้านค้าและการดำเนินการโดยการควบคุมการลากจากป้ายกำกับและปุ่มในเค้าโครง xib ไปยังโค้ดมุมมองแบบกำหนดเองที่รวดเร็ว

ใช้มุมมองที่คุณกำหนดเอง

มุมมองแบบกำหนดเองของคุณเสร็จสิ้นแล้ว สิ่งที่คุณต้องทำคือเพิ่มUIViewทุกที่ที่คุณต้องการในกระดานเรื่องราวหลักของคุณ ตั้งชื่อคลาสของมุมมองReusableCustomViewใน Identity Inspector

คำตอบสำหรับตัวควบคุมมุมมองไม่ใช่มุมมอง :

มีวิธีที่ง่ายกว่าในการโหลด xib จากสตอรี่บอร์ด สมมติว่าคอนโทรลเลอร์ของคุณเป็นประเภท MyClassController ซึ่งสืบทอดมาจากUIViewControllerซึ่งสืบทอดมาจาก

คุณเพิ่มไฟล์ UIViewController IB โดยใช้ในสตอรีบอร์ดของคุณ เปลี่ยนประเภทคลาสเป็น MyClassController ลบมุมมองที่เพิ่มโดยอัตโนมัติในกระดานเรื่องราว

ตรวจสอบให้แน่ใจว่า XIB ที่คุณต้องการเรียกนั้นเรียกว่า MyClassController.xib

เมื่อชั้นเรียนถูกสร้างอินสแตนซ์ระหว่างการโหลดสตอรี่บอร์ด xib จะโหลดโดยอัตโนมัติ สาเหตุนี้เกิดจากการใช้งานเริ่มต้นUIViewControllerซึ่งเรียกใช้ XIB ที่ตั้งชื่อด้วยชื่อคลาส

นี่ไม่ใช่คำตอบจริงๆ แต่ฉันคิดว่าการแบ่งปันแนวทางนี้มีประโยชน์

Objective-C

1. นำเข้าCustomViewWithXib.hและCustomViewWithXib.m ไปยังโครงการของคุณ
2. สร้างไฟล์มุมมองแบบกำหนดเองด้วยชื่อเดียวกัน (.h / .m / .xib)
3. สืบทอดคลาสที่กำหนดเองของคุณจาก CustomViewWithXib

รวดเร็ว

1. นำเข้าCustomViewWithXib.swiftไปยังโครงการของคุณ
2. สร้างไฟล์มุมมองแบบกำหนดเองด้วยชื่อเดียวกัน (.swift และ. xib)
3. สืบทอดคลาสที่กำหนดเองของคุณจาก CustomViewWithXib

ไม่จำเป็น :

4. ไปที่ไฟล์ xib ของคุณตั้งค่าเจ้าของด้วยชื่อคลาสที่คุณกำหนดเองหากคุณต้องการเชื่อมต่อองค์ประกอบบางอย่าง (สำหรับรายละเอียดเพิ่มเติมโปรดดูที่ส่วนทำให้ไฟล์ Swift เป็นเจ้าของคำตอบ @Suragch)

ตอนนี้คุณสามารถเพิ่มมุมมองที่กำหนดเองลงในสตอรีบอร์ดของคุณได้แล้วและจะแสดง :)

CustomViewWithXib.h :

 #import <UIKit/UIKit.h>

/**
 *  All classes inherit from CustomViewWithXib should have the same xib file name and class name (.h and .m)
 MyCustomView.h
 MyCustomView.m
 MyCustomView.xib
 */

// This allows seeing how your custom views will appear without building and running your app after each change.
IB_DESIGNABLE
@interface CustomViewWithXib : UIView

@end

CustomViewWithXib.m :

#import "CustomViewWithXib.h"

@implementation CustomViewWithXib

#pragma mark - init methods

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // load view frame XIB
        [self commonSetup];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        // load view frame XIB
        [self commonSetup];
    }
    return self;
}

#pragma mark - setup view

- (UIView *)loadViewFromNib {
    NSBundle *bundle = [NSBundle bundleForClass:[self class]];

    //  An exception will be thrown if the xib file with this class name not found,
    UIView *view = [[bundle loadNibNamed:NSStringFromClass([self class])  owner:self options:nil] firstObject];
    return view;
}

- (void)commonSetup {
    UIView *nibView = [self loadViewFromNib];
    nibView.frame = self.bounds;
    // the autoresizingMask will be converted to constraints, the frame will match the parent view frame
    nibView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    // Adding nibView on the top of our view
    [self addSubview:nibView];
}

@end

CustomViewWithXib.swift :

import UIKit

@IBDesignable
class CustomViewWithXib: UIView {

    // MARK: init methods
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        commonSetup()
    }

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

        commonSetup()
    }

    // MARK: setup view 

    private func loadViewFromNib() -> UIView {
        let viewBundle = NSBundle(forClass: self.dynamicType)
        //  An exception will be thrown if the xib file with this class name not found,
        let view = viewBundle.loadNibNamed(String(self.dynamicType), owner: self, options: nil)[0]
        return view as! UIView
    }

    private func commonSetup() {
        let nibView = loadViewFromNib()
        nibView.frame = bounds
        // the autoresizingMask will be converted to constraints, the frame will match the parent view frame
        nibView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
        // Adding nibView on the top of our view
        addSubview(nibView)
    }
}

คุณสามารถค้นหาตัวอย่างบางส่วนที่นี่

หวังว่าจะช่วยได้