หลังจากไม่ได้อัพเดทบล็อกมาสักพัก ก็คิดได้ว่าควรจะอัพเดทบล็อกซะบ้าง คราวนี้จะเอา library มาแนะนำครับ โดยตัวนี้ชื่อว่า Sherlock ActionBar โดยเจ้า library เค้าอธิบายว่าเป็น extension ของ support library โดยจะช่วยเราในการสร้าง action bar ให้รองรับตั้งแต่ version 2 ขึ้นไป แค่นี้ก็น่าใช้แล้วใช้แล้วใช่ไหมล่ะ แถมเจ้าตัวนี้ใช้ง่ายมากๆ ตัวอย่างเพิ่มเติมดูได้จากใน demo เลยนะ เดี๋ยวว่างๆจะหาเวลามาเขียนตัวอย่างเพิ่มเติมนะ
Home
android
แสดงบทความที่มีป้ายกำกับ android แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ android แสดงบทความทั้งหมด
วันนี้จะมาดูรูปแบบของ scaleType ใน ImageView ครับ โดย attribute อันนี้ทำให้เราสามารถกำหนดการรูปแบบการ scale รูปภาพได้ครับ ทำไมต้อง scale ? คงจะมีสักครั้งที่เรามีพื้นที่จำกัด แต่รูปภาพที่จะแสดงนั้นมีหลากหลายขนาดซึ่งบางทีเราอาจจะอยากให้แสดงรูปในอัตราส่วนปกติมากกว่าที่จะบีบรูปลงมา หรือ อาจจะต้องการกำหนดการ scale แบบอื่น
หลังจากจัดการกับปัญหา 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 ซ้อนลงไปได้
วันนี้เราจะมาสร้างโปรแกรมเล่นเพลงแบบง่ายๆกันครับ โดย android มี MediaPlayer ให้เราเรียกใช้อยู่แล้ว แต่ก่อนที่เราจะใช้นั้นต้องเข้าใจถึง state ของ MediaPlayer ก่อน ดูได้จากรูปภาพครับ
จาก http://developer.android.com/reference/android/media/MediaPlayer.html
โดยเมื่อเรา new object หรือเรียกใช้ method reset ขึ้นมาก็จะอยู่ใน state idle ก่อน แต่ถ้าสร้างจาก method create จะอยู่ใน state prepare ในตัวอย่างเราจะใช้การ new object ขึ้นมาใหม่ จากนั้นเรียก method setDataSource โดย method setDataSource จะต้องเรียกใช้ใน state idle เท่านั้น เมื่อสำเร็จจะเข้าสู่ state initialized ข้อสำ คัญคือ MediaPlayer จะต้องเข้าสู่ prepare state ก่อนที่จะเข้าสู่ start โดยเราสามารถเรียกใช้ method prepare (ในตัวอย่างเราเรียกใช้ method prepare แต่ถ้าเราต้องการเล่นไฟล์ที่ stream ผ่าน network ต้องเรียกใช้ method prepareAsync ) เสร็จแล้วจึงเรียกใช้ method start เพื่อเข้าสู่ start state
แล้วแต่ละ state ของ MediaPlayer สำคัญอย่างไง?เราจำเป็นต้องเข้าใจแต่ละ state ของ MediaPlayer เนื่องจากบาง method จำเป็นต้องเรียกใช้ใน state ให้ถูกต้องนั่นเอง สำหรับ type ที่ MediaPlayer support สามารถดูได้จากที่นี่
สำหรับโปรแกรมที่เราจะทำวันนี้ จะสร้าง MediaPlayer ขึ้นมาโดยเล่นไฟล์ใน raw และ percent การเล่นใน progressbar โดยผู้ใช้สามารถ pause , play stop ได้ ไปดูหน้าตาโปรแกรมครับ
Source Code สามารถ download ได้ที่นี่นะครับ ไปดูที่โค้ดกันบ้าง activity_main.xml
จาก http://developer.android.com/reference/android/media/MediaPlayer.html
โดยเมื่อเรา new object หรือเรียกใช้ method reset ขึ้นมาก็จะอยู่ใน state idle ก่อน แต่ถ้าสร้างจาก method create จะอยู่ใน state prepare ในตัวอย่างเราจะใช้การ new object ขึ้นมาใหม่ จากนั้นเรียก method setDataSource โดย method setDataSource จะต้องเรียกใช้ใน state idle เท่านั้น เมื่อสำเร็จจะเข้าสู่ state initialized ข้อสำ คัญคือ MediaPlayer จะต้องเข้าสู่ prepare state ก่อนที่จะเข้าสู่ start โดยเราสามารถเรียกใช้ method prepare (ในตัวอย่างเราเรียกใช้ method prepare แต่ถ้าเราต้องการเล่นไฟล์ที่ stream ผ่าน network ต้องเรียกใช้ method prepareAsync ) เสร็จแล้วจึงเรียกใช้ method start เพื่อเข้าสู่ start state
แล้วแต่ละ state ของ MediaPlayer สำคัญอย่างไง?เราจำเป็นต้องเข้าใจแต่ละ state ของ MediaPlayer เนื่องจากบาง method จำเป็นต้องเรียกใช้ใน state ให้ถูกต้องนั่นเอง สำหรับ type ที่ MediaPlayer support สามารถดูได้จากที่นี่
สำหรับโปรแกรมที่เราจะทำวันนี้ จะสร้าง MediaPlayer ขึ้นมาโดยเล่นไฟล์ใน raw และ percent การเล่นใน progressbar โดยผู้ใช้สามารถ pause , play stop ได้ ไปดูหน้าตาโปรแกรมครับ
Source Code สามารถ download ได้ที่นี่นะครับ ไปดูที่โค้ดกันบ้าง activity_main.xml
หลังจากตัวอย่างในตัวอย่างที่แล้ว ที่เราสร้าง ListActivity โดยแต่ละรายการมีรูปที่แตกต่างกันโดยใช้ SimpleAdapter วันนี้เราจะมาใช้ Adapter อีกตัวหนึ่งคือ BaseAdapter โดยวิธีการนี้เราต้องสร้าง class ขึ้นมาโดยสืบทอด BaseAdapter วิธีนี้เราสามารถควบคุมการแสดงผลได้มากกว่าที่ผ่านมา ตัวอย่างที่เราจะทำวันนี้ดัดแปลงมาจากตัวอย่างที่แล้ว โดยในแต่ละรายการจะมีจำนวน และให้ highlight แถวที่มีจำนวนน้อยกว่าหรือเท่ากับเกณฑ์ต่ำ โดยแต่ละรายการมีเกณฑ์ไม่เท่ากัน ลองดูผลลัพธ์ครับ
activity_main.xml
activity_main.xml
<ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="match_parent" />row.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:gravity="center_vertical" > <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_vertical" android:drawableLeft="@drawable/ico_apple" android:drawablePadding="10dp" /> <TextView android:id="@+id/num" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center_vertical" android:paddingRight="20dp" /> </LinearLayout>
จากตัวอย่างที่แล้วเราได้ใส่รูปลงใน ListActivity ของเราแล้วแต่ว่าทุกๆรายการเป็นรูปเดียวกันหมด วันนี้เราจะมาสร้าง ListActivity ที่แต่ละรายการสามารถใช้รูปที่แตกต่างกันได้ โดยใช้ SimpleAdapter (ชื่อ Simple แต่ไม่แน่ใจว่า Simple จริงหรือป่าว 555) ก่อนอื่นดูผลลัพธ์โปรแกรมก่อนครับ
activity_main.xml
activity_main.xml
<ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="match_parent" />row.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:gravity="center_vertical" > <ImageView android:id="@+id/img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="10dp" /> <TextView android:id="@+id/name" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_vertical" /> </LinearLayout>MainActivity.java
package com.simplelist; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import android.app.ListActivity; import android.os.Bundle; import android.view.View; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.SimpleAdapter; import android.widget.Toast; public class MainActivity extends ListActivity { final String[] fruit = {"Apple", "Banana", "Coconut", "Durian", "Guava", "Mango", "Mangosteen", "Rambutant"}; final int[] img = {R.drawable.ico_apple, R.drawable.ico_banana, R.drawable.ico_coconut, R.drawable.ico_durian, R.drawable.ico_guava, R.drawable.ico_mango, R.drawable.ico_mangosteen, R.drawable.ico_rambutant }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ArrayList<HashMap<String, Object>> listArg = new ArrayList<HashMap<String, Object>>(); HashMap<String, Object> map = null; int i = 0; for(String f : fruit){ map = new HashMap<String, Object>(); map.put("name", f); map.put("img", img[i]); listArg.add(map); i++; } SimpleAdapter adapter = new SimpleAdapter(this, listArg, R.layout.row, new String[]{"name", "img"}, new int[]{R.id.name, R.id.img}); this.setListAdapter(adapter); } @Override public void onListItemClick(ListView lv, View v, int position, long id){ Toast.makeText(this, "You click " + fruit[position], Toast.LENGTH_SHORT).show(); } }
จากตัวอย่าง การใช้งาน ListActivity เบื้องต้น เราสามารถสร้าง List รายการขึ้นมาได้แต่ List รายการดังกล่าว ยังดูไม่ค่อยน่าสนใจเท่าไหร่ วันนี้เราจะมาลองใส่รูปดูครับ ก่อนอื่นดูหน้าตาโปรแกรมที่เสร็จแล้วก่อนครับ
ทีนี้มาดูโค้ดกันบ้าง activity_main.xml
ทีนี้มาดูโค้ดกันบ้าง activity_main.xml
<ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="match_parent" />row.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/row" android:layout_width="match_parent" android:layout_height="match_parent" android:drawableLeft="@drawable/ico_gear" android:drawablePadding="10dp" android:gravity="center_vertical" />
วันนี้เราจะมาลองสร้าง Listener onclick ของ Button ใน android กัน โดยจะมีตัวอย่างการใช้งานอยู่ 4 แบบ โดยเราจะสร้างตัวอย่างง่ายๆโดยสร้าง Button ขึนมา 3 อันแล้วแต่ละอันก็จะกำหนดการทำงานคนละวิธีกัน ลองดูหน้าตาผลลัพธ์ก่อนแล้วกันนะครับ
การทำงานก็ง่ายๆ คือเมื่อกดแต่ละปุ่มก็จะแสดงข้อความว่า "This is message from button?" หน้าตาโปรแกรมดูธรรมดานะครับเราลองดูโค้ดกัน ก่อนอื่นคือ layout
การทำงานก็ง่ายๆ คือเมื่อกดแต่ละปุ่มก็จะแสดงข้อความว่า "This is message from button?" หน้าตาโปรแกรมดูธรรมดานะครับเราลองดูโค้ดกัน ก่อนอื่นคือ layout
<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="vertical" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Listener Test" /> <Button android:id="@+id/btn1" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="button1OnClickListener" android:text="Button1" /> <Button android:id="@+id/btn2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button2" /> <Button android:id="@+id/btn3" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button3" /> </LinearLayout>ต่อไปเป็นโค้ดโปรแกรมทั้งหมดนะครับ
การใช้งาน ListActivity เบื้องต้น 1
วันนี้จะมาลองทำ ListActivity แบบเบื้องต้นกันครับ- ขั้นแรกสร้างโปรเจ็คขึ้นมาก่อนครับ ในที่นี้ขอตั้งชื่อโปรเจ็คว่า SimpleListview นะครับ วิธีการสร้างโปรเจ็คสามารถดูได้จากในโพสต์ก่อนหน้านะครับ
- ขั้นตอนต่อไปเปิดไฟล์ res/layout/activity_main.xml ขึ้นมาครับ ชื่อไฟล์ใครจะต่างจากนี้ก็ได้ครับ แล้วแก้ไขดังนี้
<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" tools:context=".MainActivity" > <ListView android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
ในโค้ด xml ด้านบนก็ทำการเพิ่ม ListView เข้าไปนะครับ โดยกำหนด id เป็น @android:id/list เราจำเป็นต้องกำหนดแบบนี้ ถ้าเราต้องการใช้ activity ของเรา extends class ListActivity ถ้าไม่กำหนดจะเกิด error ครับ จริงๆแล้วเราสามารถย่อเหลือแค่นี้ก็ได้ครับ<ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="match_parent" />
เพราะในหน้ัานี้เรามี view แค่อันเดียวคือ ListView นั่นเอง หน้าตาแบบ graphic ก็จะประมาณนี้ครับ
วันนี้จะมาลองเขียนโปรแกรมรับส่งค่าระหว่าง activity แบบง่ายใน android กันครับ ก่อนอื่นเลยต้องรู้จักกับ activity ก่อน โดย activity เนี่ยถ้าพูดให้เข้าใจง่ายๆ ในตอนนี้อาจจะคิดว่า หนึ่งหน้าจอ คือ 1 activity ก่อนก็ได้ครับ ทีนี้เวลาเราเปิดแอพขึ้นมาหนึ่งแอพเนี่ย มันมีหลายๆ activity โดยเมื่อเปิด activity ขึ้นมาก็คือการ push ลงไปใน stack เมื่อ activity ทำงานเสร็จแล้วก็ pop ออกจาก stack ประมาณนี้อะครับ ถ้าต้องการเข้าใจมากขึ้นแนะนำให้ไปอ่าน ที่นี่ครับ
ทีนี้มาเข้าเรื่องของโปรเจ็คเรา โปรเจ็คนี้จะมี 2 activity โดย MainActivity จะโชว์หน้าจอให้ผู้ใช้กรอกชื่อเข้ามา จากนั้นจะทำการส่งชื่อไป DisplayActivity เพื่อไปแสดงครับ ก่อนอื่นก็สร้างโปรเจ็คขึ้นมาใหม่ครับ
ในที่นี้ใช้ชื่อโปรเจ็คว่า SampleIntent นะครับจะเปลี่ยนไปจากนี้ก็ได้ไม่ว่ากัน ในตอนที่สร้างโปรเจ็คใหม่ผมเลือกให้สร้าง Activity มาให้เลยคือ MainActivity( ชื่ออาจแก้ไขเป็นอันอื่นก็ได้ครับ ) ก็ต้องมาสร้าง activity อีกอันขึ้นมาโดยคลิกขวาที่ src/ชื่อแพคเกจ แล้วเลือก new -> class
จากนั้นก็สร้าง layout ขึ้นมาอีกหนึ่งไฟล์ ( ไฟล์ activity_main.xml ถูกสร้างมาพร้อมกับ MainActivity) โดยใช้ชื่อไฟล์ว่า display_activity.xml
จากนั้นก็มาแก้ไขแต่ละไฟล์เลยครับ
จากนั้นก็สร้าง layout ขึ้นมาอีกหนึ่งไฟล์ ( ไฟล์ activity_main.xml ถูกสร้างมาพร้อมกับ MainActivity) โดยใช้ชื่อไฟล์ว่า display_activity.xml
จากนั้นก็มาแก้ไขแต่ละไฟล์เลยครับ
สมัครสมาชิก:
บทความ
(
Atom
)