วิธีใช้ UIScrollView ใน Storyboard

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

ฉันกำลังตอบคำถามของตัวเองเพราะใช้เวลาเพียง 2 ชั่วโมงในการค้นหาวิธีแก้ปัญหาและ StackOverflow อนุญาตให้ใช้รูปแบบ QA นี้

เริ่มต้นจนจบนี่คือวิธีทำให้มันใช้งานได้ในสตอรีบอร์ด

1: Attribute Inspectorไปที่คุณดูตัวควบคุมและคลิกที่

2: เปลี่ยน Size Freeformเป็น Inferred แทน

3: ไปที่มุมมองหลักบนกระดานเรื่องราวไม่ใช่มุมมองแบบเลื่อนของคุณ แต่เป็นมุมมองระดับบนสุด

4: คลิกSize Inspectorและตั้งค่ามุมมองนี้ตามขนาดที่คุณต้องการ ฉันเปลี่ยนความสูงเป็น 1000

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

5: วางบนมุมมองแบบเลื่อนและยืดออกเพื่อให้ได้มุมมองทั้งหมด ตอนนี้คุณควรมี scrollview ขนาด 320,1000 นั่งอยู่บนมุมมองในตัวควบคุมมุมมองของคุณ

ตอนนี้เราจำเป็นต้องทำให้มันเลื่อนและต้องทำให้มันแสดงเนื้อหาได้อย่างถูกต้อง

6: คลิกที่ scrollview Identity Inspectorของคุณและคลิก

7: เพิ่มUser Defined runtime attributeด้วย KeyPath จากcontentSizeนั้นพิมพ์ SIZE และใส่ขนาดเนื้อหาของคุณ สำหรับฉันมันคือ (320, 1,000)

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

8: เพิ่มruntime attributeด้วย KeyPath frameด้วย Type RECT และ 0,0,320,416

ตอนนี้เมื่อเราเรียกใช้แอพของเราเราจะมี scrollview ที่มองเห็นได้ซึ่งมีเฟรม 0,0,320, 416 และสามารถเลื่อนลงไปที่ 1,000 เราสามารถจัดวางมุมมองย่อยและรูปภาพของเราและสิ่งที่ไม่อยู่ใน Storyboard ในแบบที่เราต้องการให้ปรากฏ จากนั้นแอตทริบิวต์รันไทม์ของเราต้องแน่ใจว่าได้แสดงอย่างถูกต้อง ทั้งหมดนี้ไม่มีโค้ด 1 บรรทัด

นี่คือขั้นตอนAuto Layoutที่ใช้ได้ผลกับฉันใน XCode 8.2.1

1. เลือกSize InspectorของView Controllerและการเปลี่ยนแปลงSimulated Sizeที่จะFreeformมีความสูง1000Fixedแทน
2. เปลี่ยนชื่อมุมมองของการView Controllerเป็นRootView
3. ลากScroll Viewเป็น subview ของRootViewและเปลี่ยนชื่อเป็นScrollView
4. เพิ่มข้อ จำกัด สำหรับScrollView :
   • ScrollView [บน, ล่าง, ชั้นนำ, ต่อท้าย] = RootView [บน, ล่าง, ชั้นนำ, ต่อท้าย]
5. ลากVertical Stack Viewเป็น subview ของScrollViewและเปลี่ยนชื่อเป็นContentView
6. เพิ่มข้อ จำกัด สำหรับContentView :
   • ContentView .height = 1,000
   • ContentView [บน, ล่าง, ชั้นนำ, ต่อท้าย, ความกว้าง] = ScrollView [บน, ล่าง, ชั้นนำ, ต่อท้าย, ความกว้าง]
7. เลือกAttributes InspectorของContentViewและเปลี่ยนDistributionไปแทนFill EquallyFill
8. ลากViewเป็น subview ของContentViewและเปลี่ยนชื่อเป็นRedView
9. ตั้งRedเป็นพื้นหลังของRedView
10. ลากViewเป็น subview ของContentViewและเปลี่ยนชื่อเป็นBlueView
11. ตั้งBlueเป็นพื้นหลังของBlueView
12. เลือกRootViewแล้วคลิกUpdate Framesปุ่ม
    • Update Framesเป็นปุ่มใหม่ใน Xcode8 แทนที่จะเป็นResolve Auto Layout Issuesปุ่ม ดูเหมือนปุ่มรีเฟรชที่อยู่ในแถบควบคุมด้านล่าง Storyboard:

