Android Tutorial – View (Widget) on Android

View (Widget) ใช้สร้างองค์ประกอบของหน้าจอ Application ที่เร้าต้องการ ที่น่าสนใจดังจะกล่าวต่อไปนี้ ^_^ (แบบว่าสร้างผ่าน xml ก่อนนะครับ ส่วนการเขียนเป็นโค้ดไว้คราวต่อไปครับผม)

TextView

         ใช้สำหรับแสดงข้อความเพียงอย่างเดียวทางหน้าจอ โดยกำหนดผ่านแท็ก TextView และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<TextView android:id="@+id/TextView01" android:text="Hello Everybody ^_^" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="#FF0000"/>

EditText

         ใช้สำหรับแสดงข้อความ และสามารถป้อน แก้ไขข้อความได้ทางหน้าจอ โดยกำหนดผ่านแท็ก EditText และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<EditText android:id="@+id/EditText01" android:text="Show Data and Edit Data..." android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="#00FF00" android:singleLine="false"/> <EditText android:id="@+id/EditText02" android:text="0123456..." android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="#00FF00" android:singleLine="true" android:numeric="integer"/> <EditText android:id="@+id/EditText03" android:text="(087)1112222" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#00FF00" android:phoneNumber="true"/> <EditText android:id="@+id/EditText04" android:text="password key" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#00FF00" android:password="true"/>

ImageView

         ใช้สำหรับแสดงรูปภาพใดๆ ได้ทางหน้าจอ โดยกำหนดผ่านแท็ก ImageView และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<ImageView android:id="@+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/imgtest"/>

CheckBox

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

<CheckBox android:id="@+id/CheckBox01" android:text="Business Commputer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true"/> <CheckBox android:id="@+id/CheckBox02" android:text="Computer Engineering" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <CheckBox android:id="@+id/CheckBox03" android:text="Computer Science" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true"/>

RadioButton และ RadoiGroup

         ใช้สำหรับแสดง RadioButton ซึ่งอยู่ภายใต้ RadioGroup ให้ผู้ใช้เลือก ซึ่งจะเลือกได้เพียงหนึ่งเท่านั้นภายใต้ RadioGroup (ซึ่งเป็น ViewGroup) หนึ่งๆ ทางหน้าจอ โดยกำหนดผ่านแท็ก RadioButton และ RadioGroup และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <RadioButton android:id="@+id/RadioButton01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Mr." android:checked="true" android:textStyle="bold" android:textColor="#FF0000"/> <RadioButton android:id="@+id/RadioButton01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Mrs." android:checked="false"/> <RadioButton android:id="@+id/RadioButton01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Miss" android:checked="false" android:textStyle="italic" android:textColor="#00FF00"/> </RadioGroup>

Button

         ใช้สำหรับแสดง ปุ่ม ทางหน้าจอ โดยกำหนดผ่านแท็ก Button และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<Button android:id="@android:id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Click"/> 

ImageButton

         ใช้สำหรับแสดง ปุ่มที่เป็นรูปภาพ ทางหน้าจอ โดยกำหนดผ่านแท็ก ImageButton และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<ImageButton android:id="@+id/ImageButton01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/media"/>

DatePicker

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

<DatePicker android:id="@+id/DatePicker01" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

TimePicker

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

<TimePicker android:id="@+id/TimePicker01" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

Toggle

         ใช้สำหรับกำหนด หรือตั้งค่าปุ่ม ซึ่งมี 2 สถานะ คือ checked และ unchecked และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<ToggleButton android:id="@+id/ToggleButton01" android:layout_height="wrap_content" android:checked="true" android:textOff="Pic Off" android:textOn="Pic On" android:layout_width="80dip"/>

List

         ใช้สำหรับแสดงรายการข้อมูลต่างๆ ให้ผู้ใช้เลือก โดยกำหนดผ่านแท็ก List และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<ListView android:id="@+id/ListView01" android:layout_width="fill_parent" android:layout_height="fill_parent"/>

Spinner

         ใช้สำหรับแสดงรายการข้อมูลต่างๆ ให้ผู้ใช้เลือกในลักษณะของลิสต์ เมื่อผู้ใช้กดลูกศรด้านข้าง โดยกำหนดผ่านแท็ก Spinner และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<Spinner android:id="@+id/Spinner01" android:layout_width="fill_parent" android:layout_height="wrap_content"/>

AutoCompleteTextView

         ใช้สำหรับแสดงรายการข้อมูลต่างๆ ให้ผู้ใช้เลือกในลักษณะของลิสต์ เมื่อผู้ใช้ป้อนข้อมูลเป็นตัวอักษรบางตัวลงไปใน EditText โดยกำหนดผ่านแท็ก AutoCompleteTextView และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<AutoCompleteTextView android:id="@+id/AutoCompleteTextView01" android:layout_width="fill_parent" android:layout_height="wrap_content" />

TabHost

         ใช้เพื่อเพิ่มแท็บที่สามารถเรียกใช้ View หรือ Activity ต่างๆ และทำให้การสร้างหน้าจอเป็นไปได้ง่ายขึ้น โดยกำหนดผ่านแท็ก TabHost และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+:id/TabHost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp"> <TabWidget android:id="@+:id/TabWidget01" android:layout_width="fill_parent" android:layout_height="wrap_content"/> <FrameLayout android:id="@+id/FrameLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp"/> </LinearLayout> </TabHost>

GridView

ใช้สำหรับแสดงรายการข้อมูลต่างๆ ใน มุมมองเป็น 2 มิติ โดยกำหนดผ่านแท็ก GridView และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/GridView01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:columnWidth="90dp" android:stretchMode="columnWidth" android:gravity="center"/>

Gallery

ใช้สำหรับแสดงรายการข้อมูลในแนวนอน (Horizontally) ซึ่งรายการที่เลือกจะอยู่ตรงกลาง โดยกำหนดผ่านแท็ก Gallery และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<Gallery android:id="@+id/Gallery01" android:layout_width="fill_parent" android:layout_height="wrap_content"/>

ImageSwitcher

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

<ImageSwitcher android:id="@+id/ImageSwitcher01" android:layout_width="fill_parent" android:layout_height="fill_parent"/>

WebView

ใช้สำหรับแสดงเว็บไซต์ต่างๆ โดยกำหนดผ่านแท็ก WebView และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

<WebView android:id="@+id/WebView01" android:layout_width="fill_parent" android:layout_height="fill_parent" />

VedioView

ใช้สำหรับแสดงภาพเคลื่อนไหว โดยกำหนดผ่านแท็ก VedioView และสามารถกำหนดคุณสมบัติต่างๆ ที่ใช้บ่อยๆ ดังนี้

 <VideoView android:id="@+id/VideoView01" android:layout_width="fill_parent" android:layout_height="fill_parent" />

 

credit : http://www.androidjump.com/droidjump-tutorial-8-view-widget/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s