UIScrollView contentInset คืออะไร

158

บางคนสามารถอธิบายให้ฉันทราบได้ว่าคุณสมบัติ contentInset ในUIScrollViewอินสแตนซ์นั้นใช้ทำอะไร และอาจให้ตัวอย่าง

uiscrollview

240

มันตั้งระยะห่างของสิ่งที่ใส่เข้าไประหว่างมุมมองเนื้อหาและมุมมองเลื่อนล้อมรอบ

Obj-C

aScrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 7.0);

สวิฟท์ 5.0

aScrollView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 7.0)

นี่คือบทความอ้างอิงห้องสมุด iOSที่ดีเกี่ยวกับมุมมองเลื่อนที่มีภาพหน้าจอที่ให้ข้อมูล (รูปที่ 1-3) - ฉันจะทำซ้ำผ่านข้อความที่นี่:

  _|←_cW_→_|_↓_
   |       | 
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
  _|_______|___ 
             ↑


   (cH = contentSize.height; cW = contentSize.width)

มุมมองเลื่อนล้อมรอบมุมมองเนื้อหารวมถึงช่องว่างใด ๆ ที่ระบุไว้โดยเนื้อหาที่ระบุ

— jball
แหล่งที่มา

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

— ชาวต่างชาติ

28

ใช่มันวางเนื้อหาไว้ด้านในของมุมมองเลื่อน มันคล้ายกับpaddingคุณสมบัติCSS

— Marc W

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

— jakev

@jakev ไม่คุณสมบัติ. frame ควบคุมขนาดของ scrollview ภายในเป็นพาเรนต์ (ดูคำตอบนี้: stackoverflow.com/questions/5361369/… ) การตั้งค่า contentInsets เป็น 0 สำหรับทุกด้านเพียงหมายความว่าเนื้อหาจะไม่ได้รับการเสริมทั้งหมดภายใน scrollview ดังนั้นเมื่อคุณเลื่อนไปที่ด้านบนเนื้อหาจะอยู่ตรงข้ามกับด้านบนของแถบเลื่อน หากคุณเลื่อนไปที่ด้านล่างเนื้อหาจะไปถึงด้านล่างขวาของ scrollview

— Jeremy Wiebe

เป็นไปได้หรือไม่ที่จะทำให้ contentInset อยู่เสมอแม้ว่าจะทำการเลื่อนไปทางด้านบนเสมอ (contenInset) ของ scrollView

— Chlebta

86

ในขณะที่คำตอบของ jball เป็นคำอธิบายที่ดีเลิศเกี่ยวกับการแทรกเนื้อหา แต่ก็ไม่ได้ตอบคำถามว่าจะใช้เมื่อไร ฉันจะยืมจากไดอะแกรมของเขา:

  _|←_cW_→_|_↓_
   |       | 
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
   |content|    
-------------↑-

นั่นคือสิ่งที่คุณจะได้รับเมื่อคุณทำ แต่ประโยชน์ของมันจะแสดงเฉพาะเมื่อคุณเลื่อน:

  _|←_cW_→_|_↓_
   |content| ← content is still visible
---------------
   |content| ↑
 ↑ |content| contentInset.top
cH |content|
 ↓ |content| contentInset.bottom
   |content| ↓
---------------
  _|_______|___ 
             ↑

เนื้อหาแถวบนนั้นจะยังคงปรากฏให้เห็นเพราะยังอยู่ในกรอบของมุมมองเลื่อน วิธีคิดอย่างหนึ่งของการชดเชยยอดนิยมคือ "จะเลื่อนเนื้อหาลงไปที่มุมมองการเลื่อนเมื่อเราเลื่อนไปจนถึงด้านบนสุด"

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

— เฟเบียน
แหล่งที่มา

สิ่งที่ดีในที่นี้คือคุณสามารถใช้ส่วนเสริมเพื่อสร้างเอฟเฟกต์ "เลื่อนภายใต้แถบสถานะด้วยเบลอ"

— TheEye

ตัวอย่างเกี่ยวกับแอพรูปภาพเข้าใจง่าย

— abhimuralidharan

8

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

พิจารณากรณีที่เรามีพื้นที่เชิงตรรกะสามส่วนของหน้าจอ:

TOP BUTTONS

TEXT

BOTTOM TAB BAR

และเราต้องการให้ TEXT ไม่ปรากฏอย่างโปร่งใสภายใต้ปุ่มด้านบน แต่เราต้องการให้ข้อความปรากฏอยู่ด้านล่างแถบ TAB TAB และยังคงอนุญาตให้เลื่อนเพื่อให้เราสามารถอัปเดตข้อความที่อยู่ใต้ BOTTOM TAB BAR

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

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

— Faisal Memon
แหล่งที่มา

4

มันใช้เพื่อเพิ่มการขยาย UIScrollView

หากไม่มีcontentInsetมุมมองตารางจะเป็นดังนี้:

จากนั้นตั้งค่าcontentInset:

tableView.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)

ผลกระทบดังต่อไปนี้:

ดูเหมือนว่าจะดีขึ้นใช่มั้ย

และฉันเขียนบล็อกเพื่อศึกษาcontentInsetคำติชมก็ยินดีต้อนรับ

— fujianjin6471
แหล่งที่มา

2

เป็นคำถามที่ดีมาก

พิจารณาตัวอย่างต่อไปนี้ ( scrollerเป็น UIScrollView):

float offset = 1000;
[super viewDidLoad];
for (int i=0;i<500; i++) {
    UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(i * 100, 50, 95, 100)] autorelease];
    [label setText:[NSString stringWithFormat:@"label %d",i]];
    [self.scroller addSubview:label];
    [self.scroller setContentSize:CGSizeMake(self.view.frame.size.width * 2 + offset, 0)];
    [self.scroller setContentInset:UIEdgeInsetsMake(0, -offset, 0, 0)];
}

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

— แดน Rosenstark
แหล่งที่มา