ต่อจากเนื้อหาตอนที่แล้ว
สร้าง user interface อย่างง่ายใน android studio ตอนที่ 1 http://niik.in/614
https://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 จะขยายออกให้เต็มพื้นที่ว่างในแนวนอน
ดังนั้น 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 จะยังไม่รองรับการทำงานใดๆ เราจะเพิ่มคำสั่งและการทำงานให้กับปุ่ม ในบทความตอนต่อไป
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง