PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

09 April 2015 By


ก่อนที่จะเข้าสู่เนื้อหา การเพิ่ม string resources หรือการผูกค่าตัวแปรอ้างอิง
สำหรับใช้กับไฟล์ activity_my.xml เราจะมาเพิ่ม view ในส่วนของ Button 
กันก่อน เนื้อหาต่อจากบทความเดิม
 
สร้าง user interface อย่างง่ายใน android studio ตอนที่ 1 
http://www.ninenik.com/content.php?arti_id=614 via @ninenik
 
 
การเพิ่ม Button
ยังอยู่ที่ไฟล์ activity_my.xml ให้เพิ่ม Button โดยกำหนดค่าต่างๆ ดังนี้
 
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
 
จะได้แบบเต็มเป็น
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
    
</LinearLayout>      
 
มาดูว่า Button เรากำหนด atrributes อะไรบ้าง
 
    android:layout_width="wrap_content"  
ความกว้างให้มีขนาดเป็นไปตามข้อความที่แสดงในปุ่ม

    android:layout_height="wrap_content"  
ความสูงให้มีขนาดเป็นไปตามข้อความที่แสดงในปุ่ม

    android:text="@string/button_send"
ข้อความที่แสดง ให้อิงตามชื่อ string resource ชื่อ button_send
 
หมายเหตุ:: ปุ่ม เราไม่ได้กำหนด android:id attribute เพราะเราจะยังไม่มี
การเรียกใช้งานปุ่มนี้ผ่าน code app ในตอนนี้


 
จากโครงสร้าง xml ด้านบน Butoon มีการกำหนด string resource เช่นกัน
ถ้าเราดู  code xml ผ่าน android studio ส่วนที่มีการเรียกใช้งาน string resource จะ
แสดงเป็นสีแดง เนื่องจากเรายังไม่ได้กำหนด
 
 

 
การเพิ่ม String Resources
เราจะทำการกำหนดค่าให้กับ resource name ที่เรากำหนดในไฟล์ activity_my.xml ได้ที่ไฟล์
res/values/strings.xml
 
 
เราจะเพิ่มไปสองอัน คือ 
edit_message สำหรับ EditText โดยให้มีค่าเท่ากับ "Enter a message"
button_send สำหรับ Button  โดยให้มีค่าเท่ากับ "Send"
 
จะได้เป็น
 
<resources>
    <string name="app_name">Study001</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="action_settings">Settings</string>
</resources>
 
app_name กับ action_settings ให้คงไว้ก่อน เพราะมีการเรียกใช้งานและจำเป็นอยู่

 
 
เมื่อเราได้เพิ่ม string resources แล้วจะพบว่าหน้า ไฟล์ activity_my.xml จะไม่มี error แจ้ง
เตือนสีแดงแล้ว 
 
 

เรามาดูหน้า Design ที่ได้
 
 

จากรูปด้านบน เราจะเห็น ทั้ง EditText และ Button มีการกำหนด 
 
android:layout_width="wrap_content"
 
เหมือนกันทั้งสองอัน แต่ที่เห็นคือ เฉพาะปุ่มเท่านั้นที่ ขนาดของปุ่มกว้างเท่ากับ
ขนาดข้อความที่แสดงในปุ่ม  ส่วน EditText ยังแสดงไม่ได้สัดส่วนที่เหมาะเท่าไหร่
ดั้งนั้น เราจะใช้วิธี พยายามให้ความกว้างของ EditText ขยายให้กว้างพอ และแทน
พื้นที่ว่างที่เหลืออยู่ ตามรูปจะเห็นว่าด้านขวาจะมีที่ว่างอยู่พอสมควร โดยที่เราจะใช้
weight property มากำหนด ผ่าน android:layout_weight attribute ให้กับ EditText
 
หลักของการกำหนดค่า weight 
ซึ่งมีค่าเป็นตัวเลข แสดงส่วนพื้นที่ว่างที่เหลืออยู่ที่แต่ละ view แต่ละตัวจะสามารถใช้ได้
โดยสัมพันธ์กับจำนวนที่ถูกใช้ของ view อื่นๆ
 
เช่น 
กรณีที่ 1
 
มี ==========  10 ขีดคือพื้นที่ทั้งหมด
ถ้ากำหนด weight ให้ EditText เท่ากับ 1 
ส่วน Button ไม่กำหนด weight
weight รวมทั้งหมด เท่ากับ 1
ดังนั้นถ้า Button ใช้ไป == 2 ขีด จะเหลือ 8 ขีด คือส่วนพื้นที่ที่เหลือทั้งหมด
ดังนั้น EditText ที่กำหนด weight เท่ากับ 1 หรือก็คือ 1/1 จึงใช้พื้นที่ส่วนที่เหลือทั้งหมดคือ 8 ขีด
 
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
 



 
 
กรณีที่ 2 
 
มี ==========  10 ขีดคือพื้นที่ทั้งหมด
ถ้ากำหนด weight ให้ EditText เท่ากับ 1 
กำหนด weight ให้ Button เท่ากับ 1 
weight รวมทั้งหมด เท่ากับ 2
ดังนั้น Button จะใช้ไป 1/2 หรือก็คือ ===== 5 ขีด และเหลืออีก 5 ขีด
ซึ่งเท่ากับ EditText ที่ใช้ไป 1/2 เช่นกัน คือ ===== 5 ขีด 
ดังนั้น view object ทั้งสองจะแสดง แบ่งกันครึ่งๆ 
 
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

    <Button
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
 
 


 
กรณีที่ 3
 
มี ==========  10 ขีดคือพื้นที่ทั้งหมด
ถ้ากำหนด weight ให้ EditText เท่ากับ 2 
กำหนด weight ให้ Button เท่ากับ 1 
weight รวมทั้งหมด เท่ากับ 3
ดังนั้น Button จะใช้ไป 1/3 หรือก็คือประมาณ === 3 ขีด และเหลืออีก 7 ขีด
ซึ่งเท่ากับ EditText ที่ใช้ไป 2/3 เช่นกัน คือประมาณ ======= 7 ขีด 
ดังนั้น view object ทั้งสองจะแสดง แบ่งกันตามสัดส่วน 
 
    <EditText android:id="@+id/edit_message"
        android:layout_weight="2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

    <Button
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
 
 
กรณีที่ 4 สมมติเราเพิ่ม button เข้ามาอีกอัน
 
มี ==========  10 ขีดคือพื้นที่ทั้งหมด
ถ้ากำหนด weight ให้ EditText เท่ากับ 2 
กำหนด weight ให้ Button แรก เท่ากับ 1 
กำหนด weight ให้ Button สอง เท่ากับ 1 
weight รวมทั้งหมด เท่ากับ 4
ดังนั้น Button แรก จะใช้ไป 1/4 หรือก็คือประมาณ ==2.5 ขีด และเหลืออีก 7.5 ขีด
ดังนั้น Button สอง จะใช้ไป 1/4 หรือก็คือประมาณ ==2.5 ขีด และเหลืออีก 5 ขีด
ซึ่งเท่ากับ EditText ที่ใช้ไป 2/4 หรือ เท่ากับ 1/2 ครึ่งของ 10 ซึ่งจะเท่ากับพื้นที่เหลืออยู่คือ 5 ขีด
ดังนั้น view object ทั้งสาม จะแสดง แบ่งกันตามสัดส่วน ตามรูป
 
    <EditText android:id="@+id/edit_message"
        android:layout_weight="2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

    <Button
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />

    <Button
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel" />
 
 
 
กลับมาที่ code xml ของเรา 

มีเปลี่ยนเปลงเล็กน้อย โดยเพิ่ม 
android:layout_weight="1"
และเปลี่ยน 
android:layout_width="0dp" 

 
จะได้เป็น
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />

</LinearLayout>
 
 
หมายเหตุ:: สรุป จากโครงสร้าง xml จะเห็นว่า เราได้ทำการเปลี่ยนจาก
android:layout_width="wrap_content" ใน EditText เป็น android:layout_width="0dp"
เพราะ เพื่อประสิทธิภาพในการทำงาน เนื่องจากว่า เราได้กำหนดความกว้างจากค่า 
android:layout_weight="1" แล้ว จึงไม่จำเป็นต้องให้ app คำนวณความกว้างจาก wrap_content อีก

 
ทดสอบรัน app จะได้ผลลัพธ์ตามรูปด้านล่าง
 
 

 
จบส่วนของการสร้าง user interface อย่างง่าย รอติดตาม เนื้อหาต่อไป



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



Tags:: android android studio user interface string resource

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

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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