ฉันจะใช้ UIScrollView ใน Interface Builder ได้อย่างไร

แม้ว่าที่ผ่านมาฉันจะใช้UIScrollViewประสบความสำเร็จโดยการจัดการกับโปรแกรม แต่ฉันมีปัญหาในการทำให้มันทำงานได้โดยการตั้งค่าเฉพาะในตัวสร้างอินเทอร์เฟซ

ฉันมีหน้า "เกี่ยวกับ" ง่ายๆในแอป iPhone ของฉัน มีUITextViewไอคอนบางส่วนและลิงก์ไปยังแอปอื่น ๆ ของฉัน ฉันได้เพิ่มมุมมองเหล่านี้ทั้งหมดในมุมมองของฉันUIScrollViewโดยจัดเรียงให้มีขนาดรวม> 480 เมื่อฉันเปิดแอพของฉันมุมมองเลื่อนจะแสดงเฉพาะเนื้อหาที่พอดีกับหน้าจอและไม่มีอะไรเลื่อน

เป็นไปได้ไหมที่จะทำผ่าน IB หรือฉันต้องปรับแต่ง contentSize ผ่านรหัส?

คุณลืมตั้งค่าคุณสมบัติ contentSize ของ UIScrollView น่าแปลกที่คุณไม่สามารถทำได้จากตัวสร้างส่วนต่อประสาน คุณจะต้องทำจากตัวควบคุมมุมมองที่จัดการมุมมองเลื่อนนี้

คำตอบของ Boby_Wan ทำให้ฉันคิดและฉันพบวิธีแก้ปัญหาต่อไปนี้เพื่อกำหนดค่า contentSize ของ UIScrollView จาก Interface Builder:

1. เลือกUIScrollViewฉากสตอรี่บอร์ด
2. ไปที่Identity inspectorสร้างUser Defined Runtime Attribute ใหม่ (คลิกปุ่ม +)
3. เปลี่ยนเส้นทางคีย์แอตทริบิวต์เป็นcontentSize
4. เปลี่ยนแอตทริบิวต์Typeเป็นSize
5. ตอนนี้ตั้งราคาเป็น { ที่ต้องการความกว้างของเนื้อหา , ต้องการสูงเนื้อหา }

เช่นการตั้งค่าเป็น {320, 920} จะทำให้ผู้ใช้เลื่อนหน้าจอพิเศษทั้งหมดลงมาบน iPhone

(ฉันใช้ xcode 4.3.3 เป้าหมายการปรับใช้ iOSของโครงการคือ 5.1)

เมื่อฉันทำครั้งแรกฉันได้รับข้อผิดพลาดต่อไปนี้:

การกำหนดค่าที่ไม่ถูกต้อง:
     ประเภทขนาดที่ผู้ใช้กำหนดแอ็ตทริบิวต์รันไทม์ด้วย Xcode เวอร์ชันก่อน 4.3
     MainStoryboard.storyboard

ถ้าคุณก็จะได้รับข้อผิดพลาดนี้มันเป็นเรื่องง่ายที่จะแก้ไข: เลือก Storyboard ในโครงการนาวิเกเตอร์และนำมาขึ้นตรวจสอบไฟล์ ค้นหา / ขยายInterface Builder เอกสารส่วนและมีการเลื่อนลงสำหรับการพัฒนา ตรวจสอบให้แน่ใจว่าได้ตั้งค่าเป็นXcode 4.3

ด้วย Autolayout (iOS6 +) คุณสามารถหลีกเลี่ยงการตั้งค่าcontentSizeได้ กำหนดข้อ จำกัด ต่อไปนี้แทน:

1. ตรึงด้านบนสุดของมุมมองเลื่อนไว้ที่ด้านบนสุดของชายด์บนสุด
2. และตรึงด้านล่างไว้ที่ด้านล่างของเด็กล่างสุด

คุณสามารถทำได้โดยใช้เพียง Interface Builder ไปที่ Identity Inspector (แท็บตัวตรวจสอบที่สาม) และเพิ่มแอ็ตทริบิวต์User Defined Runtimeด้วย

• เส้นทางสำคัญ: contentSize
• ประเภท: ขนาด
• ค่า: {width, height}

ตอนนี้มีวิธีการUIScrollViewเลื่อนโดยไม่ต้องออกจากStoryboard :

1. เลือกUIScrollViewใน Storyboard ไปที่ตัวตรวจสอบขนาดและเปลี่ยนค่าด้านล่าง (หรือค่าอื่น ๆ ที่คุณต้องการเปลี่ยน) ในส่วนการแทรกเนื้อหาเป็นความสูงของพื้นที่เนื้อหา
2. ตอนนี้ไปที่การตรวจสอบเอกลักษณ์และสร้างใหม่ที่ผู้ใช้กำหนด Runtime แอตทริบิวต์ (โดยคลิกที่ปุ่ม +) contentSizeและตั้งชื่อมันว่า ไม่สำคัญว่าคุณจะกรอกประเภทหรือค่าใด (คุณสามารถเว้นค่าเริ่มต้นไว้ได้)