ดูลำดับชั้น:

• RootView
  • ScrollView
    • ContentView
      • RedView
      • BlueView

ดูฉากควบคุม (ความสูง: 1,000):

ทำงานบน iPhone7 (ความสูง: 1334/2):

นี่คือขั้นตอนที่ใช้ได้ผลสำหรับฉันใน iOS 7 และ XCode 5

1. ลาก ViewController (มาพร้อมกับ UIView "View")

   1.1 เลือก "View Controller" และเลือก "File Inspector" และยกเลิกการเลือก "Auto layout"

2. ลาก ScrollView (ในฐานะลูกของ UIView "View" ของ ViewController)
3. เลือก ScrollView และเปิด "Identity Inspector"

4. ป้อน "contentSize" สำหรับ keyPath เลือก "ขนาด" สำหรับประเภท และใส่{320 1000}สำหรับค่า

   หมายเหตุ: ขั้นตอนที่ 4 เพียงแค่บอกว่า scroller มีเนื้อหาบางส่วนที่มีขนาด 320x1000 หน่วย ดังนั้นการตั้งค่า contentSize จะทำให้ scroller ทำงานได้

5. เลือก View Controller เลือก "Attributes Inspector" จากนั้นเลือกFreeformจาก Size

   หมายเหตุ: ขั้นตอนที่ 5 จะช่วยให้เราสามารถเปลี่ยนขนาดของ "มุมมอง" ที่ตัวควบคุมมุมมองมาพร้อมกับ

6. เลือก "View" จากนั้นเลือก "Size Inspector"

7. ตั้งค่าความกว้างเป็น 320 และสูงเป็น 1,000

หมายเหตุ: 5, 6 & 7 มีไว้เพื่อให้เราเห็นมุมมองแบบยืดหรือขยายทั้งหมดภายใน StoryBoard หมายเหตุ: อย่าลืมยกเลิกการเลือก "เค้าโครงอัตโนมัติ" บน View Controller

ลำดับชั้นมุมมองของคุณควรมีลักษณะดังนี้:

หลังจากลองผิดลองถูกมาหลายชั่วโมงฉันพบวิธีที่ง่ายมากในการใส่เนื้อหาลงใน scrollview ซึ่งเป็น 'offscreen' ทดสอบด้วย XCode 5 และ iOS 7 คุณสามารถทำสิ่งนี้ได้เกือบทั้งหมดใน Storyboard โดยใช้ 2 เทคนิคเล็ก ๆ / วิธีแก้ปัญหา:

1. ลากตัวควบคุมมุมมองไปยังสตอรีบอร์ดของคุณ
2. ลาก scrollView บน viewController นี้สำหรับการสาธิตคุณสามารถปล่อยให้ขนาดเริ่มต้นครอบคลุมทั้งหน้าจอ
3. ตอนนี้มาถึงเคล็ดลับที่ 1 : ก่อนที่จะเพิ่มองค์ประกอบใด ๆ ใน scrollView ให้ลากใน 'view' ปกติ (มุมมองนี้จะมีขนาดใหญ่กว่าหน้าจอและจะมีองค์ประกอบย่อยทั้งหมดเช่นปุ่มป้ายกำกับ ... ขอเรียกมันว่า 'การปิดมุมมอง ')
4. ให้ขนาด Y ของมุมมองที่ปิดล้อมนี้ในตัวตรวจสอบขนาดเป็นตัวอย่าง 800
5. วางป้ายกำกับลงในมุมมองที่ล้อมรอบที่ไหนสักแห่งที่ตำแหน่ง Y 200 ตั้งชื่อว่า 'ป้ายกำกับ 1'
6. เคล็ดลับที่ 2 : ตรวจสอบให้แน่ใจว่าได้เลือกมุมมองที่ล้อมรอบไว้แล้ว ( ไม่ใช่ scrollView! ) และตั้งค่าตำแหน่ง Y เป็น -250 เพื่อให้คุณสามารถเพิ่มรายการที่ 'อยู่นอกหน้าจอ' ได้
7. วางป้ายกำกับไว้ที่ด้านล่างของหน้าจอตั้งชื่อว่า "ป้ายกำกับ 2" ป้ายนี้เป็น "ปิดหน้าจอ" จริงๆ
8. รีเซ็ตตำแหน่ง Y ของมุมมองที่ล้อมรอบเป็น 0 คุณจะไม่เห็นป้ายกำกับ 2 อีกต่อไปเนื่องจากอยู่ในตำแหน่งปิดหน้าจอ

