PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้าง user interface อย่างง่ายใน android studio ตอนที่ 1

08 April 2015 By


เนื้อหาส่วนนี้ เราจะมาฝึกการสร้าง หน้าตา app อย่างง่าย ซึ่งจะใช้งาน layout ใน
รูปแบบของไฟล์ xml  โดยเราจะให้มี กล่องรับข้อความ text field และ ปุ่ม button
 
ต่อจากบทความเดิม
 
android studio สร้างอะไรมาให้ใน android project ที่เราสร้าง 
http://www.ninenik.com/content.php?arti_id=612 via @ninenik
 
เรายังอยู่ที่ app ชื่อ study001
 
 
ไฟล์ที่เราจะแก้ไข
app/src/main/res/layout/activity_my.xml
 


 
เปิดไฟล์ activity_my.xml ขึ้นมา แล้วเราเลือกไปหน้า text
 
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" 
    tools:context=".MyActivity">

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView" />

</RelativeLayout>
 
ในส่วนนี้เรายังไม่ต้องสนใจในรายละเอียดทั้งหมด ของแต่ละส่วน
จากโครงสร้าง xml ด้านบน ถ้าเทียบกับ html ก็ประมาณ
 
   <div>
       <span></span>
   </div>
 
จาก xml ไฟล์ข้างต้น 
เราจะมี RelativeLayout เป็น root view
และมี TextView เป็น child view.
 
ดูโตรงสร้างของ UI layout ที่มีลักษณะโครงสร้าง xml เป็นแบบลำดับขึ้น
 
 

 
 
เราจะทำการปรับ xml ไฟล์ด้านบน ตามนี้
 
-- ลบ <TextView> 
-- เปลี่ยน  <RelativeLayout> เป็น <LinearLayout>.
-- เพิ่ม  android:orientation attribute เข้าไป และกำหนดค่าเป็น "horizontal".
    จะได้เป็น android:orientation="horizontal" 
-- ลบ android:padding attributes ทั้งหมดออก และก็ลบ tools:context attribute ออก
 
จะได้โครงสร้าง xml ไฟล์ดังนี้
 
<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" >

</LinearLayout>
 
เพิ่มเติม <RelativeLayout> และ <LinearLayout>. เป็น subclass ของ ViewGroup
ตามรูปภาพ ที่แสดงรูปแบบ โครงสร้าง xml เป็นแบบลำดับขึ้น UI layout ด้านบน
 
เราสามารถวาง child view เข้าไปใน <LinearLayout> ได้ในทิศทางทั้งแนวตั้ง และแนวนอน
โดยการกำหนด android:orientation attribute 
   - horizontal แนวนอน
   - vertical แนวตั้ง
 
และ child view ที่อยู่ใน <LinearLayout> จะแสดงผ่านหน้าจอ ตามลำดับการกำหนด
ใน xml ไฟล์ คือ ถ้าวาง หรือ เชียน child view ไหนก่อน ก็จะแสดงรายการนั้นก่อน แล้ว
วางต่อๆ กันไปตามลำดับ
 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 
attributes สองค่านี้เป็นการกำหนดความกว้าง และความสูงของ <LinearLayout> android:layout_width
และ android:layout_height จำเป็นต้องกำหนดให้กับ view และ ViewGroup เสมอ เพื่อระบุถึงขนาด
ของส่วนนั้นๆ
 
เนื่องจาก <LinearLayout> เป็น root view ตามโครงสร้าง UI layout ก็คือตัวบนสุด
ดังนั้นขนาดของมันจึงควรที่จะมีขนาดเต็มหน้าจอ ของพื้นที่ app ทั้งหมด 
ค่า "match_parent" จึงถูกกำหนดให้กับ view หรือ ViewGroup ที่ต้องการให้มีขนาด 100%
 
 
เราจะค่อยๆ ศึกษารายละเอียดเชิงลึกเพิ่มเติมภายหลัง
 
 
 