สิ่งนี้จะทำให้UIScrollViewทำงานได้อย่างถูกต้องแม้ว่าฉันจะไม่รู้ว่าทำไมขั้นตอนที่สองถึงจำเป็น (ฉันค้นพบโดยบังเอิญ) :(

วิธีหนึ่งที่ฉันเคยใช้ในอดีตคือการลาก scrollview ออกจากมุมมองที่มีอยู่ในตัวสร้างอินเทอร์เฟซและตั้งค่าขนาดจริงตามที่ต้องการให้ contentSize เป็น

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

ในมุมมองที่คุณต้องการให้ scrollview มีชีวิตให้วาง UIView แบบธรรมดาซึ่งคุณใช้เป็นตัวยึด (นี่เป็นเพียงเพื่อให้คุณสามารถออกแบบตำแหน่งของมันด้วยสายตาได้หากคุณใช้มุมมองทั้งหมดคุณสามารถข้ามขั้นตอนนี้และใช้ข้อมูลโค้ดที่สองที่ฉันให้ไว้ในตอนท้ายของคำตอบนี้)

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

ที่รันไทม์ใน - (โมฆะ) viewDidLoad

scrollView.contentSize = scrollView.frame.size;
scrollView.frame = placeholder.frame;
[placeholder.superview addSubView:scrollView];
[placeholder removeFromSuperview];

หรือ (ถ้าคุณไม่ได้ใช้ตัวยึด):

CGRect f = self.view.frame;
scrollView.contentSize = f.size;
f.origin.x = 0;
f.origin.y = 0;
scrollView.frame = f;
[self.view addSubView:scrollView];

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

ใน Xcode 4.5 โดยใช้ Autolayout ฉันไม่มีส่วนการแทรกเนื้อหาในตัวตรวจสอบขนาดของฉัน ดังนั้นฉันต้องเพิ่มภายใต้ User Defined Runtime Attributes จากนั้นก็ใช้งานได้ดี

สิ่งที่คุณเพิ่มใน "User Defined Runtime Attributes" คือ keyPath == contentInset ซึ่งเป็นประเภท "Rect" (UIEdgeInsets ซึ่งมีอินพุตเหมือนกับ Rect) และกำหนดเป็น {top, left}, {bottom, right} contentSize กำหนดขอบเขตของหน้าต่าง scrollview เท่านั้น contentInset กำหนดพื้นที่ที่เลื่อนได้

ฉันหวังว่านี่จะช่วยใครสักคนที่ตกอยู่ในสถานการณ์เดียวกัน

คำตอบหลายข้อข้างต้นทำให้เข้าใจผิดหรือล้าสมัย ในฐานะที่เป็น 2017 (อาจจะมากก่อนหน้านี้) สร้างอินเตอร์เฟซที่ไม่ scrollviews การสนับสนุนที่มีเนื้อหาขนาดโดยอัตโนมัติ เคล็ดลับคือ XCode ให้ความหมายพิเศษที่ไม่เป็นมาตรฐานกับข้อ จำกัด ระหว่าง scrollview และเนื้อหาภายใน ข้อ จำกัด "ภายใน" เหล่านี้จะไม่ส่งผลต่อขนาดของเนื้อหาอย่างที่คุณคาดหวัง

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

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

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

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

https://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/

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

หากคุณคลิกที่ไอคอน Properties ของ View Controller ใด ๆ ใน Interface Builder คุณสามารถตั้งค่าให้เป็นขนาด "Freeform" ใน Simulated Metrics และเปลี่ยนขนาดของ View หลักให้เป็นขนาดเนื้อหาที่คุณต้องการได้

ด้วยวิธีนี้คุณสามารถสร้างเนื้อหาของ ScrollView ราวกับว่าเป็นมุมมองขนาดใหญ่ เนื่องจากเป็นเพียงเมตริกจำลอง View Controller ของคุณจะถูกปรับขนาดตามขอบเขตของหน้าต่างเมื่อโหลด

การตั้งค่า UIScrollView ผ่านตัวสร้างอินเทอร์เฟซไม่ใช่เรื่องง่าย นี่คือรายการตรวจสอบของฉันสำหรับการตั้งค่า:

1. เลือกไฟล์ XIB ของ UIViewController ใน "Identity Inspector" ของตัวสร้างอินเทอร์เฟซให้เปลี่ยน UIView เป็นประเภทคลาส UIScrollView

2. ภายใต้ "File Inspector" ให้ยกเลิกการเลือก Autolayout

3. ภายใต้ "Attributes Inspector" เปลี่ยนขนาดเป็น Freeform จากนั้นคุณสามารถยืด Scroll View ได้ด้วยตนเองหรือระบุความกว้างและความสูงที่กำหนดเองภายใต้ "Size Inspector"

4. ใน "Identity Inspector" ให้เพิ่ม User Defined Runtime Attribute ชื่อ "contentSize" ประเภท "Size" และเปลี่ยนเป็นค่าเช่น {320, 1000} คุณไม่สามารถตั้งค่านี้โดยใช้โปรแกรมได้อีกต่อไปดังนั้นจึงต้องใช้ขั้นตอนนี้เพื่อให้ Scroll View รู้ว่าเนื้อหาของ Scroll View นั้นใหญ่กว่าหน้าต่าง

เพียงแค่ลบ autoLayout บน scrollview ของคุณ จากนั้นรหัสจะง่ายดังนี้:

scrollviewName.contentSize = CGSizeMake(0, 650);

เพียงสร้างคุณสมบัติ iboulet บนไฟล์. h จากนั้นสังเคราะห์บนไฟล์. m ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานการเลื่อน

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

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

เช่นหากคุณมีมุมมองย่อยเพียงมุมมองเดียวคุณสามารถตั้งค่าความสูงและพื้นที่จากด้านบนและด้านล่างเป็นซุปเปอร์วิว (เช่น scrollView ในกรณีของเรา) contentSize.height จะคำนวณเป็นผลรวม

Vertical Space (aSubview.top to Superview.top) + aSubview.height + Vertical Space (aSubview.top to Superview.top)

contentSize.width คำนวณในทำนองเดียวกันจากข้อ จำกัด แนวนอน

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

หากมีมุมมองย่อยหลายมุมมองอาจเป็น "ลูกโซ่" ของข้อ จำกัด : มุมมองย่อยจากบนลงบนสุดความสูงและช่องว่างระหว่างมุมมองย่อยและมุมมองย่อยล่างสุดไปยังด้านล่างเหมือนในคำตอบของDanyal Aytekin

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

ในการสร้างเนื้อหาที่คำนวณได้ scrollView ขนาดต้องมากกว่าขนาด scrollView

คุณสามารถมี UIScrollView ใน StoryBoard ด้วย Autolayouts โดยพื้นฐานแล้วสิ่งที่คุณต้องการคือ:

1. เพิ่ม UIScrollView
2. เพิ่มข้อ จำกัด ทั้งหมดลงไป (เช่นสิ่งที่ใส่เข้าไปจากด้านบนซ้ายขวาขอบล่าง)
3. เพิ่ม UIView 'container' ใน UIScrollView
4. หากคุณต้องการเลื่อนทิศทางเดียว (เช่นแนวตั้ง) ให้ตั้งค่าความสูงอย่างชัดเจน (เช่น 600) และความกว้างของลิงก์ไปยังความกว้างของ UIScrollView
5. หากคุณต้องการเลื่อนสองทิศทางเพียงแค่ตั้งค่าทั้งความกว้างและความสูง

นี่คือวิธีแก้ปัญหาในการออกแบบ ScrollView ด้วยเนื้อหาที่ใหญ่กว่าหน้าจอทั้งหมดใน Storyboard (โดยทั่วไปแล้วคุณจะต้องเพิ่มโค้ด 1 บรรทัดด้วย)

https://stackoverflow.com/a/19476991/1869369

ฉันหาวิธีที่สะดวกกว่านี้

1: ปรับขนาดของมุมมองแบบเลื่อนเพื่อให้มี ui ทั้งหมดอยู่ข้างใน

2: เพิ่ม iboutlet ของมุมมองเลื่อน

3: ใน viewDidLoad ให้บันทึกเฟรมขนาดของมุมมองเลื่อน
(เช่น _scrollSize = _scrollView.frame.size;)

4: ใน viewWillAppear ให้ตั้งค่า contentSize ตาม CGSize ที่คุณบันทึกไว้ก่อนหน้านี้
(เช่น _scrollView.contentSize = _scrollSize;)

5: เสร็จสิ้น ~

1. เพิ่ม UIViewController
2. ใน UIViewController 'Attribute Inspector -> Simulated Metrics' ตั้งค่าขนาด Freeform
3. ใน UIViewController 'Size Inspector -> View Controller' ตั้งค่าความสูง 800
4. เพิ่ม UIScrollView ใน UIViewController
5. เพิ่มข้อ จำกัด ทั้งหมดใน UIScrollView (ด้านบนซ้ายขวาล่าง) และเพิ่มการจัดตำแหน่ง X = center
6. เพิ่ม UIView ใน UIScrollView
7. เพิ่มข้อ จำกัด ทั้งหมดใน UIView (ด้านบนซ้ายขวาล่าง) และเพิ่มการจัดตำแหน่ง X = center ใช่เช่นเดียวกับ UIScrollView ใน # 3 แต่สำหรับ UIView
8. เพิ่มข้อจำกัดความสูงให้กับ UIView ตัวอย่างเช่น 780
9. วิ่ง

สร้างโครงการ Xcode ใหม่

ไปที่ไฟล์ Main.storyboard

เลือก ScrollView จากไลบรารีวัตถุ

กำหนดกรอบสำหรับ ScrollView

เพิ่มมุมมองอื่นเพื่อเลื่อนดูและรักษากรอบให้เหมือนกับของ ScrollView

ตอนนี้เพื่อตั้งค่าความสูงและความกว้างแบบไดนามิกคุณสามารถกำหนดค่า UIScrollView โดยใช้เค้าโครงอัตโนมัติใน XIB