ฉันจะตั้งค่าข้อ จำกัด อัตราส่วนโดยใช้โปรแกรมใน iOS ได้อย่างไร


85

ฉันใช้รูปแบบอัตโนมัติสำหรับตัวควบคุมมุมมองของฉัน ฉันตั้งค่าตำแหน่ง V และ H ไว้ในข้อ จำกัด แต่ฉันต้องการทราบว่าฉันจะเพิ่มขนาดปุ่มได้อย่างไรเมื่อเปลี่ยนเป็น 5s, 6 และ 6 Plus นี่เป็นวิธีที่ฉันเพิ่มข้อ จำกัด สำหรับปุ่มเข้าสู่ระบบ:

NSArray *btncon_V=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[btnLogin(40)]" options:0 metrics:nil views:viewsDictionary];
[btnLogin addConstraints:btncon_V];

NSArray *btncon_POS_H=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[btnLogin]-100-|" options:0 metrics:nil views:viewsDictionary];
[self.view addConstraints:btncon_POS_H];


NSArray *btncon_POS_V=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[Title]-130-[lblFirst]-0-[lblSecond]-20-[textusername]-10-[txtpassword]-10-[btnLogin]" options:0 metrics:nil views:viewsDictionary];

[self.view addConstraints:btncon_POS_V];

แต่ปัญหาของฉันคือในขณะที่จัดการช่องว่างด้านซ้ายและด้านขวา แต่ iPhone 6 และ 6 Plus ได้รับการยืดออกเนื่องจากความสูงได้รับการแก้ไขแล้ว ฉันจะเพิ่มขนาดตามขนาดหน้าจอได้อย่างไร? ฉันคิดว่านี่อาจเป็นอัตราส่วนภาพ แต่ฉันจะตั้งค่าข้อ จำกัด อัตราส่วนภาพในโค้ดได้อย่างไร


2
ตรวจสอบคำตอบนี้: stackoverflow.com/a/12526630/3202193
Ashish Kakkad

คำตอบ:


84

แบบนี้. ลองสักครั้ง

[self.yourview setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.yourview addConstraint:[NSLayoutConstraint
                                  constraintWithItem:self.yourview
                                  attribute:NSLayoutAttributeHeight
                                  relatedBy:NSLayoutRelationEqual
                                  toItem:self.yourview
                                  attribute:NSLayoutAttributeWidth
                                  multiplier:(self.yourview.frame.size.height / self.yourview.frame.size.width)
                                  constant:0]];

หรือ(self.yourview.frame.size.height / self.yourview.frame.size.width)ใช้แทนค่าลอยใดก็ได้ ขอบคุณ.

Swift 3.0 -

self.yourview!.translatesAutoresizingMaskIntoConstraints = false
self.yourview!.addConstraint(NSLayoutConstraint(item: self.yourview!,
                                          attribute: NSLayoutAttribute.height,
                                          relatedBy: NSLayoutRelation.equal,
                                          toItem: self.yourview!,
                                          attribute: NSLayoutAttribute.width,
                                          multiplier: self.yourview.frame.size.height / self.yourview.frame.size.width,
                                          constant: 0))

ทำให้ฉันเกิดข้อผิดพลาดนี้ในการยุติแอปเนื่องจากข้อยกเว้น 'NSInternalInconsistencyException' ที่ไม่ถูกจับสาเหตุ: 'ตัวคูณไม่ จำกัด ! นั่นผิดกฎหมาย ตัวคูณ: nan '
IRD

2
หมายความว่าในสถานการณ์เช่นถ้าความสูงคือ 100 และความกว้างคือ 200 และคุณให้ตัวคูณ 0.5 พร้อมรหัสของฉันถ้าความสูงของคุณเพิ่มเป็น 150 โดยการเปลี่ยนข้อ จำกัด อื่น ๆ ความกว้างจะเพิ่มเป็น 300 โดยอัตโนมัติ แต่ในการทำเช่นนี้คุณต้อง เพื่อเพิ่มข้อ จำกัด อย่างหนึ่งของมุมมองเช่นความกว้างหรือความสูง
Mahesh Agrawal

1
จะใช้ความสูง: width = 1: 2 นั่นคือ 0.5
Mahesh Agrawal

3
อย่าลืมเพิ่มบรรทัดนี้ก่อนกำหนดข้อ จำกัด ทางโปรแกรม: [self.yourview setTranslatesAutoresizingMaskIntoConstraints:NO];
atulkhatri

1
เมื่อใช้ข้อ จำกัด ขนาดเฟรมของฉันทั้งหมดเป็นศูนย์ เพื่อให้ได้สัดส่วนภาพแทนฉันใช้self.yourview.intrinsicContentSize
Phlippie Bosman

89

Layout Anchorsเป็นวิธีที่สะดวกที่สุดในการกำหนดข้อ จำกัด โดยใช้โปรแกรม

สมมติว่าคุณต้องการกำหนดอัตราส่วน 5: 1 สำหรับปุ่มของคุณคุณควรใช้:

button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1.0/5.0).isActive = true

นี่คือรหัสเต็ม:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let button = UIButton(type: .custom)
        button.setTitle("Login", for: .normal)
        button.backgroundColor = UIColor.darkGray

        self.view.addSubview(button)

        button.translatesAutoresizingMaskIntoConstraints = false

        let margins = view.layoutMarginsGuide

        button.leadingAnchor.constraint(equalTo: margins.leadingAnchor, constant: 20.0).isActive = true
        button.trailingAnchor.constraint(equalTo: margins.trailingAnchor, constant: -20.0).isActive = true
        button.bottomAnchor.constraint(equalTo: margins.bottomAnchor, constant: -20.0).isActive = true
        button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1.0/5.0).isActive = true
    }

}

นี่คือผลลัพธ์ที่ได้จากโค้ดที่เขียนไว้ด้านบน คุณจะเห็นปุ่มนั้นคงอัตราส่วน 5: 1 ไว้ในอุปกรณ์ต่างๆ:

มุมมองผลลัพธ์


14

Swift 3:

yourView.addConstraint(NSLayoutConstraint(item: yourView,
                                          attribute: .height,
                                          relatedBy: .equal,
                                          toItem: yourView,
                                          attribute: .width,
                                          multiplier: 9.0 / 16.0,
                                          constant: 0))

1
สำหรับ iOS 8 ขึ้นไปคุณควรใช้คุณสมบัติ isActive ของ NSLayoutConstraint แทนการเรียก addConstraint (:) aspectRatioConstraint.isActive = true
dvdblk

ทำไมคุณไม่ใช้.widthเป็นแอตทริบิวต์แรก ผลที่ได้คือattr2 * multiplier อัตราส่วนคือwidth / heightดังนั้นwidth = height * aspectRatioถ้าเราใส่.heightแอตทริบิวต์แรกและaspectRatioไปmultiplierแล้วผลเป็นสิ่งที่ตรงกันข้ามโดยสิ้นเชิง
Kimi Chiu

13

คุณสามารถตั้งค่า "ข้อจำกัดความสูง" ที่เวลาออกแบบในตัวสร้างอินเทอร์เฟซ เพียงทำเครื่องหมายที่ '"ลบในเวลาสร้าง" และจะลบเมื่อแอปทำงาน

ใส่คำอธิบายภาพที่นี่ หลังจากนั้นคุณสามารถเพิ่มข้อ จำกัด "อัตราส่วนภาพ" ตัวอย่างเช่นในเมธอด viewDidLoad

ใน Xamain.iOS สำหรับ "16: 9" จะมีลักษณะดังนี้:

    this.ImageOfTheDay.AddConstraint(NSLayoutConstraint.Create(
            this.ImageOfTheDay,
            NSLayoutAttribute.Height,
            NSLayoutRelation.Equal,
            this.ImageOfTheDay,
            NSLayoutAttribute.Width,
            9.0f / 16.0f,
            0));

