# Add navigationBar with + button

## ใส่ชื่อแอพ เพิ่มปุ่มบวก

เรามาเพิ่มให้มี แถบด้านบนกันดีกว่า จะได้เตรียมไว้ทำหน้าเพิ่ม todo item ด้วย

![](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfJiwrRM_vNixumV0av%2F-LfJkFia1wL7Aab3XryL%2FScreen%20Shot%202019-05-20%20at%2017.19.29.png?alt=media\&token=cb2fd7da-0feb-42a0-b268-43b4e50b7b0b)

ขั้นแรกให้เราเลือกที่ ViewController ก่อน \
กดที่เมนู Editor -> Embed In -> Navigation Controller

![](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGt8X7cAEvjgQ65xiCL%2F-LGt8ZuAeG6qD_MObFuD%2FScreen%20Shot%202018-07-08%20at%2016.05.11.png?alt=media\&token=b71f1b2e-52e0-4f07-90e2-5c6d14ece824)

เราจะได้ Navigation Controller มาหนึ่งอัน ชี้มาที่ ViewController

![](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfJiwrRM_vNixumV0av%2F-LfJizLxzpxZ5wUwCcb6%2FScreen%20Shot%202019-05-20%20at%2017.13.52.png?alt=media\&token=67314934-0a57-44cd-bfbf-4223a6531555)

จากนั้นให้เราตั้งชื่อ โดยการเลือกที่ Navigation Item ของ ViewController ที่เพิ่มมา\
เลือก Attributes Inspector ใส่ Todo ลงใน Title property

![ตั้ง Title ใน Attributes Inspector](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfJiwrRM_vNixumV0av%2F-LfJjDyN0L8RhRuwW7ks%2FScreen%20Shot%202019-05-20%20at%2017.14.50.png?alt=media\&token=fedf5036-975a-4ab1-8f69-5ba745388cde)

เพิ่มปุ่ม Add โดยการลาก **Bar Button Item** จาก Object Library ไปที่มุมขวาของ Navigation Bar

เลือก **System Item** เป็น **Add** ปุ่มจะเปลี่ยนเป็นเครื่องหมาย +

![เพิ่มปุ่ม Add ด้วย Bar Button Item](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfJiwrRM_vNixumV0av%2F-LfJk2huVV1Hs9Qy4NJJ%2F11.gif?alt=media\&token=1b5c72fd-9998-407a-ac51-74b6af8a367f)

เมื่อรันแอพอีกครั้งจะได้หน้าตาแบบนี้

![](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfJiwrRM_vNixumV0av%2F-LfJkFia1wL7Aab3XryL%2FScreen%20Shot%202019-05-20%20at%2017.19.29.png?alt=media\&token=cb2fd7da-0feb-42a0-b268-43b4e50b7b0b)
