PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


การเพิ่ม string resources กับ user interface ตอนที่ 2

09 April 2015 By Ninenik Narkdee
string resource android studio android user interface

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ string resource android studio android user interface





ต่อจากเนื้อหาตอนที่แล้ว
 
สร้าง user interface อย่างง่ายใน android studio ตอนที่ 1 http://niik.in/614
http://www.ninenik.com/content.php?arti_id=614 via @ninenik
 
 

การเปลี่ยนข้อความใน UI

เราสามารถดูตัวอย่าง UI ที่เราสร้าง โดยคลิกเลือก Select Design Surface บนแถบเมนู แล้วเลือก Design   สังเกตว่า
ใน text box จะมีข้อความอยู่ก่อนหน้าว่า "Name" และใน button มีข้อความ "Button"  เราจะแก้ไขข้อความเหล่านี้
 
 


 
 
1. เปิดหน้าต่าง Project แล้ว เปิดไฟล์ app > res > values > strings.xml
ส่วนของไฟล์นี้ จะเป็นไฟล์สำหรับกำหนดค่าต่างๆ ของข้อความที่เป็น strings ที่ใช้งานใน UI   ทำให้เราสามารถจัดการ
เกี่ยวกับ strings ทั้งหมดที่เดียว ทำให้สะดวกในการค้นหา แก้ไข และมีตำแหน่งชัดเจน มากกว่าการไปค้นหาในส่วนของ
โค้ดใน app
 
2. คลิก Open editor ที่มุมของหน้าต่าง editor จะเป็นการเปิด Translations Editor ที่ใช้สำหรับเพิ่ม และแก้ไข ข้อความ
ค่าเริ่มต้นต่างๆ รวมถึงช่วยการจัดการกับข้อความที่มีการแปลให้รองรับการใช้งาน การแสดงผลหลายภาษา
 
 


 
 
3. คลิก Add Key เพื่อสร้างข้อความใหม่ เป็นข้อความ "hint text" หรือข้อความแนะนำสำหรับ text box
    a. ในส่วนของ Add Key ให้กรอก "edit_message" ในช่อง key
    b. ให้กรอก "Enter a message" ในช่อง value
    c. คลิก OK
 
 

 
 


 
 
4. ทำอีกครั้ง ทีนี้เพิ่มให้กับปุ่ม กรอก "button_send" ในช่อง key และ "Send" ในช่อง value
 
 

 
 


 
 
ตอนนี้เราสามารถนำค่าที่สร้าง มากำหนดใช้งานใน view แต่ละตัวได้ ดังนั้นให้กลับมาที่ layout ไฟล์ คลิกไฟล์
activity_main.xml แล้วเพิ่มค่า strings ที่เราเพิ่งสร้าง ตามแนวทางด้านล่าง
 
    1. คลิกเลือก text box ในหน้า design ของ layout ถ้าหน้าต่าง Attributes ยังไม่แสดงทางด้านขวา
    ให้คลิก Attributes ที่แถบด้านขวามือ
    2. เลือก text property ให้ลบค่าเดิมออกเป็นว่าง (ค่าเดิมเป็น "Name")
 
 


 
 
    3. เลือก hint property แล้วคลิกเลือก Pick a Resource ที่อยู่ด้านขวาของ text box เมื่อหน้าต่างแสดง
    ให้ double-click เลือก edit_message จากลิสรายการ

 


 
 
    4. ต่อไป มาทีส่วนของ button คลิกเลือก button ใน layout ไปที่ text property (ค่าเดิมเป็น "Button")
    ให้คลิกเลือก Pick a Resource แล้ว เลือก button_send
 
 
ทำความเข้าใจง่ายๆ เหมือนเราสร้างตัวแปรไว้ในชื่อ ที่เป็น key แล้ว เวลาใช้งาน ก็ใช้จาก value มาใช้ โดยในขั้น
ตอนการนำมาใช้กับ view แต่ละตัว ก็เลือกผ่าน Pick a Resource แล้วอ้างอิง หรือเชื่อมผ่าน key โดย text box 
เชื่อม เพื่อมาใช้ใน hint property ผ่าน key ชื่อ edit_message และ ใน button เชื่อมเพื่อมาใช้ใน text property
ผ่าน key ชื่อ button_send 
 
 
 

การกำหนด text box ให้มีขนาดที่ยืดหยุ่นได้

การออกแบบให้หน้าตาของ UI รองรับการแสดงผลรองรับหน้าจอหลายๆ ขนาด   เราจะต้องทำให้ขนาดของ text box
สามารถที่จะขายยืดออกให้เติมพื้นที่ในแนวนอน (พื้นที่ที่เหลือจากการกำหนด button และ margin แล้ว)
 
ก่อนอื่่นให้เราคลิกที่ Show บนแถบเครื่องมือ แล้วเลือก Blueprint จานั้นทำตามขั้นตอนดังนี้
 
1. กดเลือก view ทั้งหมด (คลิกเลือก text box แล้วกดปุ่ม Shift ค้างไว้ แล้วคลิกเลือก button) เมื่อเลือกทั้งสอง
รายการเรียบร้อยแล้ว คลิกขวา ที่ view ทั้งสองที่ถูก select อยู่ เลือก Chain > Create Horizontal Chain
หน้าตา layout จะแสดงเหมือนรูปภาพประกอบ
 
 


 
 
การกำหนด Chain จะทำให้ควบคุมการเคลื่อนที่ไปพร้อมกันของทั้งสองรายการ ทำให้สามารถจัดตำแหน่ง
สัมพันธ์ไปพร้อมๆ กันได้
 
 


 
 
2. เลือกที่ button แล้วเปิดหน้าต่าง Attributes จากนั้นเลือกใช้ view inspector ที่อยู่มุมบนของ หน้าต่าง Attributes แล้ว
กำหนด margin ด้านขวาให้เท่ากับ 16

 


 
 
3. ต่อไป คลิกเลือก text box เพื่อแสดง Attributes คลิกส่วนกำหนด ความกว้าง สองครั้ง เพื่อกำหนดให้เป็น 
Match Constraints ตามที่แสดงในรูปภาพประกอบ
 
 


 
 
"Match constraints" หมายถึง ความกว้างจะขยายออกไป จนเต็มพื้นที่ที่ถูกจำกัดไว้ในแนวนอน และการกำหนด margin
ดังนั้น text box จะขยายออกให้เต็มพื้นที่ว่างในแนวนอน
 
ในตอนนี้ เรากำหนด layout เรียบร้อยแล้ว และจะแสดงเหมือนกับรูปภาพประกอบ
 
 


 
 
ถ้าสมมติดูเหมือนว่า layout ที่ได้ ยังไม่ถูกต้องหรือไม่เป็นไปตามที่ต้องการ ให้เทียบกับรูปแบบ XML ด้านล่าง
 
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:hint="@string/edit_message"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="@string/button_send"
        app:layout_constraintBaseline_toBaselineOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/editText" />
</android.support.constraint.ConstraintLayout>
 
เปรียบเทียบกับรูปแบบของเรา โดยในหน้า editor เลือกแสดงเปลี่ยนจากหน้า design เป็น text เพื่อดูรุปแบบ XML 
จากนั้นปรับให้คล้ายกัน ตามความเหมาะสม
 
 

ทดสอบ Run app

ถ้าเราได้ทำการติดตั้ง app และทดสอบ run  ผ่านบทความก่อนหน้าแล้ว ให้เราคลิกที่ปุ่ม Apply Changes บนแถบเครื่องมือ
เพื่ออัพเดท app ด้วย layout ใหม่ หรือจะใช้วิธีกด Run icon เพื่อติดตั้งและ run app ใหม่เลยก็ได้
 
 


 
 
ในขั้นตอนนี้ ปุ่ม button จะยังไม่รองรับการทำงานใดๆ เราจะเพิ่มคำสั่งและการทำงานให้กับปุ่ม ในบทความตอนต่อไป
 


อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: string resource android user interface android studio




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



หริอ ล็อกอิน ด้วย Facebook




URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