ข้ามไปที่เนื้อหาหลัก

การสร้างปุ่มกลับ บน Toobar ของ Android Studio

Android Studio API 21 ได้นำ Toolbar มาใช้แทน ActionBar โดยมีคุณสมบัติเพิ่มขึ้นมาก ในตัวอย่างต่อไปนี้ จะเป็นการสร้างปุ่มกลับเมนู บน Toolbar ดังภาพ

ปุ่มกลับเมนู ไม่ใช่ปุ่มกลับหน้าที่ผ่านมา แต่เป็นปุ่มกลับเมนูที่คลิกมาหน้าปัจจุบัน หรือ เมนูที่อยู่เหนืออีกชั้นหนึ่ง รายละเอียดดูที่ http://developer.android.com/design/patterns/navigation.html

ข้อดีของ Android Studio ที่ผมชอบ คือ เขามีการเขียนโค้ดเตรียมไว้ให้พร้อม เราเพียงแต่ให้รู้ว่า จะเพิ่มเติมอะไร อย่างไร นอกจากนี้ ยังมี  code hint ทำให้ทุ่นเวลาการเขียน พร้อมทั้งตรวจสอบความถูกต้องไปในตัว รุ่นที่ใช้อยู่นี้ คือ Android Studio 1.5

การสร้างปุ่มกลับ

  1. เริ่มจากสร้าง Project ใหม่ เลือก API 11 และ Blank Project
  2. เมื่อเปิดเข้ามา จะเห็นว่า Android Studio 1.5 สร้าง Toolbar ว่าง ๆ ไว้ให้แล้ว พร้อมกับสร้าง menu_main.xml ไว้ให้ด้วย เพื่อให้ตกแต่งเพิ่มเติม เช่น ใส่ปุ่มกลับ เพิ่มชื่อของ Activity เพิ่ม Overflow menu เป็นต้น
  3. ปุ่มกลับต้องมี 2 หน้า ดังนั้นต้องสร้างหน้าใหม่ หรือ Activity ใหม่ โดยไปที่  Java > [PackageName] คลิกขวา และเลือก New > Activity > Blank Activity
  4. ตั้งชื่อว่า DetailPage แล้วกด Finish
  5. ก่อนอื่น ต้องสร้างปุ่มที่หน้าแรก เพื่อคลิกไปยังหน้าที่ 2 ที่เพิ่งสร้างขึ้น
  6. ไปที่หน้าแรกที่  res > layout > content_main.xml เลือกส่วนที่เป็น Design
  7. ลากปุ่มมาวาง ที่แถบ Property เปลี่ยนข้อความหน้าปุ่มเป็น ไปหน้า 2 และ ระบุ onclick ให้ใช้ goToDetail method
  8. ไปที่ Java ของ MainActivity เพื่อสร้าง goToDetail() method ตามที่ระบุ
  9. ก่อนอื่นต้อง import android.content.Intent เข้ามาก่อน เพื่อใช้คำสั่ง intent (หรือจะพิมพ์ก่อน แล้วค่อยกด Alt+Enter เพื่อ import ก็ได้)
  10. เขียน method ใหม่ โดยเรียกใช้งาน intent และระบุหน้า DetailPage ซึ่งเป็นหน้าที่ต้องการไป พร้อมทั้งให้คำสั่ง ทำงานด้วย ดังนี้
  11. ต่อไปจะเป็นการสร้างปุ่มลูกศรกลับ ในหน้า DetailPage
  12. ที่ res > layout > content_detail_page ในหน้า Design ลาก Large Text Widget มาวาง และกำหนดข้อความว่า "หน้ารายละเอียด" หน้านี้ จะสร้างปุ่มลูกศรสำหรับกลับไปที่หน้าแรก
  13. ไปที่ Java ของ DetailPage จะเห็นว่า Android Studio เขียนโค้ด Toolbar รอไว้แล้ว ใน onCreate () method พร้อมทั้ง ทำการ extends AppcompatActivity ให้ด้วย ซึ่งทำให้สามารถใช้ได้กับ Android รุ่นก่อน ๆ ย้อนไปถึง API 7 ทีเดียว

  14. ปุ่มกลับ เป็นการเปลี่ยนลักษณะของการกลับไปหน้าแรก ให้เป็นการกลับไปยังหน้าที่มีระดับสูงกว่า 1 ขั้น โดยเรียกใช้  setDisplayHomeAsUpEnabled() ของ getSupportActionBar() โดยเขียนโค้ด ต่อจากที่มีอยู่แล้ว ใน onCreate() method (ก่อน FloatingActionButton) ซึ่งจะได้ปุ่มลูกศรกลับ บน Toolbar
  15. เมื่อมีการคลิกปุ่มกลับ บน Toolbar เราจะใช้คำสั่ง intent เพื่อให้กลับไปยังหน้าแรก 
  16. ก่อนอื่นต้อง import android.view.MenuItem; และ import android.content.Intent; เข้ามาก่อน เพื่อให้คำสังสามารถทำงานได้
  17. เพิ่ม method เพื่อรอรับการคลิก และเรียกใช้ intent เพื่อให้กลับไปยังหน้าแรก โดยตรวจสอบ id ของ item ที่คลิก ในกรณีที่มี overflow menu ก็จะตรวจสอบตรงนี้ที่เดียวกัน ถ้า id เท่ากับ home ซึ่งเราบอกว่าจะให้กลับหน้าระดับเหนือหน้านี้ชั้นหนึ่ง เราก็เขียนโค้ดรับ โดยใช้ intent และระบุหน้าที่จะกลับไป ในตัวอย่างนี้หน้าแรกคือ MainActivity
  18. ไปที่ manifest.xml เพื่อ ระบุระดับว่า หน้า MainActivity เป็นหน้าหลัก มิฉะนั้นจะใช้กับ API level 7 ไม่ได้ โดยระบุ ใน manifest.xmlในส่วนของหน้า DetailPage ดังนี้
  19. เมื่อ run ดู จะเห็นหน้าจอดังนี้
  20. เมื่อคลิกปุ่มไปหน้า 2 จะเห็นดังนี้
  21. เมื่อคลิกลูกศรกลับ จะกลับมาที่หน้าแรก
ดาวน์โหลดไฟล์ zip เพื่อนำไปศึกษาได้ คลิกที่นี่

สำหรับการสร้าง Overflow menu ไปเพิ่ม item ในไฟล์ menu เช่น


และตรวจสอบการคลิก ใน onOprionsItemSelected() เช่นเดียวกัน โดยอาจใช้ switch case หรือ ใช้  if หลาย ๆ ครั้งตรวจสอบ ก็ได้


ที่มา
http://developer.android.com/training/appbar/up-action.html
http://developer.android.com/design/patterns/navigation.html
https://guides.codepath.com/android/Using-the-App-ToolBar
http://www.android4devs.com/2014/12/how-to-make-material-design-app.html
https://www.youtube.com/watch?v=EAZv1fP-5TM



ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

อุปมา อุปไมย สำนวนการเปรียบเทียบ ของไทย

การเตรียมสอบ ก.พ. ภาค ก. เพื่อสอบบรรจุเข้ารับราชการ มีการทดสอบความสามารถทั่วไป มักจะมี
ข้อสอบที่เกี่ยวกับอุปมาอุปไมย  ข้อสอบมีลักษณะ ให้หาตัวเลือกที่มีความหมาย ความสัมพันธ์คล้ายคลึง หรือเหมือนกับที่โจทย์กำหนดให้มา  หรือเติมข้อความที่มีความหมายสอดคล้องกับคำอุปมาอุปไมยที่ยกมาให้ เป็นต้น ดังนั้น การเข้าใจความหมายของคำอุปมาอุปไมย จึงช่วยให้ทำข้อสอบได้ดียิ่งขึ้น

คำอุปมาอุปไมย หมายถึง ถ้อยคำที่เป็นสำนวนพวกหนึ่ง กล่าวทำนองเปรียบเทียบ ให้เห็นจริง เข้าใจแจ่มแจ้งชัดเจน และสละสลวยน่าฟังมากขึ้น การพูดหรือการเขียน นิยมหาคำอุปมาอุปไมยมาเติมให้ได้ความชัดเจนเกิดภาพพจน์ เข้าใจง่าย เช่น

คนดุ หากต้องการให้ความหมายชัดเจน น่าฟัง และเกิดภาพพจน์ชัดเจนก็ต้องอุปมาอุปไมยว่า “ดุ เหมือน เสือ”
ขรุขระมาก การสื่อความยังไม่ชัดเจนไม่เห็นภาพ ต้องอุปมาอุปไมยว่า “ขรุขระเหมือนผิวมะกรูด” หรือ “ขรุขระเหมือนผิวพระจันทร์” ก็จะทำให้เข้าใจ ความหมายในรูปธรรมชัดเจนมากยิ่งขึ้น

คำอุปมาอุปไมยที่ควรรู้จัก (พิมพ์คำ/ข้อความ แล้วกดปุ่ม "ค้นหา")

