[iOS Dev] Dynamic Height of UITableViewCell


เพื่อความสวยงามในการแสดงผล UITableViewCell วันนี้จะมาพูดถึง
Dynamic Height of UITableViewCell ซึ่งก็น่าจะใช้กันบ่อยๆ :)

ในกรณีนี้จะต้อง Custom Cell นะครับ และไม่มีการใช้ Auto Layout
ซึ่งใช้ได้กับทั้ง 2 วิธี (Prototype Content, Custom Cell with Nib File)

ตัวอย่างเช่น Comment ใน Youtube แล้วกัน

นึกภาพว่า นี่คือ UITableView นะครับ จะเห็นได้ว่าแต่ละบรรทัดมี Element เหมือนกันหมด
แต่ขนาดพื้นที่ของแต่ละ Cell ต่างกัน เนื่องจาก Content ของแต่ละ Cell มีความยาวไม่เท่ากัน

ถ้าเราไม่ทำ Dynamic Height ก็จะทำให้เกิดการตัดประโยคเป็น "..." ตาม Style ของ iOS
แล้วจะแก้ปัญหานี้ยังไงดี ... สิ่งที่ผมจะแนะนำคือคำตอบ

โดย iOS มี API ที่จะคำนวณขนาดจาก String ที่เราต้องการอยู่แล้ว
ลองคิดตามนะ สมมติว่า Element ในแต่ละ Cell มีแค่ (จากตัวอย่าง) ชื่อคนคอมเมนท์ และ คอมเมนท์



ขนาดของ Cell นั้นๆ จะ == (sizeOf(ชื่อ) + sizeOf(คอมเมนท์)) + Space Offset นิดหน่อย
วิธีการ Coding ก็คือ ผมจะมี Comment Model ที่สร้างขึ้นมา ก็ใช้ Model นี่แหละครับ ในการคำนวณ
โดยจะสร้าง Property เพิ่มขึ้นมาอีก 2 ตัวคือ authorSize และ contentSize


จากนั้นก็คำนวณ แล้วทำเป็น Getter ของ Property 2 ตัวที่สร้างขึ้น ด้วย

- (CGSize)sizeWithFont:(UIFont *) constrainedSize:(CGSize);

โดยส่วนของ ConstrainedSize นั้นจะเป็นค่าที่เราคาดหวังจะให้มันเป็น ซึ่งบอกไปแค่ขนาดความกว้างก็พอ ความสูงใส่เยอะๆ ไปเลย ให้ method คำนวณให้เอง


จากนั้นใน UITableViewDelegate ก็ให้ไปเขียน - heightForRowAtIndexPath แบบนี้


และก็จะพบว่า เห้ย! มันทำไมมันยังไม่ยืดเลย ในกรณีที่ Label ไม่ยืดนั้นมีอยู่ 2 กรณีคือ
-  เราไปปรับ Default Line ของ Label ให้ปรับเป็น 0 นะครับ (0 หมายถึงไม่จำกัดบรรทัด)
- ไม่ได้ปรับ AutoSizing ของ UILabel นั้นๆ (ตามภาพ)


เท่านี้เอง ไม่ยากเลยเนอะ :)

Popular posts from this blog

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

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

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