Self-Sizing Cell in UITableView, UICollectionView

นี่เรียกได้ว่าเป็น pain เล็กๆ อย่างหนึ่งของ iOS Developer เลยก็ว่าได้
สิ่งที่ว่าคือการ "คำนวณความสูงของ UITableViewCell" ซึ่งเมื่อก่อนจะต้องคำนวณเอง

ซึ่งผมเคยเขียนไว้ที่นี่ Dynamic Height of UITableViewCell
เมื่อ iOS8 SDK ออกมา สิ่งที่น่าตื่นเต้นที่สุดใน What's new in UITableView and UICollectionView ก็คือเรื่องนี่แหละ "Self Sizing Cell" หรือการที่ Cell สามารถคำนวณความสูงจาก Content ในตัวเองได้

แล้วมันจะคำนวณได้ยังไง ? สิ่งที่มาช่วย และเราต้องเรียนรู้ในครั้งนี้คือ Autolayout นั่นเอง
โดย Code ที่เราจะเขียนมีเพียงแค่ 2 บรรทัดเท่านั้นใน -ViewDidLoad


ต่อมาก็เป็นขั้นตอนสำคัญนั่นคือ การใส่ Constrains ของ Autolayout ให้ถูกต้อง มาดูตัวอย่างกัน

นี่คือ รูปร่าง Prototype Cell ง่ายๆ ที่เราจะนำมาเป็นตัวอย่างกันนะ คล้ายๆ Subtitle Style เลย ขั้นแรกใน Label แต่ละตัว อย่าลืม! ปรับ Lines Number ให้เป็น 0 ด้วย



นี่คือ Constrains ที่ผมใส่ให้ Name Label เป็นแบบนี้

  • Leading Spacing to Container Margin บอกว่าห่างจากขอบ Cell ด้านหน้าเท่าไหร่
  • Trailing Spacing to Container Margin บอกว่าห่างจากขอบ Cell ด้านหลังเท่าไหร่
  • Top Space to Container Margin บอกว่าห่างจากขอบ Cell ด้านบนเท่าไหร่
  • Width คือกำหนดขนาดความกว้างแบบ Fixed ไปเลย
** ในตอนนี้เราจะเห็นว่า Consrains ยังคงไม่สมบูรณ์อยู่ เนื่องจาก Autolayout ไม่รู้ว่า Name Label จะต้องห่างจากขอบล่างเท่าไหร่ ลอง Build and Run ดูก็จะรู้ครับว่า Name Label จะถูก Render ออกมาแบบไหน

จากนั้นก็ใส่ Constrains ให้ Address Label

  • Leading Spacing to Container Margin บอกว่าห่างจากขอบ Cell ด้านหน้าเท่าไหร่
  • Trailing Spacing to Container Margin บอกว่าห่างจากขอบ Cell ด้านหลังเท่าไหร่
  • Bottom Space to Container Margin บอกว่าห่างจากขอบ Cell ด้านล่างเท่าไหร่
  • Vertical Spacing [from Name Label] คราวนี้จะเป็นช่องว่างที่อยู่ระหว่าง Name Label และ Address Label (เมื่อใส่อันนี้แล้ว รอยประสีส้มๆ ที่เคยมีที่ Name Label ก็จะหายไป)
เราก็ได้ผลลัพธ์ของ Cell และ Content ที่ถูกต้อง 

เท่านี้แหละ และแน่นอนว่าสามารถใช้กับ UICollectionView ได้เช่นเดียวกันนะ ถ้าคนที่ชินกับ Autolayout อยู่แล้ว คงจะง่ายมากๆ เลย แต่สำหรับคนที่เลี่ยงมาตลอด (อย่างผม) ตอนนี้ก็หนีไม่พ้นเมื่อตอนนี้มีหน้าจอหลายขนาดมากขึ้น และแนวคิดที่น่าสนใจอย่าง Size Classes คงจะไม่มีใครทำแบบเดิมอีกต่อไปแล้วล่ะ และพอลองเล่น ลองใช้งานดูจริงๆ มันก็ไม่ได้ยากอย่างที่คิดนะ :)

นี่คือผลลัพธ์จากการที่ Constrains ของ Autolayout ไม่สมบูรณ์ตามที่ผมบอกไว้ด้านบน
เนื่องจากเราใส่ Autolayout ให้ ขอบหน้า,  บน และกำหนดความกว้างให้ Name Label และ ขอบหน้า, หลัง, ล่าง ให้ Address Label ดังนั้น Name Label ก็จะ Render เลยขอบล่างไป และ Address Label ก็ Render ทันที โดยไม่สนใจความห่างของ Label ทั้งสองตัว ด้วยความสูงที่เรา estimated ไว้ในตอนแรก (68 points)

Popular posts from this blog

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

"อีสุกอีใส" ประสบการณ์เมื่อต้องมาเป็นตอนอายุ 22

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android