จนถึงตอนนี้สำหรับการทำงานสตอรีบอร์ดตอนนี้คุณต้องเพิ่มโค้ดบรรทัดเดียวในเมธอด 'viewDidLoad' ของ viewController เพื่อตั้งค่าเนื้อหา scrollViews เพื่อให้มันมี 'มุมมองที่ปิดล้อม' ทั้งหมด ฉันไม่พบวิธีทำใน Storyboard:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

คุณสามารถลองทำได้โดยเพิ่มcontentSizekeyPath เป็นsizescrollView ใน Identity Inspector และตั้งค่าเป็น (320, 1000)

ฉันคิดว่า Apple ควรทำให้สิ่งนี้ง่ายขึ้นในสตอรีบอร์ดใน TableViewController คุณสามารถเลื่อนออกจากหน้าจอใน Storyboard ได้ (เพิ่ม 20 เซลล์แล้วคุณจะเห็นว่าคุณสามารถเลื่อนได้) ซึ่งก็น่าจะทำได้ด้วย ScrollViewController เช่นกัน

การเลื่อนเพื่อทำงานใน iOS7 และการจัดวางอัตโนมัติใน iOS 7 และ XCode 5

นอกเหนือจากนี้: https://stackoverflow.com/a/22489795/1553014

เห็นได้ชัดว่าสิ่งที่เราต้องทำคือ:

1. ตั้งค่าข้อ จำกัด ทั้งหมดเป็น Scroll View (เช่นแก้ไขมุมมองเลื่อนก่อน)

2. จากนั้นตั้งค่าข้อ จำกัด distance-from-scrollView ไปที่รายการด้านล่างสุดเพื่อเลื่อนดู (ซึ่งเป็นมุมมองขั้นสูง)

หมายเหตุ: ขั้นตอนที่ 2 จะบอกสตอรีบอร์ดที่เนื้อหาชิ้นสุดท้ายอยู่ในมุมมองเลื่อน

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

เริ่มต้นด้วยตัวควบคุมมุมมองที่มีมุมมองแบบเลื่อนอยู่เหนือ (มุมมองหลัก)

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

2: เลือกมุมมองคอนเทนเนอร์และบนตัวตรวจสอบขนาดให้ยึดไปที่ด้านบนและด้านซ้ายโดยไม่ต้องปรับขนาดอัตโนมัติ

3: เปลี่ยนความสูงเป็น 1000 (ใช้ 1,000 สำหรับตัวอย่างนี้คุณควรใช้ค่าที่คุณต้องการ)

4: เลือกตัวควบคุมมุมมองใหม่และจากตัวตรวจสอบคุณสมบัติเปลี่ยนขนาดเป็นอิสระ

5: เลือกมุมมองของตัวควบคุมมุมมองใหม่และบนตัวตรวจสอบขนาดให้เปลี่ยนความสูงเป็น 1,000 (ซึ่งเท่ากับความสูงของมุมมองคอนเทนเนอร์)

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

7: เลือกมุมมองเลื่อนจากตัวควบคุมมุมมองเดิม ในตัวตรวจสอบข้อมูลประจำตัวให้เพิ่มแอตทริบิวต์ที่มีการตั้งค่า keyPath เป็น contentSize พิมพ์ตั้งค่าเป็นขนาดและตั้งค่าเป็น {320, 1000} (หรือขนาดของมุมมองคอนเทนเนอร์ของคุณ)

