🖥️
iOS App with Pop
UIKit Swift 5
UIKit Swift 5
  • iOS App development
  • Swift
    • Variable & Constant
    • Number & String
    • Operator
    • Array, Dictionary & Tuple
    • Enum
    • Optional
    • Function
    • Class & Struct
    • Branching
    • Loops
    • Error handler
    • Protocol
    • Extension
  • Create New Project
  • Introduction to Xcode
  • Scene-Based Life-Cycle
  • UIViewController
  • Storyboard
  • First Run
  • Display todo list
  • Basic Auto Layout
  • MVC
  • Model
  • Binding TableView
  • Binding TableViewCell
  • TableViewDelegate
  • Add navigationBar with + button
  • Add new item page
  • TextField and Switch
  • Binding action
  • Add mock item to todo list
  • What is weak?
  • Finish add item
  • Delete todo item
  • Edit todo item
  • Custom new layout
  • Adding new delegate
  • Refactor
  • Pushing edit view
  • Large navigation
  • Drag item
  • Drop item (in app)
  • Save data
  • Where to go from here?
Powered by GitBook
On this page
  • ทำหน้ากรอกข้อมูล
  • Auto Layout
  • Adjust UI กันหน่อย

TextField and Switch

PreviousAdd new item pageNextBinding action

Last updated 2 years ago

ทำหน้ากรอกข้อมูล

หน้ากรอกเพิ่ม Todo ใหม่ของเราจะประกอบด้วย

  1. TextField สำหรับกรอกชื่อรายการใหม่

  2. Switch ที่ใช้ในการตั้งว่ารายการนี้ทำไปแล้วหรือยัง

  3. Label ข้อความว่า is done สำหรับระบุว่า Switch ใช้ทำอะไร

ทั้งหมดนี้ให้เราลากมาจาก Object Library เหมือนเดิม

เพื่อให้หน้าจอเวลาแสดงขึ้นมาเรารู้ว่า TextField ให้กรอกอะไร ให้เราตั้ง Placeholder ใน Attributes Inspector เป็น Title

  1. คลิ๊กที่ TextField

  2. เลือก Attributes Inspector ด้านขวา ใส่ Title ลงใน Placeholder

เมื่อเรารัน แนวตั้งจะดูปกติดี แต่พอเราหมุนเป็นแนวนอน (Cmd + ลูกศรซ้ายขวา) จะเห็นว่าเบี้ยวอีกแล้ว เพราะเรายังไม่ได้จัด Auto layout อีกเช่นเคย

Auto Layout

เราจะจัด Auto layout ด้วยการจัดกลุ่มของของก่อน ด้วย StackView จากนั้นจึงค่อยระบุ constraint ด้านซ้าย ด้านบน และด้านขวา

StackView ถูกเพิ่มเข้ามาใน iOS 9 ทำให้เราสามารถจัดกลุ่มของของ ให้เหมือนกับอยู่ใน Table ของที่อยู่ภายในจะยืดหดตามขนาดของ StackView ได้โดยไม่ต้องสร้าง Constraint ทำให้สะดวกขึ้นเวลาที่ต้องเพิ่มหรือลดของออกจากกลุ่ม

  1. เราจะรวม Label กับ Switch ให้อยู่ใน StackView แนวนอนก่อน

  2. รวม TextField กับ StackView ในข้อแรกที่เราทำเป็น StackView แนวตั้ง

  3. จัด spacing ระหว่าง TextField กับ Label โดยกำหนด Spacing เป็น 8 ใน Attributes Indicator ของ StackView

  4. สร้าง Constraint ด้านบน 30 ด้านซ้ายและขวา อย่างละ 20

เมื่อเราผูกเสร็จแล้วให้รันดู จะได้ผลลัพธ์ตามรูป

แก้ Label ให้เป็น is done ใน Attributes Inspector

ปรับขนาด spacing ของ StackView (เลือกที่ StackView) ให้เป็น 0 เพื่อให้ label แสดง is done ได้อย่างถูกต้อง

ปรับ State ของ Switch ให้ default เป็น Turn Off ใน Attributes Inspector

Adjust UI กันหน่อย

ต้องการให้แป้นพิมพ์กำหนดตัวแรกเป็นตัวใหญ่อัตโนมัติ ให้เลือก TextField แล้วตั้ง Capitalization เป็น Sentences

หรือ เพิ่มให้มีปุ่ม clear เวลาพิมพ์

ลองเปลี่ยนค่าอื่น ๆ ใน Attributes Inspector เช่น สีข้อความ ฟอนต์ ขนาด

อ่านเพิ่มเติมได้จาก

UIStackView
เพิ่ม TextField, Label และ Switch
ระบุ Placeholder เป็น Title ให้ TextField
ยังไม่ได้จัด Auto Layout
รวมใน StackView
ผูก Constraint
แก้ Label เป็น is done แต่ขนาดยังไม่ถูกต้อง
ปรับ spacing ให้ StackView
เลือก Switch แล้วตั้ง State ใน Attributes Inspector เป็น Off