แนวข้อสอบ เงื่อนไขสัญลักษณ์

ครั้งที่แล้ว ได้แนะนำหลักการทำ ข้อสอบ ก.พ. ภาค ก. ความสามารถทั่วไป เงื่อนไขสัญลักษณ์ มา แล้ว ถ้าใครยังไม่ได้อ่าน ก็คลิกกลับไปอ่านได้
ความจริง ข้อสอบเงื่อนไขสัญลักษณ์ เป็นข้อสอบไม่ยาก ถ้าเข้าใจหลักการ และมีทักษะความชำนาญ ใจเย็น ๆ อย่าตื่นเต้น โดยเฉพาะการดูเครื่องหมายต่าง ๆ อย่าดูผิด เช่น เครื่องหมายมากกว่า (>) น้อยกว่า (<) เป็นต้น เพราะการแก้ปัญหาโจทย์เงื่อนไขสัญลักษณ์ หรือ inequality ก็คล้ายกับการแก้ปัญหาสมการโดยทั่วไป นั่นเอง คือ สามารถบวก ลบ คูณ หาร ด้วยจำนวนที่เท่ากัน ทั้งสองข้างของเครื่องหมายได้ กลับเศษเป็นส่วนได้ แต่ก็มีบางเรื่อง บางรายละเอียดที่แตกต่างกันบ้าง ซึ่งอ่านได้จาก ข้อสอบ ก.พ. ภาค ก. ความสามารถทั่วไป เงื่อนไขสัญลักษณ์ นะครับ ครั้งนี้ จึงเป็นการนำแนวข้อสอบ เงื่อนไขสัญลักษณ์ เพื่อนำมาฝึกทำให้เกิดทักษะความชำนาญ เพื่อจะได้ทำข้อสอบได้รวดเร็วขึ้น เพราะในห้องสอบ เวลาจัดได้ว่ามีค่ามาก ยิ่งทำเร็วและถูกต้อง ยิ่งดี คำสั่ง

เลือกตอบข้อ 1. ถ้าข้อสรุปทั้งสอง ถูกด้องหรือเป็นจริง ตามเงื่อนไข
เลือกตอบข้อ 2. ถ้าข้อสรุปทั้งลอง ผิดหรือไม่เป็นจริง ตามเงื่อนไข
เลือกตอบข้อ 3. ถ้าข้อ…

เทคนิคการทำ ข้อสอบ อนุกรม ของ ก.พ.

|ประเภทของอนุกรม เทคนิคการทำโจทย์เลข อนุกรม ข้อแนะนำเพิ่มเติม |


ข้อสอบเลขอนุกรม ของ ก.พ. ต้องการวัดความถนัดทางด้านตัวเลข โดยการจัดทำตัวเลขเป็นชุด ๆ ที่มีความสัมพันธ์กันบางอย่าง โดยให้ผู้เข้าสอบได้แสดงความถนัดด้านตัวเลข ในการวิเคราะห์และแก้ปัญหาตามที่โจทย์ระบุ


ประเภทของอนุกรม รูปแบบความสัมพันธ์ของตัวเลขอนุกรมเท่าที่พบบ่อย ๆ มีหลายประเภท เช่น

ก. อนุกรมเชิงเดี่ยว 

ได้แก่ชุดตัวเลขที่เป็นอนุกรมเพียงชุดเดียว เช่น
ค่าของตัวเลขเพิ่มขึ้นต่อเนื่องอย่างเป็นระบบ โดยการบวก หรือ คูณ ตัวเลขก่อนหน้า เช่น บวกด้วยตัวเลขที่เป็นค่าคงที่ เช่น    5   10   15   20   ...?...
บวกด้วยตัวเลขที่มีระบบ เช่น     1    2    5    10   ...?...
คูณด้วยค่าคงที่ เช่น   1   3   9   27   ...?...
มีทั้ง บวก ลบ คูณ หรือหาร สลับกัน เช่น บวกแล้วคูณด้วยค่าคงที่สลับกัน ดังตัวอย่าง  5   7    14   16  32   ...... มีการ บวก ลบ คูณ หรือ หาร ร่วมกัน เช่น  15   31   63   127   255  ...?...
ในตัวอย่างนี้ จะเห็นว่า ตัวเลขตัวแรกคูณด้วย 2 และบวกด้วย 1 จะได้ตัวเลขตัวถัดไป คูณด้วยค่าคงที่ที่เป็นเศษส่วน ให้สังเกตความสัมพันธ์ว่า ตัวเลขก่อนหน้า …