8: รันบน iPhone Simulator ขนาด 4 นิ้ว คุณควรจะเลื่อนจากป้ายด้านบนขึ้นไปที่ป้ายด้านล่างได้

9: รันบน iPhone Simulator ขนาด 3.5 นิ้ว คุณควรจะเลื่อนจากป้ายด้านบนขึ้นไปที่ป้ายด้านล่างได้

โปรดจำไว้ว่า Xcode 4.6.1 สามารถสร้างสำหรับ iOS6 และต่ำกว่าเท่านั้น การใช้แนวทางนี้และการสร้างสำหรับ iOS6 ฉันยังคงสามารถบรรลุผลลัพธ์เดียวกันได้เมื่อแอปทำงานบน iOS7

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

สำหรับ a UIScrollViewฉันชอบคำแนะนำของ Alex แต่ฉันอยากจะแนะนำให้เปลี่ยนตัวควบคุมมุมมองเป็นอิสระชั่วคราวเพิ่มความสูงของมุมมองรูทสร้าง UI ของคุณ (ขั้นตอนที่ 1-5) จากนั้นเปลี่ยนกลับเป็นขนาดที่สรุปมาตรฐานเมื่อคุณทำเสร็จแล้ว เพื่อที่คุณจะได้ไม่ต้องฮาร์ดโค้ดขนาดเนื้อหาเป็นแอตทริบิวต์รันไทม์ หากคุณทำเช่นนั้นแสดงว่าคุณกำลังเผชิญกับปัญหาการบำรุงรักษาจำนวนมากที่พยายามรองรับอุปกรณ์ทั้ง 3.5 "และ 4" รวมถึงความเป็นไปได้ของความละเอียดหน้าจอที่เพิ่มขึ้นในอนาคต

คุณควรตั้งค่าคุณสมบัติ contentSize บน viewDidAppear เท่านั้นเช่นตัวอย่างนี้:

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

มันแก้ปัญหาการจ่ายอัตโนมัติและทำงานได้ดีบน iOS7

ข้อจำกัดความรับผิดชอบ: - สำหรับ iOS 9 ขึ้นไปเท่านั้น (Stack View)

หากคุณกำลังปรับใช้แอปของคุณบนอุปกรณ์ iOS 9 ให้ใช้มุมมองแบบสแต็ก นี่คือขั้นตอน: -

