เล่นกับ Layout และ UIImageView แบบง่ายๆ กันนะ

ใน Xcode 8 เป็นต้นมา เราสามารถจัดการ Layout ของ UI ต่างๆ ได้ทั้งแบบ without Auto Layout (Autosizing Mask) และ Auto Layout (Constraints)  ไปพร้อมๆ กันได้ ซึ่งเรามาลองดูกันค่ะ ว่าทำอย่างไรบ้าง โดยจะลองสร้างแอปพลิเคชันที่มีหน้าตาประมาณนี้ค่ะ





เริ่มต้นเราลองสร้างแอปพลิเคชันง่ายๆ สักอัน โดยเริ่มจากสร้าง Project ใหม่ขึ้นมาค่ะ 


เมื่อเราได้โปรเจคมาแล้ว ให้เลือกที่ Main.storyboard โดยสังเกตว่าที่ File Inspector  





จะมีการเลือกไว้ที่ User Auto Layout ก่อนถ้าจะใช้การกำหนด Layout ด้วย Autosizing Mask จะต้องเอาเครื่องหมายถูกบริเวณนี้ออก

แต่เดี๋ยวนี้ไม่ต้องแล้วค่ะ เราสามารถใช้การจัดตำแหน่งแบบ Autosizing Mask โดยไม่ต้องเอาเครื่องหมายถูกออกอีกแล้วค่ะ












คราวนี้เราลองวาง UIImageView ดูบ้าง ซึ่งต้องการให้ภาพมีขนาดเต็มหน้าจอ ดังนั้นเราลองกำหนด Autoresizing ดังภาพ เมื่อใส่ภาพในโปนเจคเรียบร้อย และลอง Run Simulator ดู เราจะได้ภาพเต็มจอตามที่ตั้งใจค่ะ











ถัดมาเราจะใส่ Effect เพื่อให้ภาพใน UIImageView มีลักษณะ Blur ไม่ได้ยากค่ะ เพียงแค่ เลือกที่ Object Library แล้วเลือกใช้  Visual Effect View with Blur ลากไปวางทับบน UIImageView และขยายขนาดให้เต็มพื้นที่ดังภาพ 

  

หลังจากนั้น มาถึงการจัด Layout ละค่ะ เพียงคลิกที่ Constraints แล้วกำหนดระยะดังภาพ 





เพื่อขยายขนาดขนาดของ Effect Blur ให้เต็มหน้าจอ ซึ่งเหมือนกับการขยาย UIImageView เช่นกัน เมื่อกำหนดแล้ว ก็กด Add Constraints แค่นั้นค่ะ

พอ Run Simulator ดูก็จะได้ตามต้องการแล้วค่ะ


จากต้องนี้เราน่าจะพอใช้การจัด Layout ทั้ง 2 แบบเป็นแล้ว ถ้าอย่างงั้นมาจัด Layout ให้ UIImageView แล้วปรับรูปทรงของภาพดูบ้างดีกว่าค่ะ







เริ่มจากเราจะวาง UIImageView สัก 2 อันที่หน้าจอ โดยจัด Layout ด้วย Constraints ค่ะ




สิ่งที่เพิ่มเติมจากการจัดตำแหน่งคือ Width กับ Height อันนี้ไว้กำหนดขนาดของ UI ที่จะใช้แสดงผลน่ะค่ะ นั่นคือ ต้องการให้รูปมีขนาดเท่าไหร่นั่นแหล่ะ เสร็จแล้วคลิก Add Constraints ค่ะ

ทำให้ UIImageView อันที่ 2 ด้วยนะคะ


กำหนดเสร็จแล้วก็ใส่รูปให้กับ UIImageView ทั้ง 2 อันค่ะ อันนี้ไม่น่าจะยากอะไร (เลือก Attributes Inspector แล้วตรง Image ก็ระบุชื่อรูปลงไป)



จากนั้นเอา UIImageView มาวางอีกสักอัน แต่คราวนี้เราใช้การกำหนด Layout แล้ว Autosizing บ้าง ตามรูปเลยค่ะ

แล้วอย่าลืมใส่รูปให้กับ UIImageView อันที่ 3 นะคะ

ถึงเวลามาเขียน Code กันบ้างค่ะ อันดับแรกเลยค่ะ ประกาศ Outlet ให้กับ UIImage ทั้ง 3 อัน


ทีนี้เราอยากให้ภาพมีมุมโค้งๆ คำสั่งที่ใช้ก็ง่ายๆ ค่ะ เราจะลองทำกับ UIImageView 2 อันบนนะคะ คำสั่งมีเพียงแค่นี้เองค่ะ

UIImageView อันที่ 3 เราไม่ได้ใส่คำสั่งใดๆ ก็จะเป็นสี่เหลี่ยมมุมฉากเหมือนเดิม แต่พอเราย้อนไปดูรูปตัวอย่างสักหน่อยจะเห็นว่า จริงๆ รูปที่ 2 มีขนาดเล็กกว่ารูปอื่น ต้องบอกก่อนนะคะว่า ในการจัดการกับ UI ที่กำหนดตำแหน่งด้วย Constraint จะมีวิธีเขียนคำสั่งต่างจากการจัดแบบ Autosizing นะคะ ดังนั้นภาพที่ 2 เราใช้ Constraint จึงต้องใช้คำสั่งดังนี้ค่ะ


แต่ถ้าเป็นภาพที่ 3 ที่ใช้ Autosizing จะใช้คำสั่งว่า



เพียงเท่านี้ก็น่าจะพอนำเรื่องการจัด Layout ไปประยุกต์ใช้ได้แล้วยนะคะ คราวหน้าจะลองเอาวิธีจัดการลักษณะของ UIImageView ไปลองเล่นกับ UI อื่นๆ ดูบ้าง






Comments