ต่อไปเราจะเพิ่ม view เข้าไป โดยที่จะเพิ่มคือ Text Field
ยังอยู่ที่ไฟล์ activity_my.xml ให้เพิ่ม Text Field โดยกำหนดค่าต่างๆ ดังนี้
 
<EditText android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />
 
จะได้แบบเต็มเป็น
 
<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" />

</LinearLayout>
 
เรามาดู attributes ต่างๆ ของ EditText (
EditText บางครั้งจะเห็นว่าเราเรียกว่า view ซึ่งเรียกตาม
โครงสร้างของ UI layout ดังนั้น EditText หรือ Button ก็คือ view นั่นเอง)
 
android:id
ใช้สำหรับกำหนด id เฉพาะของ view นั้น เพื่อใว้สำหรับอ้างอิง เรียกใช้จากการเขียนโค้ดใน app 
สัญลักษณ์ (@) จำเป็นต้องกำหนดเสมอ เมื่อเราต้องมีการเรียกใช้งาน resource object จากไฟล์ xml
หรือก็คือ คล้ายตัวแปรนั่นเอง รูปแบบ
 
@[resource type]/[resource name]
 
ตัวอย่าง
 
@+id/edit_message
 
id = resource type
edit_message = resource name
 
จากตัวอย่างจะสังเกตเห็นว่ามีสัญลักษณ์ (+) ก่อน resource type ให้เราจำไว้ว่า
เครื่องหมาย (+) จะใช้สำหรับกรณีการกำหนด ID name เท่านั้น กรณีอื่นไม่ต้องใส่
เช่น 
 
@string/edit_message
 
(+) นั้นจะมีส่วนในการสร้างค่าในส่วนของการเขียนโค้ดให้กับ ID name ให้เราอัตโนมัติในไฟล์ 
gen/R.java  เพื่อไว้อ้างอิงใช้งาน

 
 
android:layout_width และ android:layout_height
ในที่นี้เรากำหนดความกว้าง และสูงเป็นเป็น "wrap_content" โดยค่าที่ได้คือ ขนาดจะเป็นไปตาม
ค่าของข้อมูลหรือพอดีกับข้อมูล จะเห็นว่าต่างจาก "match_parent" 
"match_parent" ขนาดจะขยายเต็มหน้าจออิงตาม parent หลัก
"wrap_content"  ขนาดจะเป็นไปตามค่าของข้อมูล
 
android:hint
ใช้สำหรับแสดงข้อความเริ่มต้น กรณี text field ว่าง ยังไม่มีการกรอกข้อมูล
สักเกตว่า เราไม่เลือกที่จะกำหนดค่าเข้าไปโดยตรงเลย แต่ใช้วิธีอ้างอิงจากตัวแปรแทน
กำหนดคล้ายๆ กับการกำหนด ID name แต่ไม่มี สัญลักษณ์ (+)
 
android:hint="@string/edit_message" 
 
ถึงตรงนี้เราจะพบว่า android stuido จะมีการแจ้งว่ามีปัญหาเกิดขึ้น เนื่องจาก
เรายังไม่ได้มีการสร้าง string resource ที่อ้างอิงในไฟล์ activity_my.xml ซึ่งเราจะต้อง
กำหนดในไฟล์ string.xml ใน values/string.xml ซึ่งจะกล่าวต่อไปในตอนที่ 2

หมายเหตุ:: จะเห็นว่า @+id/edit_message กับ @string/edit_message มีการใช้ชื่อ
resource name เหมือนกันคือ edit_message แล้วถามว่าจะเกิดปัญหาหรือไม่ ตรงนี้เขา
บอกว่า เนื่องจาก ทั้งสองชื่อ เป็น resource type คนละประเภทกัน จึงไม่มีผลใดๆ เพราะ ค่า
อ้างอิง จะอยู่ในขอบเขตของ resource type 

 
 
ขอบจบตอนที่ 1 ตรงนี้ก่อน รอติดตามตอนที่ 2 ต่อ

 



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



Tags:: android android studio user interface

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

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


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





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