iPhone Programming III : More GUI

หลังจากที่ได้ลองเล่นกับ action และ event ต่างๆพอสมควร วันนี้เดี๋ยวมาลองการใช้งาน Control ตัวอื่นกันดูบ้าง สำหรับวันนี้ Control ที่เราจะได้ลองกันได้แก่

  • UIImageView
  • UITextField
  • UISwitch
  • UISlider
  • UIActionSheet
  • UIAlertView

หน้าตาโปรแกรมที่เราจะได้ลองทำก็ออกมาประมาณนี้

interface1

อธิบายกันก่อนว่าโปรแกรมเราทำอะไร

โปรแกรมที่เราจะทำก็คือ เราจะทดลองเล่นกับ UIImageView โดยเราสามารถ กด on/off เพื่อแสดงรูปหรือไม่แสดง และสามารถปรับค่า alpha (ค่าความโปร่งแสง) ของรูปจาก slider อีกทั้งเราจะได้ทดลองใช้ UIActionSheet และ UIAlertView

Let’s Go

ก่อนอื่นเราก็สร้างโปรเจคขึ้นมาครับ ให้ชื่อว่าอะไรก็ตามใจเลยครับ หลังจากนั้น เราก็ลาก Image View , Slider ,Switch , Label เข้ามาดังรูป

first_interface

จาก interface ที่เราได้ออกแบบไว้ จะเห็นว่า ผมได้นำ image view วางไว้ตำแหน่งเดียวกัน กับ Label ( Macfeteria ) เลย คือที่ทำอย่างนี้ก็เพื่อว่าอยากจะให้เห็นว่า เมื่อเราปรับค่า Alpha ของรูปแล้ว มันจะโปร่ง และถ้ารูปยิ่งโปร่งมากก็จะเห็นคำว่า Macfeteria มากขึ้น แล้วเราก็ลอง Compile/Run ดูครับ จะเห็นหน้าตาประมาณนี้

testimage

จะเห็นว่า UIImageView นั้นได้หายไป ก็เพราะว่าเรายังไม่ได้ใส่รูปให้มันนั่นเอง

ต่อไปเราจะเพิ่มรูปเข้าไปยัง โปรเจคของเราเพื่อนำมาใช้กับ image view วิธีการก็ไม่ยาก เราก็ Click ขวาไปที่ Resource แล้วก็เลือก Add > Existing Files … แล้วก็เลือกไฟล์รูปที่ต้องการ เมื่อเสร็จแล้วจะเห็นว่า ไฟล์ที่เราได้เลือกไป ได้เข้ามาอยู่ใน Resource เรียบร้อยแล้ว

addimage

กลับไปยัง Interface builder แล้วก็เลือกที่ UIImageView แล้วก็เปิด Inspector ขึ้นมา จะเห็นว่ามี Attribute ต่างๆให้ปรับ อธิบายทีละอย่างแล้วกัน

uiimageview

  • Image เป็นชื่อ file  ที่เราจะต้องการจะแสดงที่ imageview นี้
  • Mode การจัดการเกี่ยวกับภาพเป็นต้นว่า ปรับให้พอดีกับขนาด imageview , กำหนดให้ภาพอยู่ตรงกลางของ imageview เป็นต้น
  • Alpha ความโปร่งใส ถ้าไม่โปร่งเลยคือ 1.0 ถ้ายิ่งเลขน้อยก็จะยิ่งโปร่งใส
  • Tag เป็นค่าคงที่ของ object นี้ ( เดี๋ยวจะได้ใช้ในครั้งหน้า )
  • Drawing
    • Opaque บอกให้ uiimageview ไม่ต้องวาด object ที่อยู่ข้างหลัง ( ควรจะใช้ เพราะมันเพิ่มประสิทธิภาพ )
    • Hidden ก็แปลตรงเลยครับว่า จะให้มันซ่อน หรือแสดง
    • Clip Subviews จะทำการตัดขอบให้ไม่เกินขนาดของ view
  • Interaction
    • User Interaction Enabled ถ้าเปิด option นี้ก็จะทำให้ object  นี้สามารถตอบสนองต่อ event ต่างๆได้
    • Multiple Touch ก็เปิดให้ใช้งาน multiple touch ได้นั่นเอง

เมื่อเราได้ใส่รูปภาพเข้าไปแล้ว ถ้าลอง complie / run ก็จะเห็นรูปปรากฏยัง uiimageview ของเราเรียบร้อยแล้ว

Implement Controller Class

