Home Archive for 2013

หลังจากไม่ได้อัพบล็อกมานานมากกก ช่วงนี้พอมีเวลาว่างเลยมาอัพเดทบล็อกซักหน่อย โดยจะมาแนะนำบริการ bookmark ออนไลน์ ที่ชื่อว่า Pocket เป็นบริการ bookmark ออนไลน์ ซึ่งเจ้า Pocket นี้สามารถใช้ได้บน android, iOS และ desktop พูดมาแค่นี้ก็คงพอจะจินตาการได้แล้วใช่ไหมครับว่ามันดีอย่างไง สมมุติว่าเรานั่งทำงานอยู่ที่ office แล้วค้นหาเจอบทความน่าอ่านแต่ยังไม่มีเวลาอ่านตอนนี้ เราก็สามารถเก็บไว้อ่านต่อที่อื่น หรือในอุปกรณ์อื่นๆ ผ่านเจ้า Pocket นี่ได้เลย พออ่านมาถึงตรงนี้หลายๆคนก็คิดไปถึงบริการที่คล้ายกันอย่าง Pinterest จากที่เคยใช้ Pinterest มาสักระยะนึง (หลังๆไม่ค่อยได้ใช้นะ) Pocket ดูจะเป็นอะไรที่ง่ายกว่า ไม่ต้องมี board บันทึกได้เลย ใส่ Tag ได้ หน้าที่บันทึกไม่ต้องมีรูปก็บันทึกได้(ตอนใช้ Pinterest ไม่มีรูปมันไม่ให้บันทึกอะ ไม่รู้ตอนนี้ยังเป็นอยู่ไหม)

ทีนี้มาถึงเรื่องการสมัครใช้บริการกันบ้าง เข้าไป http://getpocket.com/ ได้เลยเลือก signup ก็จะให้ใส่ข้อมูลตามนี้ (ผู้เขียนสมัครผ่านเว็บนะ ถ้าเกิดผ่าน app ก็คงไม่แตกต่างกันมากนัก)

หลังจากสมัครแล้วก็ล็อกอินเข้าระบบ ในรายการที่เรา Bookmark นั้นแบ่งเป็น Home, Archive , Favorites เมื่อเรา bookmarks มาครั้งแรกก็จะอยู่ที่หน้า Home หลังจากนั้นเราสามารถเลือกย้ายไป Archive ได้ โดยภายในแต่ละที่สามารถ filter ได้ว่าจะเป็น video, image, article อีกด้วย
สำหรับผู้ที่ใช้ Chrome Desktop สามารถติดตั้ง extension ได้ตาม ลิงก์ครับ เมื่อติดตั้งแล้วเรากด save to pocket บริเวณ extension bar (ไม่แน่ใจเรียกถูกหรือป่าว) ด้านบน (การบันทึกสามารถกด icon ที่ extension bar หรือ คลิกขวา save to pocket ก็ได้ครับ) ครั้งแรกจะให้เราล็อกอินครับ เมื่อล็อกอินเสร็จ มันก็บันทึกให้เลย

เมื่อบันทึกเสร็จก็จะขึ้นแบบนี้ กดเข้าไปดูที่เราบันทึกไว้เพื่อใส่ Tag หรือ Favorite ก็ได้ครับ สำหรับใน android เวลาต้องการ bookmark ก็เลือกแชร์จาก browser ที่ใช้แล้วเลือก Pocket ก็ได้ครับ ก็มีเท่านี้แหละครับ ลองไปใช้กันดู

ต่อเนื่องจากบทความที่แล้วนะครับ ผมได้พูดเกี่ยวกับเรื่องของ LinearLayout ไปแล้ว คราวนี้จะพูดถึงเรื่องของ RelativeLayout กันบ้าง เราได้รู้แล้วว่า LinearLayout นั้นการจัดวาง view ภายในจะเหมือนกับการวางกล่องเรียงไปตามแนวที่เรากำหนด ส่วน RelativeLayout นั้นจะเป็นการวางโดยอ้างอิงจาก View อื่นหรือ อ้างอิงจากตัว RelativeLayout เอง ยกตัวอย่างเช่นมี ImageView อยู่หนึ่งเราอยากวางไว้กึ่งกลางของหน้าจอแล้ววางคำอธิบายไว้ด้านล่างของรูปก็จะสามารถทำได้ดังนี้

<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 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

หลังจากตัวอย่างในตัวอย่างที่แล้ว ที่เราสร้าง 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 แบบเบื้องต้นกันครับ

ขั้นแรกสร้างโปรเจ็คขึ้นมาก่อนครับ ในที่นี้ขอตั้งชื่อโปรเจ็คว่า 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 ก็จะประมาณนี้ครับ

สมัครสมาชิก: บทความ ( Atom )