วันนี้เราจะมาสร้างโปรแกรมเล่นเพลงแบบง่ายๆกันครับ โดย 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

หลังจากตัวอย่างในตัวอย่างที่แล้ว ที่เราสร้าง ListActivity โดยแต่ละรายการมีรูปที่แตกต่างกันโดยใช้ SimpleAdapter วันนี้เราจะมาใช้ Adapter อีกตัวหนึ่งคือ BaseAdapter โดยวิธีการนี้เราต้องสร้าง class ขึ้นมาโดยสืบทอด BaseAdapter วิธีนี้เราสามารถควบคุมการแสดงผลได้มากกว่าที่ผ่านมา ตัวอย่างที่เราจะทำวันนี้ดัดแปลงมาจากตัวอย่างที่แล้ว โดยในแต่ละรายการจะมีจำนวน และให้ highlight แถวที่มีจำนวนน้อยกว่าหรือเท่ากับเกณฑ์ต่ำ โดยแต่ละรายการมีเกณฑ์ไม่เท่ากัน ลองดูผลลัพธ์ครับ

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

<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

<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

<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 แบบเบื้องต้นกันครับ

1. ขั้นแรกสร้างโปรเจ็คขึ้นมาก่อนครับ ในที่นี้ขอตั้งชื่อโปรเจ็คว่า SimpleListview นะครับ วิธีการสร้างโปรเจ็คสามารถดูได้จากในโพสต์ก่อนหน้านะครับ
2. ขั้นตอนต่อไปเปิดไฟล์ 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 ก็จะประมาณนี้ครับ