เมื่อเราได้ออกแบบหน้าตาของโปรแกรมเราเรียบร้อยไปแล้วส่วนหนึ่ง ต่อไปก็คือ การเขียน code นั่นเอง กลับไปที่ xcode และเริ่มเปิด controller class ของเรา หลังจากนั้นก็เขียน code ในส่วนของ interface ตามนี้ครับ

และส่วน implement ก็เป็นแบบนี้ครับ

aa

จาก code ข้างบน function ที่ชื่อ adjustAlpha เราจะไป link เข้ากับ slider เพื่อที่ว่า เมื่อเราเลื่อน slider ค่าของ alpha ก็จะเปลี่ยนไป และเราก็มี imageVisible ที่คอยเปิดปิด imageView ของเรา คิดว่าไม่น่ายากนะครับ

และหลังจากนั้น เราก็จะเชื่อม code ที่เราได้เขียนไปกับ interface ที่เราได้ออกแบบไว้

เราก็ลาก link เชื่อมกับ image view , slider , switch กับ m_imageView , m_slider , m_switch ตามลำดับ

link

หลังจากเสร็จแล้ว เราก็เชื่อม method ที่ชื่อว่า adjustAlpha เข้ากับ slider และ imageVisible เข้ากับ swich ให้เรียบร้อย  เมื่อเสร็จแล้ว click ขวาที่ File’s Owner ดูก็จะเห็นว่า object ต่างๆ ได้เชื่อมเข้าด้วยกันเรียบร้อยแล้ว

อย่าลืมปรับค่า max , min ของ slider ด้วยนะครับ เพราะ alpha ของ image มีแค่ 0 – 1.0 เราก็เปิด inspector ขึ้นมาแล้วก็ปรับ ค่า max ,min ให้เรียบร้อยดังรูป

slider

เมื่อเสร็จแล้วก็ Compile / Run ดูครับ แล้วลองเลื่อน slider ไปมาดูครับว่า ถ้าเราเลื่อนซ้ายรูปเราได้จางจนมองเห็นคำว่า macfeteria และเมื่อเลื่อนไปด้านขวารูปก็จะชัดขึ้นตามไปด้วยหรือเปล่า

programa

Action Sheet

จริงๆแล้ว action sheet ก็คล้ายๆกับ message box นะครับ คือจะเป็น message ขึ้นมาพร้อมกับ ปุ่มให้เราเลือกว่าจะ ok , cancel ประมาณนี้ และเราก็จะได้ลองใช้งานกัน สิ่งต่อไปที่เราจะทำเพิ่มเติมในโปรแกรมของเราก็คือ เราจะมี text field และ button อย่างละอัน โดยเมื่อกดไปที่ปุ่ม ก็จะมีหน้าต่าง action sheet ขึ้นมา ถ้ากด ok ก็จะมี alert ขึ้นมา บอกว่า Hello อะไรประมาณนี้

ก่อนอื่นเราก็ไปเพิ่ม button และ text field ให้กับ interface ของเราดังรูป

interface2

เมื่อเราได้วาง text field ลงไปยัง interface ของเราแล้วต่อไปเราจะมาทำความรู้จัก attribute ต่างๆของ text fields เพิ่มเติมกันอีกสักนิดว่ามีอะไรบ้าง

textfield

  • Text Field
    • PlaceHolder คือข้อความลางๆ ( สีเทาๆ ) เวลาที่ไม่มีอะไรอยู่ใน text field เลย
    • Clear When Editing Begins จะลบข้อความเก่า ทุกครั้งที่แก้ไข text field
    • Adjust To Fit ปรับขนาดตัวหนังสือให้พอดี แต่ไม่ตำ่ว่า ขนาดที่เรากำหนด
  • Text Input Traits
    • Capitalize เลือกว่าจะให้ตัวหนังสือเป็นตัวพิมพ์ใหญ่ หรือพิมพ์เล็ก โดยอาจจะแบ่งเป็นคำๆ หรือประโยค
    • Correction โปรแกรมจะตรวจความถูกต้องให้ด้วยว่า พิมพ์ถูกหรือไม่
    • Type แป้นพิมพ์เป็นแบบไหน ( ตัวหนังสือ , ตัวเลข , url ,เบอร์โทร )
    • Appearance ( Default , Alert ) ถ้าปรับเป็น alert แป้นพิมพ์จะโปร่งใสนิดๆ
    • Return Key ( Go , Done , etc ) ตรงนี้เราปรับ return key ให้ กับ keyboard อย่างตัวอย่างรูปข้างล่าง ผมปรับให้เป็น Yahoo!
      yahoo

