การทำให้ 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 ไว้ด้านใน โครงสร้างจะเป็นตามนี้
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 สำหรับภาษาไทย และแก้ค่าภายในตามนี้
<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 จากการใช้คำสั่งต่อไปนี้ได้ โดยค่าที่ได้ก็จะเปลี่ยน
ไปตามภาษาเครื่องเช่นกัน
ตัวอย่าง
// รับค่า string resource จาก Resources app String hello = getResources().getString(R.string.hello_world); // หรือการกำหนด string resource เข้าไปใน method ที่ต้องการรับค่าเป็น string TextView 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
@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()
// ตรวจสอบค่า ว่า เป็น id ใด แล้วเรียกใช้ method ที่เราสร้างขึ้น
// ในตัวอย่างนี้ เราจะส่งค่าข้อความเข้าไปใน method
switch (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);
}
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง