พฤศจิกายน 22, 2017, 10:54:43 am *
ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน
ส่งอีเมล์ยืนยันการใช้งาน?

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
   หน้าแรก   ช่วยเหลือ เข้าสู่ระบบ สมัครสมาชิก  
หน้า: [1]   ลงล่าง
  พิมพ์  
ผู้เขียน หัวข้อ: Log-In Form with Row-Table Layout (XML)  (อ่าน 3341 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
ShadowMan
Administrator
Hero Member
*****
ออฟไลน์ ออฟไลน์

เพศ: ชาย
กระทู้: 8267


ShadowWares


| |
« เมื่อ: ธันวาคม 08, 2012, 11:04:39 am »

Log-In Form with Row-Table Layout (XML)

Layout เป็นเรื่องที่สำคัญที่สุดสำหรับการออกแบบ UI และในโลกของ Android นั้น Layout จะถูกกำหนดด้วยไฟล์ XML ที่จะถูกโหลดเข้าไปโดย Android System และเปลี่ยนเป็นสิ่งที่เห็นในรูปแบบต่างๆ ออกมา (คนที่เคยวาง Layout โดย Java API มาคงรับรู้ได้ว่า XML ทำให้โลกสดใสขึ้นมาก) Layout สำหรับ UI ของ Android มีอยู่หลายแบบเช่น:

   - LinearLayout
   - AbsoluteLayout
   - TableLayout
   - RelativeLayout
   - FrameLayout
   - ScrollView


แต่ละรูปแบบมึคุณสมบัติที่แตกต่างกันออกไป และคุณสมบัติที่แตกต่างกันเหล่านี้ จะต้องถูกตีความโดยผู้พัฒนาเพื่อให้ได้มาซึ่งความชัดเจน และนำไปสู่การสร้าง UI ให้ได้ดังใจปรารถนา

ถึงแม้ว่าในปัจจุบันจะมีเครื่องมือช่วยในการออกแบบในส่วนของ UI อยู่มากมาย แต่ละตัวล้วนแล้วแต่มีความสามารถ และช่วยลดระยะเวลาในการพัฒนา Application ได้อย่างมาก โดยที่ผู้พัฒนาไม่ต้องมีความรู้เรื่อง XML เลย อย่างไรก็ตาม การทำสิ่งใดๆ ลงไปโดยที่ไม่รู้ว่าเบื้องหลังมันคืออะไรย่อมก่อให้เกิดปัญหาในระยะยาว โดยเฉพาะการเล่นกับ UI ของ Android แบบ Dynamic จะเป็นไปได้ยากมาก เมื่อไม่รู้เท่าทัน XML

ในบทความนี้ ผมจะเฉพาะเจาะจงไปที่ Layout แบบ Table (Table Layout, Row Table) และเพื่อให้ผู้อ่านมองภาพออก จะขออธิบายในรูปแบบของตัวอย่างใช้งานจริง ซึ่งในที่นี้จะสร้าง Login form ง่ายๆ ตามรูปได้ล่าง

เป้าหมายที่อยากได้:
   


จากรูปจะเห็นว่าได้ทำการกำหนดตำแหน่งการจัดวางของ Component ต่างๆ ไว้อย่างเป็นระเบียบ การจัดวางในลักษณะที่เห็น ไม่มี Layout ใดๆ เหมาะเท่ากับ Layout แบบ Row-Table ทั้งนี้หมายรวมถึงการพัฒนา UI ลักษณะนี้ในโลกของ HTML, CSS ด้วย

รายละเอียดของ XML:
Code:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:background="#ddd">
    
    <!-- Row #1 : User Name -->
    <TableRow>
        <TextView
            android:text="User Name:"
            android:textSize="50sp"
            android:layout_marginLeft="20sp"
            android:layout_width="wrap_content" />

        <EditText
            android:id="@+id/txtUserName"
            android:textSize="50sp"
            android:layout_marginLeft="20sp"
            android:layout_width="480dp" />
    </TableRow>
    
<!-- Row #2 : Password -->
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:textSize="50sp"
            android:layout_marginLeft="20sp"
            android:text="Password:" />

        <EditText
            android:id="@+id/txtPassword"
            android:textSize="50sp"
            android:layout_marginLeft="20sp"
            android:password="true" />
    </TableRow>
    
<!-- Row #3 : Checkbox, Remember Password -->
    <TableRow>
        <TextView />
        <CheckBox
            android:id="@+id/chkRememberPassword"
            android:textSize="40sp"
            android:layout_gravity="center"
            android:text="Remember Password" />
    </TableRow>
    
<!-- Row #4 : Buttons, Clear and Log In  -->
    <TableRow>
        <Button
            android:id="@+id/buttonClear"
            android:textSize="50sp"
            android:layout_marginLeft="20sp"
            android:width="150sp"
            android:text="Clear"
            />

        <Button
            android:id="@+id/buttonSignIn"
            android:textSize="50sp"
            android:layout_marginLeft="80sp"
            android:text="Log In"
            />
    </TableRow>
  
</TableLayout>

Margin Size, Font Size ต้องกำหนดให้เหมาสมกับขนาดหน้าจอ ในที่นี้ผมใช้หน้าจอของเครื่องขนาด 800x1280 pixels (77 (196) : ppcm (PPI))
สำหรับการพัฒนา Application เพื่อใช้งานจริง จะต้องออกแบบให้เป็น Device Independent (ในที่นี้คือทำงานได้กับหน้าจอทุกขนาด) เราจะต้องเขียนโปรแกรมเพื่อทำเปลี่ยนแปลงค่าเหล่านี้ตอนที่โปรแกรมถูกสั่งให้ทำงาน ค่าเหล่านี้อาจจะมองในรูปแบบของ % หรืออัตราส่วนก็ได้ โดยการอ่านความกว้าง/ยาวของจอมาทำการคำนวณนั่นเอง ส่วนนี้จะขอละไว้ก่อน


เพื่อเพิ่มความเข้าใจว่า Row-Table แต่ละตัววางตัวอย่างไร ให้พิจารณาจากรูปด้านล่าง

ระบายสีให้เห็นว่าตารางแต่ละแถวมีการวางตัวอย่างไร:
   

การใส่สี Background ทำได้โดยใช้ "android:background" เช่นต้องการระบายสีแดงที่ Row ใดๆ ทำได้โดย
Code:
<TableRow
     android:background="#f00"
 

ตอนนี้สิ่งที่จะต้องเข้าใจคือ การวาง Component หรือ Widget ลงไปใน Row-Table ใดๆ จะทำให้เกิด Column ของใน Row นั่นๆ ขึ้นมา ในที่นี้ผมได้ทำการวาง Widget ลงไปในแต่ละ Row อย่างละสองตัว

โดยคุณสมบัติของตาราง ความกว้างของแต่ละ Column ย่อมเท่ากัน นั่นคือจะเท่ากันกับ Column ที่มีความกว้างมากที่สุด ในที่นี้คือความกว้างของ EditText สำหรับป้อน Username ซึ่งมีขนาดเท่ากับ 480sp ถูกกำหนดโดย
Code:
android:layout_width="480dp"
นั่นหมายตวามว่า Column ที่ 2 หรือ Column จะมีค่าเท่ากันหมด (เว้นแต่จะมี Row อื่นๆ ที่ถูกกำหนดให้มีค่ามากกว่า 480sp)

แล้ว Column แรกล่ะ ใครเป็นตัวกำหนด?
เมื่อพิจารณาให้ดีๆ จะเห็นว่าคำว่า TextView ทั้งสองตัวถูกกำหนดความกว้างให้เป็น wrap_content โดย:

Code:
android:layout_width="wrap_content
และคำว่า "User Name" กับ "Password" เมื่อนับจำนวณอักษรกันตัวต่อตัวแล้วคำว่า "User Name" มากกว่าไปหนึ่งตัว (รวม space) นั่นหมายความว่า  "User Name" ต้องการพื้นที่มากกว่า และ ณ Column นี้พื้นที่ที่ "User Name" ใช้กว้างที่สุด ย่อมส่งผลในทุก Row ณ Column เดียวกันนี้มีความกว้างเท่ากันกับความกว่างของ "User Name" นั่นเอง

หากพิจารณาไปที่ Row #3 จะเห็น
Code:
<TextView />
ไม่มี Argument  ใดๆ แล้วใส่ไปทำไม?
ใส่ไปเพราะต้องการให้ Row #3 มี 2 Column เหมือน Row อื่นๆ นั่นเอง (กฎการลวง)


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



การบ้าน:
เมื่อหน้าจอถูกเปลี่ยนเป็นแนวนอน ให้ทำการจัดวาง widget ให้อยู่กึ่งกลางของจอแสดงผล (Left-Margin == Right-Margin)

บันทึกการเข้า

By SDW: Do No Wrong Is Do Nothing
          If you want to increase your success rate, double your failure rate
หน้า: [1]   ขึ้นบน
  พิมพ์  
 
กระโดดไป: