วันนี้จะมาดูรูปแบบของ scaleType ใน ImageView ครับ โดย attribute อันนี้ทำให้เราสามารถกำหนดการรูปแบบการ scale รูปภาพได้ครับ ทำไมต้อง scale ? คงจะมีสักครั้งที่เรามีพื้นที่จำกัด แต่รูปภาพที่จะแสดงนั้นมีหลากหลายขนาดซึ่งบางทีเราอาจจะอยากให้แสดงรูปในอัตราส่วนปกติมากกว่าที่จะบีบรูปลงมา หรือ อาจจะต้องการกำหนดการ scale แบบอื่น
Home
Archive for
มีนาคม 2013
หลังจากจัดการกับปัญหา Hard Disk ตัวเองแล้วก็คิดอยู่นานว่าจะเขียนเรื่องอะไรดี อยากจะเขียนหลายๆเรื่อง แต่คิดว่าคงยากที่จะอธิบาย ยิ่งอธิบายน่าจะยิ่งงง เลยมาตกที่ Custom View หรือคือการสร้าง View ของตัวเองขึ้นมาโดยอาจจะสร้างเป็น library เพื่อเก็บไว้ใช้ภายหลัง หรือว่าอยากได้ view ที่ไม่มีอยู่ใน view มาตรฐาน ในตัวอย่างนี้จะมาลองทำ Number Picker กัน โดยเจ้า Number Picker นี้มีอยู่ใน api level 11 (android 3) ขึ้นไป ในตอนที่ผมเริ่มเขียนมีเครื่อง test เป็น android 2.2 ต้องหาโหลด widget ของที่อื่นมาใช้ ซึ่งบางทีมันก็ไม่ได้ตรงกับที่เราต้องการเท่าไหร่นัก มาลองกันเลยครับ หน้าตาอาจจะธรรมดาไปหน่อยนะครับ
ต่อเนื่องจากบทความที่แล้วนะครับ ผมได้พูดเกี่ยวกับเรื่องของ LinearLayout ไปแล้ว คราวนี้จะพูดถึงเรื่องของ RelativeLayout กันบ้าง เราได้รู้แล้วว่า LinearLayout นั้นการจัดวาง view ภายในจะเหมือนกับการวางกล่องเรียงไปตามแนวที่เรากำหนด ส่วน RelativeLayout นั้นจะเป็นการวางโดยอ้างอิงจาก View อื่นหรือ อ้างอิงจากตัว RelativeLayout เอง ยกตัวอย่างเช่นมี ImageView อยู่หนึ่งเราอยากวางไว้กึ่งกลางของหน้าจอแล้ววางคำอธิบายไว้ด้านล่างของรูปก็จะสามารถทำได้ดังนี้
สังเกตจาก xml ด้านบน มีการใช้ attribute layout_centerInParent, layout_centerHorizontal, layout_below โดย attribute เหล่านี้จะไม่มีใน LinearLayout โดย ImageView img กำหนดให้ layout_centerInParent = true คือกำหนดให้อยู่กึ่งกลางของ RelativeLayout ซึ่งในตัวอย่างนั้น RelativeLayout มีขนาดเต็มหน้าจอ TextView กำหนด layout_below ="@+id/img" คือกำหนดให้ View นี้อยู่ใต้ view ที่มี id img ซึ่งในตัวอย่างก็คือ ImageView นั่นเอง จากนั้นกำหนด layout_centerHorizontal=true คือกำหนดให้อยู่กึ่งกลางในแนว horizontal ถ้าเป็นแนวตั้งใช้ layout_centerVertical
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/img" android:layout_centerInParent="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:layout_below="@+id/img" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This view is under image" /> </RelativeLayout>หน้าตาก็จะประมาณนี้
สังเกตจาก xml ด้านบน มีการใช้ attribute layout_centerInParent, layout_centerHorizontal, layout_below โดย attribute เหล่านี้จะไม่มีใน LinearLayout โดย ImageView img กำหนดให้ layout_centerInParent = true คือกำหนดให้อยู่กึ่งกลางของ RelativeLayout ซึ่งในตัวอย่างนั้น RelativeLayout มีขนาดเต็มหน้าจอ TextView กำหนด layout_below ="@+id/img" คือกำหนดให้ View นี้อยู่ใต้ view ที่มี id img ซึ่งในตัวอย่างก็คือ ImageView นั่นเอง จากนั้นกำหนด layout_centerHorizontal=true คือกำหนดให้อยู่กึ่งกลางในแนว horizontal ถ้าเป็นแนวตั้งใช้ layout_centerVertical
วันนี้จะพูดเรื่องของ RelativeLayout และ LinearLayout เบื้องต้นกันครั้บ โดยทั้งสองตัวข้างต้นเป็นประเภท viewGroup ก็คือสามารถมี view อยู่ภายในได้ ยกตัวอย่างเช่น
สังเกตว่าใน LinearLayout จะมี TextView และ EditText อยู่ภายใน ทีนี้แล้ว RelativeLayout กับ LinearLayout มันต่างกันยังไง? ในส่วนของ LinearLayout นั้นผมมองเหมือนกับการวางกล่องสี่เหลี่ยมวางไปเรื่อยขึ้นอยู่กับว่าเราจะกำหนดให้เรียงต่อไปด้าน horizontal หรือ vertical โดย LinearLayout จะมี attribute ชื่อ orientation ให้เราสามารถกำหนดแนวในการวางได้ โดยใน LinearLayout นั้นก็สามารถวาง LinearLayout ซ้อนลงไปได้
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Name : " /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textNoSuggestions" android:hint="TYPE YOU NAME" /> </LinearLayout>หน้าตาก็จะประมาณนี้
สังเกตว่าใน LinearLayout จะมี TextView และ EditText อยู่ภายใน ทีนี้แล้ว RelativeLayout กับ LinearLayout มันต่างกันยังไง? ในส่วนของ LinearLayout นั้นผมมองเหมือนกับการวางกล่องสี่เหลี่ยมวางไปเรื่อยขึ้นอยู่กับว่าเราจะกำหนดให้เรียงต่อไปด้าน horizontal หรือ vertical โดย LinearLayout จะมี attribute ชื่อ orientation ให้เราสามารถกำหนดแนวในการวางได้ โดยใน LinearLayout นั้นก็สามารถวาง LinearLayout ซ้อนลงไปได้
สมัครสมาชิก:
บทความ
(
Atom
)