วิธีใส่รูปหัวท้ายบน UIButton (Swift)

Harikan Kangbid
Aug 27, 2017 · 3 min read

สวัสดีครับผมนาย หริกานต์ กางบิด เป็น iOS Developer ชั้นผู้น้อย(น้อยทางความรู้) นี้เป็นการเขียนบล็อกแรกของผม เหตุเริ่มจากพี่ๆที่เคยฝึกงานด้วยเขียนบล็อกกันอย่างบ้าคลั่ง เขียนแบบวันๆไม่ทำงานกันหรอ ก็เลยได้แรงบันดาลใจอยากเขียนบ้างเอาความรู้ที่มีน้อยเหลือเกินมาแชร์ให้กับเหล่า iOS Dev ทั้งหลาย (เฉพาะ Swift นะครับ react, crossplatform เชิญทางหนีไฟ แต่ถ้าเธอมีใจให้มาทางเรา 555555555 )

วันนี้จะมาแชร์วิธีการใส่รูปฝั่งซ้ายและฝั่งขวาบน UIButton ครับ

แบบนี้ เฮ้ย !! เป็นเล่น

อันดับแรก Create Project เด้อจ้า

ตั้งชื่ออะไรก็ได้ เอาตามหัวใจเรียกร้องเลยครับ (จะชื่อน้องหวานบ้านดอนหรือน้องพรหมู่สี่ก็ตามแต่)
ก็จะได้ Project เริ่มต้นขึ้นมานิ

ต่อมาสร้างไฟล์ Swift เพื่อเอาไว้ Custom Button ที่เราจะสร้างเด้อจ้า

คลิกขวาที่เมนูฝั่งซ้ายเลือก New File ( นิวไฟเออะ ออกเสียงประมาณนี้ คุณแม่บอกมา !! )
ตั้งชื่อตามผมไปก่อนก็ได้ CustomButton
จะได้ไฟล์ Swift

มาเริ่มส่วนที่ Code กันเลยแมกนั่มมมม (จะใส่ Code เป็นรูปเพื่อรณรงค์ไม่ให้ Dev Copy and Patse นะครับ แต่ผมก็อปวางบ่อยมากอย่าไปบอกใครนะ อิอิ)

สร้าง class CustomButton โดย Extend มากจาก UIButton อย่าลืม import UIKit นะจ๊ะ อาร์สยาม
override ฟังก์ชั่น awakeFromNib
สร้าง ImageView ฝั่งซ้ายและขวาแบบ Closure ตัวแปรจะประกาศเป็น let ก็ได้นะครับ, AutosizingMask ให้เป็น false และสร้างฟังก์ชั่น setUpView
ภายใน setUpView กำหนดระยะห่างระหว่างรูปกับ ButtonView ด้วยการเอา ความสูงหาร 4 และ กำหนดขนาดรูปด้วยการเอา ความสูงหาร 2
กำหนดค่าความโค้งของขอบ Button เป็น size (ความสูงหาร 2)
กำหนด AutosizingMask ของ titleLabel ให้เป็น false , กำหนด Alignment ข้อความให้อยู่ตรงกลาง , กำหนดข้อความแสดงเพียงบรรทัดเดียว, กำหนดให้ข้อความตัดคำท้ายประโยคเพราะ Default มันจะเป็นจุดจุดจุดตรงกลางเวลาข้อความยาวๆ
addSubView(imageLeft) , addSubView(imageRight)
แนะนำให้ดูรูปแล้วพิมพ์ตามเลยครับ คำอธิบายข้างล่างอ่านเองยังงงเองเลยครับ 55555

addConstraint imageLeft
- กำหนด leftAnchor (ด้านซ้าย) ของ imageLeft โดย
ค่า equalT0 เป็น leftAnchor , ค่า constant เป็น margin ที่กำหนดไว้
- กำหนด rightAnchor (ด้านขวา) ของ imageLeft โดย
ค่า equalT0 เป็น titleLabel!.leftAnchor , ค่า constant เป็น -margin
- กำหนด topAnchor (ด้านบน) ของ imageLeft โดย
ค่า equalT0 เป็น topAnchor , ค่า constant เป็น margin
- กำหนด bottomAnchor ของ imageLeft โดย
ค่า equalT0 เป็น bottomAnchor , ค่า constant เป็น -margin
- กำหนด heightAnchor (ความสูง) ของ imageLeft โดย
ค่า equalT0Constant เป็น size ที่กำหนดไว้
- กำหนด widthAnchor (ความกว้าง) ของ imageLeft โดย
ค่า equalT0Constant เป็น size