หรือตามที่Mahesh Agrawalกล่าวว่า:

    [self.ImageOfTheDay addConstraint:[NSLayoutConstraint
                              constraintWithItem:self.ImageOfTheDay
                              attribute:NSLayoutAttributeHeight
                              relatedBy:NSLayoutRelationEqual
                              toItem:self.ImageOfTheDay
                              attribute:NSLayoutAttributeWidth
                              multiplier:(9.0f / 16.0f)
                              constant:0]];

12

ส่วนขยายตัวช่วยใน UIView

extension UIView {

    func aspectRation(_ ratio: CGFloat) -> NSLayoutConstraint {

        return NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: self, attribute: .width, multiplier: ratio, constant: 0)
    }
}

และการใช้งานคือ:

view.aspectRation(1.0/1.0).isActive = true


และการใช้งาน: view.aspectRation (1.0 / 1.0)
Michał Ziobro

1
นี่เป็นวิธีแก้ปัญหาที่สวยงามโดย จำกัด สองประเภท: 1. พารามิเตอร์ toItem ถูกตั้งค่าเป็น.selfแทนที่จะเป็นself2 และการใช้งานในความคิดเห็นควรจะview.aspectRation(1.0/1.0).isActive = true ทดสอบสิ่งนี้ใน Xcode 10.2.1 Swift 5
Pankaj Kulkarni

3

ฉันลองคำตอบทั้งหมดข้างต้นแล้ว แต่ไม่ได้ผลและนี่คือคำตอบของฉันด้วย swift 3:

let newConstraint = NSLayoutConstraint(item: yourView, attribute: .width, relatedBy: .equal, toItem: yourView, attribute: .height, multiplier: 560.0/315.0, constant: 0)
yourView.addConstraint(newConstraint)
NSLayoutConstraint.activate([newConstraint])  
NSLayoutConstraint.deactivate(yourView.constraints)
yourView.layoutIfNeeded()

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

0

สำหรับมุมมองมีข้อ จำกัด และยังมีคุณสมบัติ

อัตราส่วนภาพเป็นคุณสมบัติของมุมมองดังนั้นคุณสามารถตั้งค่าได้โดยใช้โหมดเนื้อหาเช่นนั้น

imageView.contentMode = .scaleAspectFit

สิ่งนี้จะทำให้ได้ว่ามุมมองไม่เปลี่ยนอัตราส่วนถ้าเช่น

  • ความสูงหรือความกว้างมากกว่าที่จะพอดีกับหน้าจอ
  • ความสูงถูกกำหนดรหัสยากดังนั้นจะไม่สามารถปรับให้เข้ากับหน้าจอขนาดต่างๆได้

คำถามไม่ได้เกี่ยวกับ ImageView และโหมดเนื้อหา แต่เกี่ยวกับการจัดวางและข้อ จำกัด อัตโนมัติ จากตัวสร้างอินเทอร์เฟซคุณสามารถตั้งค่าข้อ จำกัด อัตราส่วนภาพซึ่งในตอนท้ายจะสร้างข้อจำกัดความกว้างต่อความสูงด้วยตัวคูณ
ฮัน

@ Gunhan คำถามเกี่ยวกับวิธีการตั้งค่าโดยใช้โปรแกรม ดังนั้นความสามารถในการตั้งค่าในตัวสร้างอินเทอร์เฟซจึงเป็นเรื่องที่ดี แต่ไม่เกี่ยวข้องกับคำถามนี้
valeriana

ฉันคิดว่าคุณเข้าใจผิดที่ฉันพูดก่อนหน้านี้ ในคำถามนี้ไม่มีใครพูดถึง ImageView ไอทีเป็นเรื่องเกี่ยวกับการจัดวางอัตโนมัติและข้อ จำกัด และต้องทำให้เป็นโปรแกรม สิ่งที่ฉันพูดคือเมื่อคุณตั้งค่าในตัวสร้างอินเทอร์เฟซมันจะสร้างข้อจำกัดความกว้างถึงความสูง ฉันไม่ได้บอกให้คุณสร้างผ่าน IB ที่จะทำในสิ่งเดียวกันโปรแกรมคุณต้องสร้างมันเหมือนview.widthAnchor.constraint(equalTo: view.heightAnchor, multiplier: aspectRatio, constant: 0)ดังนั้น
Gunhan
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.