ต่อไปก็คือเราจะเพิ่ม outlet เข้าไปยัง controller class ของเรา

และในส่วน implement endEdit ก็มีดังนี้

จาก code ข้างบน [sender resignFirtResponder] เราจะนำไป link เข้ากับ text field ของเราเพื่อที่ว่า เมื่อ user พิมพ์ข้อความเข้าไปยัง text field แล้ว เมื่อกด return ก็ให้เปลี่ยน first responder ไปยัง object อื่น เพราะถ้าหาก เราไม่ resign firstponder แล้วละก้อ แป้น keyboard ก็จะค้างอยู่แบบนั้น

เสร็จแล้วเราก็ link เข้ากับ event ที่ชื่อว่า Did End On Exit

endedit

และส่วน source code ของ saySomeThing ก็ได้ประมาณนี้

จาก code ข้างบนจะอธิบาย คร่าวๆก็คือ เราได้ประกาศ Action Sheet ขึ้นมาและกำหนดค่าต่างๆให้กับ sheet เป็นต้นว่า ข้อความต่างๆ และส่วนที่สำคัญมากคือ delegate:selft

*** ยังจำ delegate ได้ไหมครับ ? ****
สรุปง่ายๆว่า delegate:self เนี่ย เราได้กำหนดให้คลาสที่จะตอบสนองต่อ delegate method ของ action sheet นี้คือ คนที่สร้างตัวมันเอง ( ในกรณีนี้คือ GUIViewController ) และ delegate method ของ action sheet นี้ก็เช่นว่า  เมื่อกด ok ให้ไปทำอะไร เมื่อกด cancel ให้ไปทำอะไร

แล้วเราก็ link ให้เข้ากับ button ของเรา

saysome

เราลอง compile / run แล้วกด Say Something ! ดูครับ

action

กดแล้วก็ยังไม่เห็นว่ามีอะไรเกิดขึ้น ต่อไปเราจะ implement ส่วนของ delegate ของ action sheet กัน

Delegate

action sheet มี delegate method ต่างๆ ดังนี้

ผมเลือกใช้

ก็แล้วกันนะครับ และเราก็จะมา implement delegate ตัวนี้กัน โดย code มีดังนี้

จาก code ข้างบน ก็คือ ถ้าหาก user กดปุ่ม action sheet เป็นปุ่ม destructive ก็ให้ Alert ขึ้นมา บอกว่า “สวัสดีครับคุณ” พร้อมกับข้อความใน text field ที่ user ได้พิมพ์ลงไป
ลอง compile / run ดูครับ

เมื่อกด Say Something ! ก็จะเห็น action sheet ขึ้นมา ถ้าหากกด “เป็นสิครับ” ก็จะเห็น Alert ขึ้นมาบอกว่า “สวัสดีครับคุณ ปานวาด” ทำนองนี้ ดังเช่นรูปข้างล่าง

panvad

เป็นไง บ้างครับ สำหรับวันนี้ ได้ลองใช้งาน UI หลายตัวมากๆ มี คอมเม้น ตำชม แนะนำกันได้ครับ

Download Source

4 thoughts on “iPhone Programming III : More GUI”

  1. สอนง่าย อธิบายดี มีตัวอย่าง บ้างแนะนำ ทำง่ายดี มีอีกเอา

    ขอบคุณมากครับตอนนี้นั่งทำวันล่ะข้อแต่ต้องทวบทวนของเก่าด้วยงั่นลืม

  2. ขอบคุณ admin มากนะครับสำหรับความรู้
    หลังๆเริ่มเห็นภาพเกี่ยวกับการเขียนมากขึ้นครับ เขียนได้ดีครับ

  3. ผมไม่เคยใช้ netbean นะครับเลยไม่เข้าใจ กับคำถามเท่าไหร่
    แต่ถ้าสมมติว่า เราอยากจะรู้ว่า class นี้มี method อะไร ก็กด esc ครับ

  4. อันนี้ยากนิดนุงอ่า อิอิ อีกอย่างนึงถ้าผมอยากรุ้ reference ต่างๆจะมีkey suggest เหมือน netbean ให้ผมมั้ยเนี่ย ยั่งที่กด ctrl+space อะไรแบบนั้นอ่ะคับ ไม่งั้นคงต้องจำฟังชันกเยอะแยะเลยอ่า

Leave a Reply