1. เพิ่มมุมมองแบบเลื่อนที่มีข้อ จำกัด - ตรึงไปทางซ้าย, ขวา, ล่าง, บนสุด (โดยไม่มีระยะขอบ) ไปที่ superview (มุมมอง)
2. เพิ่มมุมมองสแต็กที่มีข้อ จำกัด เดียวกันเพื่อเลื่อนดู
3. Stack View ข้อ จำกัด อื่น ๆ : - stackView.bottom = view.bottom และ stackView.width = scrollView.width
4. เริ่มเพิ่มมุมมองของคุณ มุมมองแบบเลื่อนจะตัดสินใจเลื่อนตามขนาดของมุมมองสแตก (ซึ่งโดยพื้นฐานแล้วเป็นมุมมองเนื้อหาของคุณ

ใน iOS7 ฉันพบว่าถ้าฉันมี View ภายใน UIScrollView บน ViewController ขนาด FreeForm มันจะไม่เลื่อนในแอพไม่ว่าฉันจะทำอะไรก็ตาม ฉันเล่นไปรอบ ๆ และพบว่าสิ่งต่อไปนี้ดูเหมือนจะใช้งานได้ซึ่งไม่ใช้ FreeForms:

1. แทรก UIScrollView ภายใน View หลักของ ViewController

2. ตั้งค่าข้อ จำกัด Autolayout บน ScrollView ตามความเหมาะสม สำหรับฉันฉันใช้ 0 ถึงคำแนะนำเค้าโครงด้านบนและ 0 ถึงคำแนะนำเค้าโครงด้านล่าง

3. ภายใน ScrollView วางมุมมองคอนเทนเนอร์ ตั้งค่าความสูงตามที่คุณต้องการ (เช่น 1,000)

4. เพิ่มข้อ จำกัด ด้านความสูง (1,000) ลงในคอนเทนเนอร์เพื่อไม่ให้ปรับขนาด ด้านล่างจะอยู่หลังส่วนท้ายของแบบฟอร์ม

5. เพิ่มบรรทัด [self.scrollView setContentSize: CGSizeMake (320, 1000)]; ไปยัง ViewController ที่มี scrollView (ซึ่งคุณได้เชื่อมต่อเป็น IBOutlet)

ViewController (เพิ่มโดยอัตโนมัติ) ที่เชื่อมโยงกับคอนเทนเนอร์จะมีความสูงที่ต้องการ (1,000) ในตัวสร้างอินเทอร์เฟซและจะเลื่อนอย่างถูกต้องในตัวควบคุมมุมมองดั้งเดิม ตอนนี้คุณสามารถใช้ ViewController ของคอนเทนเนอร์เพื่อจัดวางตัวควบคุมของคุณได้

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

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

เพื่อให้ทุกอย่างเป็นไปโดยอัตโนมัติเพียงแค่ใช้โซลูชันจากลิงค์นี้

ทุกอย่างชัดเจนง่ายสง่างามและใช้งานได้อย่างมีเสน่ห์บน ios 7 ฉันดีใจมากกับสิ่งนั้นฮ่า ๆ

นี่คือวิธีง่ายๆ

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

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

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

นี่เป็นคำตอบที่น่าเบื่อเล็กน้อยซึ่งเป็นวิธีแก้ปัญหาเดียวกันสำหรับมุมมองการเลื่อนแนวตั้ง แต่ (เทียบกับ ethos ของ stackoverflow) ไม่ตอบคำถาม แทนที่จะใช้ scrollView เพียงแค่ใช้ UITableView ลาก UIView ปกติลงในส่วนหัวและทำให้ใหญ่เท่าที่คุณต้องการตอนนี้คุณสามารถเลื่อนเนื้อหาในสตอรีบอร์ดได้แล้ว

วิธีตั้งค่า scrollview โดยใช้ Xcode 11 มีดังนี้

1 - เพิ่มมุมมองการเลื่อนและตั้งค่าข้อ จำกัด ด้านบนล่างนำหน้าและต่อท้าย

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

3 - ลากจากมุมมองเนื้อหาไปที่คำแนะนำเค้าโครงเฟรมและเลือกความกว้างเท่ากัน

4 - ตั้งค่าคงที่ข้อจำกัดความสูงให้กับมุมมองเนื้อหา

เห็นได้ชัดว่าคุณไม่จำเป็นต้องระบุความสูงเลย! ซึ่งจะดีมากหากมีการเปลี่ยนแปลงด้วยเหตุผลบางประการ (คุณปรับขนาดส่วนประกอบหรือเปลี่ยนขนาดตัวอักษร)

ฉันเพิ่งทำตามบทช่วยสอนนี้และทุกอย่างได้ผล: http://natashatherobot.com/ios-autolayout-scrollview/

(หมายเหตุด้านข้าง: ไม่จำเป็นต้องใช้ viewDidLayoutSubviews เว้นแต่คุณต้องการจัดมุมมองไว้ตรงกลางรายการของขั้นตอนจึงสั้นลง)

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

ที่สำคัญคือ contentSize

สิ่งนี้มักจะหายไปและไม่ได้ระบุไว้เมื่อเพิ่ม UIScrollView

เลือก UIScrollView และเลือก Identity Inspector

เพิ่มcontentSizekeyPath เป็นsizescrollView ใน Identity Inspector และตั้งค่าเป็น (320, 1000)

เลื่อนออกไป

หากคุณใช้การจัดวางอัตโนมัติมากกว่าแนวทางที่ดีที่สุดคือการใช้ UITableViewController กับเซลล์แบบคงที่ในสตอรีบอร์ด

ฉันเคยประสบปัญหากับมุมมองที่ต้องการการเลื่อนมากขึ้นดังนั้นให้เปลี่ยน UIScrollView ด้วยเทคนิคที่กล่าวถึงข้างต้น