แนะนำให้ดูรูปแล้วพิมพ์ตามเลยครับ อ่านอีกทีก็งงอยู่ดี T__T

addConstraint titleLabel
- กำหนด rightAnchor (ด้านขวา) ของ titleLabel โดย
ค่า equalT0 เป็น imageRight.leftAnchor , ค่า constant เป็น -margin
- กำหนด topAnchor (ด้านบน) ของ titleLabel โดย
ค่า equalT0 เป็น topAnchor , ค่า constant เป็น 0 (ศูนย์)
- กำหนด bottomAnchor ของ titleLabel โดย
ค่า equalT0 เป็น bottomAnchor , ค่า constant เป็น 0 (ศูนย์)

แนะนำให้ดูรูปแล้วพิมพ์ตามเลยครับ อ่าน 3 รอบก็งง 3 รอบ แต่เธอที่ชอบแค่รอบเดียวเราก็รักแล้ว

addConstraint imageRight
- กำหนด rightAnchor (ด้านขวา) ของ imageRight โดย
ค่า equalT0 เป็น rightAnchor , ค่า constant เป็น -margin
- กำหนด topAnchor (ด้านบน) ของ imageRight โดย
ค่า equalT0 เป็น topAnchor , ค่า constant เป็น margin
- กำหนด bottomAnchor ของ imageRight โดย
ค่า equalT0 เป็น bottomAnchor , ค่า constant เป็น -margin
- กำหนด heightAnchor (ความสูง) ของ imageRight โดย
ค่า equalT0Constant เป็น size ที่กำหนดไว้
- กำหนด widthAnchor (ความกว้าง) ของ imageRight โดย
ค่า equalT0Constant เป็น size

สร้าง UIButton จาก Storyboard

คลิกที่ main.storyboard เลือก Button ที่เมนูฝั่งขวา
ลากวางแล้ว add Constraint ตามใจชอบ กรณีนี้ผมให้อยู่ตรงกลางจอโดยเลือก align (icon สี่เหลี่ยมยาวๆไม่เท่ากัน) และติ๊ก Horizontally in container และติ๊ก Vertically in container
กำหนดความกว้างและความสูงโดย คลิกที่ ButtonView กด control ค้างไว้ ลากเม้าท์ หรือ trackpad ไปเฉียงๆแล้วเลือก width และ height
กำหนดความสูง 44 ตาม guideline ปุ่มของ apple (คลิกที่ขีดสั้นๆแนวตั้ง) และความกว้างตามใจชอบ (คลิกที่ขีดยาวแนวนอน), เปลี่ยน text color เป็นสีขาว , เปลี่ยนข้อความเป็น Search, เปลี่ยน background เป็นสีดำ ที่เมนูฝั่งขวา
ไปเมนูฝั่งขวา Show the identity inspector แล้วใส่ class เป็น CustomButton
กดเมนูวงกลมสองวงฝั่งขวาแล้วลาก IBOutlet แล้วตั้งชื่อ Button
add รูปที่ Folder Assets
add รูป imageLeft และ imageRight บน viewDidLoad
ลอง Run ออกมาก็จะได้แบบนี้ (น้ำตาจะไหลฝนตก หิวข้าว T__T)

ก็ประมาณนี้ครับอาจยาวและยืดเยื้อไปหน่อยแต่หวังว่าคงเป็นประโยชน์แก่ผู้อ่านไม่มากก็น้อยขอบคุณครับ (ทำไมประโยคปิดมันคุ้นๆกับการเขียนรายงานตอนประถม)

ตัวอย่าง Project https://github.com/HarikanKangbid/DemoButtonView.git

)

Harikan Kangbid

Written by

Junior iOS Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade