การทำให้ app ของเรา รองรับการแสดงผลหลายภาษา จะช่วยให้
จำนวนของผู้ใช้เพิ่มขึ้นได้ เนื้อหาตอนนี้เราจะมาเพิ่มภาษาให้รองรับ
การแสดงผลตามภาษาเครื่องที่ใช้งาน เช่น หากเครื่องกำหนดแสดงเป็น
ภาษาไทย app ของเราก็จะแสดงเป็นภาษาไทยด้วย
จะขอประยุกต์จาก app study002 ของบทความที่แล้ว
การเพิ่ม action button ใน action bar ตอนที่ 1
https://www.ninenik.com/content.php?arti_id=618 via @ninenik
รูป app study002
สร้าง โฟลเดอร์ และไฟล์ strings.xml กำหนดภาษา
1. อย่างที่รู้ว่า project ของเราจะมีโฟลเดอร์ res/values และไฟล์ strings.xml สำหรับกำหนด
ค่าของข้อความที่ต้องการแสดง ดังนั้นการกำหนดให้ app ของเรารองรับภาษาของเครื่องที่แสดง
ให้ทำได้ดังนี้ เริ่มต้นที่สร้าง โฟลเดอร์ values-(ISO language code) ไว้ในโฟลเดอร์ res
เช่นภาษาไทย ก็กำหนดเป็น values-th จากนั้นสร้างไฟล์ strings.xml ไว้ด้านใน โครงสร้างจะเป็นตามนี้
1 2 3 4 5 6 | MyProject/ res/ values/ strings.xml values-th/ strings.xml |
คลิกขวาที่โฟลเดอร์ res เลือก New > Directory
กำหนดชื่อโฟลเดอร์เป็น values-th แล้วกด OK
จะเห็นว่าเหมือนไม่มีชื่อโฟลเดอร์แสดง แต่จริงๆ แล้ว android studio ได้สร้างโฟลเดอร์
ดังกล่าวไว้แล้ว ต่อไปให้เราคลิกขวาที่ไฟล์ strings.xml เลือก Copy
แล้วไปคลิกขวาที่โฟลเดอร์ res เลือก Paste
จะขึ้นหน้าต่างให้เราเลือกโฟลเดอร์ ให้เราคลิกเลือก ปุุ่ม ... (จุดสามจุด) เพื่อเลือกโฟลเดอร์ values-th
ที่เราได้สร้างขึ้นมาแล้ว เลือก OK แล้ว ก็เลือก OK หน้าเดิมอีกครั้ง
2. สังเกตว่า โครงสร้างของไฟล์ใน android studio จะมี strings.xml เพิ่มเข้ามา พร้อม
มีสัญลักษณ์ธงชาติกำหนด ตามรูป เท่านี้เราก็สามารถเข้าไปแก้ไขข้อความได้ตามต้องการ
3. เปิดไฟล์ strings.xml สำหรับภาษาไทย และแก้ค่าภายในตามนี้
1 2 3 4 5 6 7 8 9 | <resources> <string name="app_name">บทเรียนที่ 002</string> <string name="hello_world">สวัสดีชาวโลก!</string> <string name="action_search">ค้นหา</string> <string name="action_refresh">รีเฟรส</string> <string name="action_settings">ตั้งค่า</string> <color name="colorbg1">#FF7F27</color></resources> |
4. ทดสอบ run app ถ้า emulator ของเรายังไม่ได้เปิดขึ้นมา หรือเปิดขึ้นมาแล้ว
แต่ยังเป็นภาษาอังกฤษ ที่ emulator ให้เราเปลี่ยนเป็นภาษาไทย โดยไปที่
Settings > Language and input.... แล้วเลือก ภาษาไทย เสร็จแล้ว
ทดสอบ run app ถ้าไม่มีข้อผิดพลาด ผลลัพธ์จะได้ตามรูป
ถ้าเราเปลี่ยนกลับเป็นภาษาอังกฤษ ระบบก็จะไปใช้ strings.xml ในโฟลเดอร์ values/strings.xml
และถ้าเปลี่ยนกลับมาภาษาไทย ก็จะไปใช้ strings.xml ในโฟลเดอร์ values-th/strings.xml
การเรียกใช้ String Resources ผ่าน code java
จาก code ด้านบน เป็นการเรียกใช้งาน string resources จากกำหนดค่าใน layout
แต่เรายังสามารถเรียกใช้ string resources จากการใช้คำสั่งต่อไปนี้ได้ โดยค่าที่ได้ก็จะเปลี่ยน
ไปตามภาษาเครื่องเช่นกัน
ตัวอย่าง
1 2 3 4 5 6 | // รับค่า string resource จาก Resources appString hello = getResources().getString(R.string.hello_world);// หรือการกำหนด string resource เข้าไปใน method ที่ต้องการรับค่าเป็น stringTextView textView = new TextView(this);textView.setText(R.string.hello_world); |
เรามาประยุกต์กับ app study002 จากบทความเดิม
การเรียกใช้ method เมื่อเลือก action button ตอนที่ 2
https://www.ninenik.com/content.php?arti_id=619 via @ninenik
1. ดูที่ไฟล์ MainActivity ในส่วนของ onOptionsItemSelected
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @Override public boolean onOptionsItemSelected(MenuItem item) { // เก็บค่า id ของปุ่ม action butoon ที่กดเลือก int id = item.getItemId(); // ตรวจสอบค่า ว่า เป็น id ใด แล้วเรียกใช้ method ที่เราสร้างขึ้น // ในตัวอย่างนี้ เราจะส่งค่าข้อความเข้าไปใน method switch (id) { case R.id.action_search: showMyText("Search"); return true; case R.id.action_refresh: showMyText("Refresh"); return true; case R.id.action_settings: showMyText("Settings"); return true; default: return super.onOptionsItemSelected(item); } } |
เราจะเห็นว่า method showMyText ส่งค่าข้อความที่เป็นภาษาอังกฤษแบบ กำหนดค่าตายตัวไป
ดังนั้นถึงแม้เราจะเปลี่ยนเป็นภาษาไทย ค่าก็ยังเป็นค่าเดิม เราก็สามารถประยุกต์ ให้ค่าที่ส่งเป็นค่า
ที่ดึงจาก string resources แทน เพื่อที่ค่าที่ได้จะเป็นไปตามภาษาที่เครื่องนั้นกำหนด
2. แก้ไขได้ดังนี้โดยใช้ คำสั่ง getResources().getString()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // ตรวจสอบค่า ว่า เป็น id ใด แล้วเรียกใช้ method ที่เราสร้างขึ้น// ในตัวอย่างนี้ เราจะส่งค่าข้อความเข้าไปใน methodswitch (id) { case R.id.action_search: showMyText(getResources().getString(R.string.action_search)); return true; case R.id.action_refresh: showMyText(getResources().getString(R.string.action_refresh)); return true; case R.id.action_settings: showMyText(getResources().getString(R.string.action_settings)); return true; default: return super.onOptionsItemSelected(item);} |
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง