# Display todo list

## สร้างหน้าจอแสดงรายการกัน

เราจะใช้ TableView ในการแสดงรายการ Todo item ของเรา เริ่มที่เลือก **Table View** ใน Object Library

![เลือก Table View](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FK3PITzrL9mLlEjD6qa7s%2FScreen%20Shot%202022-06-26%20at%2011.07.28%20AM.png?alt=media\&token=6f1e99cf-5f22-4319-8553-7a3ab9f1a893)

จากนั้นให้เราลากลงมาใส่ใน View หลักของเราเลยดังรูป แบบนี้

![ลาก TableView จาก Object Library มาใส่ลงใน View หลัก](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FelsVf4aKRMrZeLq8rnSY%2FJun-26-2022%2011-10-29%20AM.gif?alt=media\&token=cb3d8dd7-4ac5-4c03-8022-66ee1d1eccc7)

จากนั้นเราสามารถลากเพื่อปรับขนาดของ TableView ที่เราใส่ลงไปได้&#x20;

แต่จะพบว่าเมื่อเราเปลี่ยนรุ่น device เป็น iPhone อื่น เช่น iPhone 11 ที่หน้าจอมีขนาดใหญ่กว่า ตัว TableView เราจะไม่พอดี หรือว่าเราเปลี่ยนไปใช้ iPhone 13 mini ที่มีขนาดหน้าจอเล็กกว่าจะพบว่า TableView ของเราจะล้นหน้าจอ เพื่อแก้ปัญหานี้เราจะใช้การจัด Auto Layout ในการ Adapt view ของเราให้เข้ากับหน้าจอ

![ขนาดของตารางที่เล็กกว่า หรือใหญ่กว่า เมื่อเปลี่ยนชนิดอุปกรณ์ที่มีขนาดหน้าจอไม่เท่ากัน](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FZoApQvItNbWJ2CtRfWPI%2FJun-26-2022%2011-17-47%20AM.gif?alt=media\&token=547cddb5-2822-470a-809f-7f79b3544c2f)

{% hint style="info" %}
โดยปกติ Storyboard จะไม่แสดงเส้นขอบเขตของ View แต่ละอันบางครั้งทำให้เราเห็นไม่ชัด เราสามารถเปิดให้เห็นได้ง่ายขึ้นที่ Editor -> Canvas -> Show Bounds Rectangles
{% endhint %}

![Show Bounds Rectangles](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FbQfqni9jDSm4jx3ogD4Q%2FScreen%20Shot%202022-06-26%20at%2011.37.45%20AM.png?alt=media\&token=5adf2056-56ce-4d05-959c-ba0c7ae2c9de)
