PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

08 April 2015 By
android studio user interface android


เนื้อหาส่วนนี้ เราจะมาฝึกการสร้าง หน้าตา 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 studio user interface android




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

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


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



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


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