ลดจำนวนช่องว่างระหว่างองค์ประกอบเมื่อมีการจำกัดพื้นที่

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

A:
อัตราส่วน 1:1 ต่อ A
นำไปสู่การดูแล
ความกว้างและความสูง >= 25

B:
ความกว้างและความสูงเท่ากับ A
นำไปสู่ ​​A: 50

C:
ความกว้างและความสูงเท่ากันกับ A
นำไปสู่ ​​​​B: 50
ต่อท้ายไปยัง superview

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

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

ต้องตั้งค่าข้อจำกัดอะไรบ้างเพื่อรับสิ่งนี้

  • ปุ่มสามปุ่มที่แสดงเคียงข้างกันในพื้นที่แนวนอนเดียวกัน
  • ทั้งสามปุ่มเป็นสี่เหลี่ยมที่สมบูรณ์แบบ
  • ขนาดขั้นต่ำสำหรับปุ่ม (25x25)
  • จำนวนช่องว่างระหว่างพวกเขา - 50
  • เมื่อพื้นที่ในแนวนอนมีขนาดเล็กเกินไปเพื่อให้แน่ใจว่าจะเป็นไปตามข้อจำกัดทั้งหมด ก็ควรลดจำนวนช่องว่างระหว่างปุ่มต่างๆ

person Jordan H    schedule 25.05.2015    source แหล่งที่มา


คำตอบ (3)


คุณจะต้องการข้อจำกัดในการเว้นวรรคตามลำดับความสำคัญที่กำหนดซึ่งแสดงระยะห่างขั้นต่ำที่อนุญาต ตัวอย่างเช่น >= 10 @1,000

จากนั้น คุณจะต้องการข้อจำกัดการเว้นวรรคในลำดับความสำคัญที่ต่ำกว่าซึ่งแสดงระยะห่างที่ต้องการด้วยความเท่าเทียมกัน เช่น == 50 @200

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

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

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

|-[buttonA][spacer1(>=10,==50@200)][buttonB(==buttonA)][spacer2(==spacer1)][buttonC(==buttonA)]-|
person Ken Thomases    schedule 25.05.2015

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

person Elliot Alderson    schedule 25.05.2015

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

เพื่อให้บรรลุเป้าหมายนี้ ฉันเพียงแค่ตั้งค่าคอลเลกชันทางออกสำหรับข้อจำกัดในแนวนอน จากนั้นใน updateViewConstraints ฉันวนซ้ำข้อจำกัดและตั้งค่า constant เท่ากับ self.view.frame.size.width / 12

person Jordan H    schedule 25.05.2015