เฮ้~! ในที่สุดก็มาถึงบทความเรื่องนี้เสียที หลังจากที่เกริ่นกล่าวไว้มาหลายบทความแล้ว ณ ตอนนี้ก็ถึงเวลาที่จะมาลองทำ View Pager ด้วย Fragment ที่ผู้ที่หลงเข้ามาอ่านหลายๆคนรอคอยและชอบถามหากัน
View Pager คืออะไร?
ขอเกริ่นไว้สำหรับมือใหม่ที่ยังไม่รู้จักนะครับ View Pager ก็จะคล้ายกับ List View ตรงที่เอา View หลายๆ View มาเรียงกันแล้วให้เลื่อนขึ้นลงเพื่อดูแต่ละอันได้ แต่สำหรับ View Pager จะเป็นการนำ Fragment มาเรียงต่อกันในแนวนอนแล้วเลื่อนไปมาได้นั่นเอง
จะเห็นว่า View Pager มีความแตกต่างไปจาก List View ตรงที่จะมีการล็อคตำแหน่งของ Fragment แต่ละอันให้อยู่ตรงกลางจอเมื่อปล่อยนิ้ว ต่างจาก List View ที่จะไม่มีการล็อคตำแหน่ง จะเลื่อนไปที่ครึ่งๆกลางๆก็ทำได้
และเมื่อลองนึกภาพการทำงานดีๆก็จะพบว่าการทำ View Pager ด้วย Fragment แบบนี้จะค่อนข้างยืดหยุ่นเป็นอย่างมาก เพราะว่าสามารถเขียนควบคุมไว้ที่ Fragment แต่ละตัวได้เลย ว่าจะให้ Fragment ในแต่ละหน้าทำงานอะไร แต่ก็ไม่ได้หมายความว่าให้เปลี่ยน List View มาเป็น View Pager นะ เพราะว่า List View ก็ยังสะดวกในแง่ของการใช้งานที่ไม่ต้องการการทำงานที่ซับซ้อนมากนัก เหมาะสำหรับแสดงข้อมูลจำนวนมากๆ ส่วน View Pager นั้นเหมาะกับการทำงานในแต่ละหน้าที่แตกต่างกันไปหรือมีความสัมพันธ์กัน
โดย View Pager ก็จะมีหลักการง่ายๆคือ กำหนด Fragment ที่จะแสดงไว้ใน Adapter ซึ่ง Adapter จะเปรียบเสมือนตัวกลางที่จะคอยควบคุมว่า Fragment ตัวไหนอยู่หน้าไหน จากนั้นก็แสดงออกมาเป็น View Pager นั่นเอง~
ดังนั้นสิ่งที่ต้องทำก็คือ
• สร้าง View Pager ใน Layout ของ Activity
• สร้าง Fragment ที่จะใช้ใน View Pager ให้ครบ (Fragment + Layout)
• สร้าง Adapter และกำหนด Fragment ที่จะแสดงใน View Pager
• กำหนด Adapter เข้ากับ View Pager ที่สร้างไว้ใน Activity
สั้นๆง่ายๆ ส่วนความยุ่งยากก็อยู่ที่การเขียน Fragment เป็นหลักว่าจะต้องการให้ทำงานอะไรและยังไง ซึ่งก็ขึ้นอยู่กับผู้ที่หลงเข้ามาอ่านแล้วล่ะ!!
ก่อนจะเริ่ม ขออธิบายคร่าวๆก่อนนะครับว่าไฟล์ Activity, Fragment และ Layout ก็จะอิงชื่อจากบทความก่อนหน้านะครับ (แต่คำสั่งข้างในไม่เหมือนกัน)
Activity
• MainActivity.java <> activity_main.xml
Fragment
• OneFragment.java <> fragment_one.xml
• TwoFragment.java <> fragment_two.xml
• ThreeFragment.java <> fragment_three.xml
เมื่อเตรียมพร้อมแล้วก็มาเริ่มกันเลย!
สร้าง View Pager ใน Layout ของ Activity
สำหรับ View Pager นั้นจะมาพร้อมกับ Android Support v4 ดังนั้นจะไม่มี View Pager ใน API หลักนะ โดย Package ของ View Pager จะเป็น
android.support.v4.view.ViewPager
และเวลาสร้าง View Pager ใน Layout ก็จะมีลักษณะดังนี้
<android.support.v4.view.ViewPager ... />
ยกตัวอย่างเช่น
เวลาประกาศในโค๊ด
ดังนั้นเจ้าของบล็อกขอสร้าง View Pager ให้กับ MainActivity เสียก่อน
activity_main.xml
MainActivity.java
อ่ะ..หยุดไว้แค่นี้ก่อน ต่อไปมาสร้าง Fragment ที่จะแสดงบน View Pager กัน
สร้าง Fragment ที่จะมาแสดงบน View Pager
สำหรับ Fragment ขอสร้างแบบง่ายๆเลยนะ เพื่อลดความวุ่นวาย ดังนั้น Fragment ทั้ง 3 ตัว แต่ละตัวจะมีแค่ Text View อยู่ตรงกลางแล้วแสดงข้อความว่า Fragment One, Fragment Two และ Fragment Three
fragment_one.xml
fragment_two.xml
fragment_three.xml
OneFragment.java
TwoFragment.java
ThreeFragment.java
สร้าง Adapter สำหรับ View Pager
สำหรับ Adapter จะไม่ได้ใช้ BaseAdapter หรือ SimpleAdapter แบบที่ List View ใช้นะครับ อย่าเข้าใจผิด เพราะว่า View Pager จะมี Adapter หลักๆอยู่แค่สองตัวเท่านั้น คือ FragmentStatePagerAdapter และ FragmentPagerAdapter โดยที่
• FragmentPagerAdapter (android.support.v4.app.FragmentPagerAdapter) เหมาะสำหรับ View Pager ที่มีจำนวนหน้าไม่มาก และอยากให้คงสถานะของ View อยู่ตลอดเวลา แม้แต่ Fragment จะไม่ได้ถูกแสดงก็ตาม
• FragmentStatePagerAdapter (android.support.v4.app.FragmentStatePagerAdapter) เหมาะสำหรับการใช้ View Pager แสดง Fragment จำนวนมาก เพราะจะมีการจัดการกับ Fragment เหล่านี้คล้ายๆกับ Adapter บน List View โดยจะเคลียร์การแสดงผลเมื่อ Fragment นั้นๆไม่ได้แสดงอยู่
สรุปแล้วมันต่างกันอย่างไรเนี่ย? ต่างกันประมาณนี้
สมมติว่าเจ้าของบล็อกสร้าง View Pager ที่มี Fragment อยู่ข้างใน 3 ตัว แล้วเลื่อนจากตัวแรกไปตัวสุดท้าย
FragmentPagerAdapter
FragmentStatePagerAdapter
สิ่งที่เกิดขึ้นคือ OneFragment ของ FragmentPagerAdapter จะเกิด Event เมื่อ Fragment อยู่นอกขอบเขตการแสดงผลน้อยกว่า FragmentStatePagerAdapter
ทั้งนี้ก็เพราะว่า FragmentPagerAdapter ถูกสร้างขึ้นมาสำหรับ View Pager ที่มี Fragment เป็นจำนวนไม่มากและเมื่อเคลียร์ Fragment ก็จะเคลียร์แค่ในส่วนของ View เท่านั้น ในขณะที่ FragmentStatePagerAdapter จะเหมาะกับ Fragment จำนวนมากๆ เพราะการทำงานกับ Fragment จำนวนมากจะต้องมีการเคลียร์ Fragment ที่ไม่ได้แสดงผล ดังนันจึงมีการ Detach Fragment ออกจาก View Pager
และที่สำคัญ FragmentPagerAdapter จะไม่มีการเรียก getItem ซ้ำที่ Position เก่า ส่วน FragmentStatePagerAdapter จะมีการเรียก getItem ที่ Position เก่าทุกครั้งที่กลับมาแสดง
ก็ขึ้นอยู่กับงานของผู้ที่หลงเข้ามาอ่านนะครับว่าจะใช้แบบไหน แต่ตัวอย่างของเจ้าของบล็อกไม่ได้มีอะไรมาก เป็นแค่ Fragment 3 ตัวโง่ๆที่แสดงแค่ข้อความง่ายๆเท่านั้น ดังนั้นก็ขอใช้ Adapter เป็น FragmentPagerAdapter ละกัน
สำหรับ Adapter เจ้าของบล็อกจะสร้างไฟล์ขึ้นมาใหม่ที่ชื่อว่า MyPageAdapter โดย Extend มาจาก FragmentPagerAdapter
MyPagerAdapter.java
getCount จะมีไว้กำหนดว่าจะให้แสดง Fragment ใน View Pager กี่ตัว
getItem มีไว้กำหนด Fragment ที่จะแสดงใน View Pager โดยมี Parameter เป็น Integer เพื่อระบุว่าเป็นของ Fragment ลำดับที่เท่าไรใน View Pager
เจ้าของบล็อกต้องการสร้าง View Pager ที่มี Fragment จำนวน 3 ตัวด้วยกัน ดังนั้นเจ้าของบล็อกก็จะกำหนดใน getCount ดังนี้
MyPagerAdapter.java
กำหนด Adapter ให้กับ View Pager
กลับมาที่ MainActivity ให้กำหนด Adapter ของ View Pager ให้เรียบร้อย (ลืมไปเลยล่ะสิ)
MainActivity.java
จากนั้นก็ให้ลองรันทดสอบดูโดยปาดหน้าจอซ้ายขวาไปมาก็จะเห็นว่า View Pager จะแสดง Fragment ตามที่กำหนดไว้ใน Adapter
ลองควบคุม Pager ผ่าน Activity
นอกจากการเลื่อนไปมาแล้ว View Pager ยังสามารถสั่งผ่านคำสั่งได้ด้วยว่าจะให้เลื่อนไปยัง Fragment ตัวไหน ด้วยคำสั่ง
ที่หน้า Layout ของ MainActivity จะวาง Button ลงไปสองตัว แล้วเพิ่ม Margin ให้กับ View Pager เล็กน้อย จะได้เห็นขอบเขตของ View Pager (ในตัวอย่างนี้กำหนดไว้เป็นสีขาว)
activity_main.xml
โดยจะทำ Button ให้เป็นปุ่มกดเพื่อเปลี่ยน Fragment ที่แสดงอยู่ใน View Pager นั่นเอง จากนั้นก็ประกาศ Button ใน MainActivity.java ให้เรียบร้อยซะ
MainActivity.java
ดังนั้นสิ่งที่ควรรู้คืออะไร?
ควรรู้ว่า ณ ตอนนั้น View Pager แสดงอยู่ที่หน้าเท่าไร
เพราะถ้าไม่รู้ว่ากำลังแสดงหน้าไหนอยู่ ก็ไม่รู้ว่าหน้าถัดไปควรจะเป็นหน้าอะไรนั่นเอง ซึ่ง View Pager ก็มีคำสั่งดังกล่าวไว้ให้อยู่แล้ว
ดังนั้นสำหรับ Prev ก็เดากันได้ไม่ยากเนอะ
ถ้าสมมติว่า current_position มีค่าเป็น 0 แล้วไปกดปุ่ม Prev ซ้ำมันก็กลายเป็น -1 สิ แล้วแบบนี้คำสั่งจะไม่เกิด Exception ขึ้นหรอ?
ข้อดีของคำสั่ง setCurrentItem ก็คือจะไม่มีปัญหา OutOfBoundException เพราะว่าถ้าค่าต่ำกว่า 0 ลงไป View Pager ก็จะเลือกไปที่หน้าแรกสุด (Position 0) แทน และถ้าสมมติว่า View Pager มี 3 หน้า แต่ดันไปกำหนด Position เป็น 20 ซึ่งมีค่าเกินกำหนด View Pager ก็จะเลือกไปที่หน้าสุดท้ายเท่าที่กำหนดไว้ใน Adapter แทน (Position 2)
ดังนั้น MainActivity ที่เพิ่ม Button เข้าไป 2 ตัวก็จะได้ออกมาเป็นดังนี้
MainActivity.java
เมื่อเสร็จแล้วก็ให้รันทดสอบดู จะสามารถกดปุ่ม Next หรือ Prev เพื่อเลื่อน Fragment ไปมาได้ หรือจะปาดนิ้วไปมาบน View Pager ก็ได้เช่นกัน
แต่ทว่าการกำหนด Fragment ใน Adapter ที่ใช้อยู่ตอนนี้จะมีข้อจำกัดอยู่อย่างหนึ่ง นั่นก็คือไม่สามารถดึง Fragment ที่แสดงอยู่บน View Pager เพื่อเรียกใช้คำสั่งบางอย่างได้
นั่นก็เพราะว่าคำสั่ง getItem ที่ใช้ดึง Fragment เจ้าของบล็อกได้ Return Fragment ด้วยการสร้าง Instance ขึ้นมาใหม่ เช่น
ถ้า View Pager ของผู้ที่หลงเข้ามาอ่านเป็นประเภท Standalone คือ ทำงานได้ด้วยตัวเอง โดยไม่มีการส่งข้อมูลระหว่าง Activity หรือ Fragment ตัวอื่นๆ ก็อาจจะไม่มีปัญหาอะไร แต่เอาเข้าจริงเจ้าของบล็อกก็ไม่แนะนำให้เมินเฉยปัญหานี้ไป และนอกจากนี้การสร้าง Fragment ด้วย Constructor ก็ไม่ใช่วิธีที่ถูกต้องด้วย ดังนั้น View Pager จึงไม่อาจจะจบลงเพียงแค่นี้ เพราะงั้นขอให้ติดตามอ่านกันต่อที่บทความตอนที่ 2 นะคร้าบบบบบบบ [Android Code] Let's Fragment - มาทำ View Pager กันเถิดพี่น้อง~ [ตอนที่ 2]
โดนหลอกให้พิมพ์ตาม แต่ใช้งานจริงไม่ได้อีกแล้ววววววว
บทความที่เกี่ยวข้อง
• Fragment Principle - มารู้จักกับ Fragment กันเถอะ~
• Let's Fragment - เริ่มต้นง่ายๆกับ Fragment แบบพื้นฐาน
• Let's Fragment - รู้จักกับ FragmentTransaction สำหรับการแสดง Fragment [ตอนที่ 2]
• Let's Fragment - มาทำ View Pager กันเถิดพี่น้อง~ [ตอนที่ 1]
• Let's Fragment - มาทำ View Pager กันเถิดพี่น้อง~ [ตอนที่ 2]
จะเห็นว่า View Pager มีความแตกต่างไปจาก List View ตรงที่จะมีการล็อคตำแหน่งของ Fragment แต่ละอันให้อยู่ตรงกลางจอเมื่อปล่อยนิ้ว ต่างจาก List View ที่จะไม่มีการล็อคตำแหน่ง จะเลื่อนไปที่ครึ่งๆกลางๆก็ทำได้
และเมื่อลองนึกภาพการทำงานดีๆก็จะพบว่าการทำ View Pager ด้วย Fragment แบบนี้จะค่อนข้างยืดหยุ่นเป็นอย่างมาก เพราะว่าสามารถเขียนควบคุมไว้ที่ Fragment แต่ละตัวได้เลย ว่าจะให้ Fragment ในแต่ละหน้าทำงานอะไร แต่ก็ไม่ได้หมายความว่าให้เปลี่ยน List View มาเป็น View Pager นะ เพราะว่า List View ก็ยังสะดวกในแง่ของการใช้งานที่ไม่ต้องการการทำงานที่ซับซ้อนมากนัก เหมาะสำหรับแสดงข้อมูลจำนวนมากๆ ส่วน View Pager นั้นเหมาะกับการทำงานในแต่ละหน้าที่แตกต่างกันไปหรือมีความสัมพันธ์กัน
โดย View Pager ก็จะมีหลักการง่ายๆคือ กำหนด Fragment ที่จะแสดงไว้ใน Adapter ซึ่ง Adapter จะเปรียบเสมือนตัวกลางที่จะคอยควบคุมว่า Fragment ตัวไหนอยู่หน้าไหน จากนั้นก็แสดงออกมาเป็น View Pager นั่นเอง~
ดังนั้นสิ่งที่ต้องทำก็คือ
• สร้าง View Pager ใน Layout ของ Activity
• สร้าง Fragment ที่จะใช้ใน View Pager ให้ครบ (Fragment + Layout)
• สร้าง Adapter และกำหนด Fragment ที่จะแสดงใน View Pager
• กำหนด Adapter เข้ากับ View Pager ที่สร้างไว้ใน Activity
สั้นๆง่ายๆ ส่วนความยุ่งยากก็อยู่ที่การเขียน Fragment เป็นหลักว่าจะต้องการให้ทำงานอะไรและยังไง ซึ่งก็ขึ้นอยู่กับผู้ที่หลงเข้ามาอ่านแล้วล่ะ!!
ก่อนจะเริ่ม ขออธิบายคร่าวๆก่อนนะครับว่าไฟล์ Activity, Fragment และ Layout ก็จะอิงชื่อจากบทความก่อนหน้านะครับ (แต่คำสั่งข้างในไม่เหมือนกัน)
Activity
• MainActivity.java <> activity_main.xml
Fragment
• OneFragment.java <> fragment_one.xml
• TwoFragment.java <> fragment_two.xml
• ThreeFragment.java <> fragment_three.xml
เมื่อเตรียมพร้อมแล้วก็มาเริ่มกันเลย!
สร้าง View Pager ใน Layout ของ Activity
สำหรับ View Pager นั้นจะมาพร้อมกับ Android Support v4 ดังนั้นจะไม่มี View Pager ใน API หลักนะ โดย Package ของ View Pager จะเป็น
android.support.v4.view.ViewPager
และเวลาสร้าง View Pager ใน Layout ก็จะมีลักษณะดังนี้
<android.support.v4.view.ViewPager ... />
ยกตัวอย่างเช่น
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
เวลาประกาศในโค๊ด
ViewPager pager = (ViewPager) findViewById(R.id.pager);
ดังนั้นเจ้าของบล็อกขอสร้าง View Pager ให้กับ MainActivity เสียก่อน
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"
android:background="#f2f2f2"
tools:context="${relativePackage}.${activityClass}" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff" />
</RelativeLayout>
MainActivity.java
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
public class MainActivity extends FragmentActivity {
ViewPager pager;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pager = (ViewPager) findViewById(R.id.pager);
}
}
อ่ะ..หยุดไว้แค่นี้ก่อน ต่อไปมาสร้าง Fragment ที่จะแสดงบน View Pager กัน
สร้าง Fragment ที่จะมาแสดงบน View Pager
สำหรับ Fragment ขอสร้างแบบง่ายๆเลยนะ เพื่อลดความวุ่นวาย ดังนั้น Fragment ทั้ง 3 ตัว แต่ละตัวจะมีแค่ Text View อยู่ตรงกลางแล้วแสดงข้อความว่า Fragment One, Fragment Two และ Fragment Three
fragment_one.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e6e6e6" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Fragment One" />
</RelativeLayout>
fragment_two.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e6e6e6" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Fragment Three" />
</RelativeLayout>
fragment_three.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e6e6e6" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Fragment Three" />
</RelativeLayout>
OneFragment.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class OneFragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_one, container, false);
return rootView;
}
}
TwoFragment.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class TwoFragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_two, container, false);
return rootView;
}
}
ThreeFragment.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ThreeFragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_three, container, false);
return rootView;
}
}
สร้าง Adapter สำหรับ View Pager
สำหรับ Adapter จะไม่ได้ใช้ BaseAdapter หรือ SimpleAdapter แบบที่ List View ใช้นะครับ อย่าเข้าใจผิด เพราะว่า View Pager จะมี Adapter หลักๆอยู่แค่สองตัวเท่านั้น คือ FragmentStatePagerAdapter และ FragmentPagerAdapter โดยที่
• FragmentPagerAdapter (android.support.v4.app.FragmentPagerAdapter) เหมาะสำหรับ View Pager ที่มีจำนวนหน้าไม่มาก และอยากให้คงสถานะของ View อยู่ตลอดเวลา แม้แต่ Fragment จะไม่ได้ถูกแสดงก็ตาม
• FragmentStatePagerAdapter (android.support.v4.app.FragmentStatePagerAdapter) เหมาะสำหรับการใช้ View Pager แสดง Fragment จำนวนมาก เพราะจะมีการจัดการกับ Fragment เหล่านี้คล้ายๆกับ Adapter บน List View โดยจะเคลียร์การแสดงผลเมื่อ Fragment นั้นๆไม่ได้แสดงอยู่
สรุปแล้วมันต่างกันอย่างไรเนี่ย? ต่างกันประมาณนี้
สมมติว่าเจ้าของบล็อกสร้าง View Pager ที่มี Fragment อยู่ข้างใน 3 ตัว แล้วเลื่อนจากตัวแรกไปตัวสุดท้าย
FragmentPagerAdapter
FragmentStatePagerAdapter
สิ่งที่เกิดขึ้นคือ OneFragment ของ FragmentPagerAdapter จะเกิด Event เมื่อ Fragment อยู่นอกขอบเขตการแสดงผลน้อยกว่า FragmentStatePagerAdapter
ทั้งนี้ก็เพราะว่า FragmentPagerAdapter ถูกสร้างขึ้นมาสำหรับ View Pager ที่มี Fragment เป็นจำนวนไม่มากและเมื่อเคลียร์ Fragment ก็จะเคลียร์แค่ในส่วนของ View เท่านั้น ในขณะที่ FragmentStatePagerAdapter จะเหมาะกับ Fragment จำนวนมากๆ เพราะการทำงานกับ Fragment จำนวนมากจะต้องมีการเคลียร์ Fragment ที่ไม่ได้แสดงผล ดังนันจึงมีการ Detach Fragment ออกจาก View Pager
และที่สำคัญ FragmentPagerAdapter จะไม่มีการเรียก getItem ซ้ำที่ Position เก่า ส่วน FragmentStatePagerAdapter จะมีการเรียก getItem ที่ Position เก่าทุกครั้งที่กลับมาแสดง
ก็ขึ้นอยู่กับงานของผู้ที่หลงเข้ามาอ่านนะครับว่าจะใช้แบบไหน แต่ตัวอย่างของเจ้าของบล็อกไม่ได้มีอะไรมาก เป็นแค่ Fragment 3 ตัวโง่ๆที่แสดงแค่ข้อความง่ายๆเท่านั้น ดังนั้นก็ขอใช้ Adapter เป็น FragmentPagerAdapter ละกัน
สำหรับ Adapter เจ้าของบล็อกจะสร้างไฟล์ขึ้นมาใหม่ที่ชื่อว่า MyPageAdapter โดย Extend มาจาก FragmentPagerAdapter
MyPagerAdapter.java
import android.support.v4.app.FragmentPagerAdapter;
public class MyPageAdapter extends FragmentPagerAdapter {
public MyPageAdapter(FragmentManager fm) {
super(fm);
}
public int getCount() {
return 0;
}
public Fragment getItem(int position) {
return null;
}
}
จะเห็นว่าใน Constructor ต้องมี Input Parameter เป็น FragmentManager เพื่อส่งกลับขึ้นไปผ่าน Super อีกทีgetCount จะมีไว้กำหนดว่าจะให้แสดง Fragment ใน View Pager กี่ตัว
getItem มีไว้กำหนด Fragment ที่จะแสดงใน View Pager โดยมี Parameter เป็น Integer เพื่อระบุว่าเป็นของ Fragment ลำดับที่เท่าไรใน View Pager
เจ้าของบล็อกต้องการสร้าง View Pager ที่มี Fragment จำนวน 3 ตัวด้วยกัน ดังนั้นเจ้าของบล็อกก็จะกำหนดใน getCount ดังนี้
MyPagerAdapter.java
public int getCount() {
return 3;
}
หรือprivate final int PAGE_NUM = 3;
...
public int getCount() {
return PAGE_NUM;
}
และในการกำหนด Fragment ที่จะแสดง ก็จะใช้วิธีง่ายๆแบบนี้public Fragment getItem(int position) {
if(position == 0)
return new OneFragment();
else if(position == 1)
return new TwoFragment();
else if(position == 2)
return new ThreeFragment();
return null;
}
จะเห็นว่าเจ้าของบล็อกใช้วิธีเทียบ Position เลยว่ามีค่าเท่าไร แล้วก็แสดง Fragment ตามที่กำหนดไว้กำหนด Adapter ให้กับ View Pager
กลับมาที่ MainActivity ให้กำหนด Adapter ของ View Pager ให้เรียบร้อย (ลืมไปเลยล่ะสิ)
MyPageAdapter adapter = new MyPageAdapter(getSupportFragmentManager());
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
MainActivity.java
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
public class MainActivity extends FragmentActivity {
ViewPager pager;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragment());
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
}
}
จะสังเกตเห็นว่า FragmentManager ที่เจ้าของบล็อกกำหนดลงไปในตอนที่ประกาศ MyPagerAdapter จะใช้เป็น getSupportFragment เพราะว่าเจ้าของบล็อกใช้ FragmentActivity ที่เป็นของ Android Support v4 นั่นเองจากนั้นก็ให้ลองรันทดสอบดูโดยปาดหน้าจอซ้ายขวาไปมาก็จะเห็นว่า View Pager จะแสดง Fragment ตามที่กำหนดไว้ใน Adapter
ลองควบคุม Pager ผ่าน Activity
นอกจากการเลื่อนไปมาแล้ว View Pager ยังสามารถสั่งผ่านคำสั่งได้ด้วยว่าจะให้เลื่อนไปยัง Fragment ตัวไหน ด้วยคำสั่ง
MyPageAdapter adapter = new MyPageAdapter(getSupportFragmentManager());
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
...
pager.setCurrentItem(position);
โดยที่ position คือ Integer ที่จะกำหนดว่าจะให้แสดง Fragment ตัวที่เท่าไร เริ่มนับจาก 0 เป็น Fragment ตัวแรกสุดที่หน้า Layout ของ MainActivity จะวาง Button ลงไปสองตัว แล้วเพิ่ม Margin ให้กับ View Pager เล็กน้อย จะได้เห็นขอบเขตของ View Pager (ในตัวอย่างนี้กำหนดไว้เป็นสีขาว)
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"
android:background="#f2f2f2"
tools:context="${relativePackage}.${activityClass}" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/layout_menu"
android:layout_margin="30dp"
android:background="#ffffff" />
<LinearLayout
android:id="@+id/layout_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal" >
<Button
android:id="@+id/btn_prev"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Prev" />
<Button
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next" />
</LinearLayout>
</RelativeLayout>
โดยจะทำ Button ให้เป็นปุ่มกดเพื่อเปลี่ยน Fragment ที่แสดงอยู่ใน View Pager นั่นเอง จากนั้นก็ประกาศ Button ใน MainActivity.java ให้เรียบร้อยซะ
MainActivity.java
package app.akexorcist.fragmentsimple;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends FragmentActivity {
MyPageAdapter adapter;
ViewPager pager;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
adapter = new MyPageAdapter(getSupportFragmentManager());
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
Button btn_next = (Button)findViewById(R.id.btn_next);
btn_next.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
...
}
});
Button btn_prev = (Button)findViewById(R.id.btn_prev);
btn_prev.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
...
}
});
}
}
โดยหลักการคือสมมติว่า View Pager อยู่ที่หน้าแรกสุด (Position 0) เมื่อกดปุ่ม Next ก็จะสั่งให้เลื่อนไปที่หน้าถัดไป (Position 1) เมื่อกดอีกครั้งก็จะเลื่อนไปหน้าสุดท้าย (Position 2) และเมื่อกดปุ่ม Prev ก็จะเป็นการย้อนกลับมาเรื่อยๆจนถึงหน้าแรกสุดเหมือนเดิมดังนั้นสิ่งที่ควรรู้คืออะไร?
ควรรู้ว่า ณ ตอนนั้น View Pager แสดงอยู่ที่หน้าเท่าไร
เพราะถ้าไม่รู้ว่ากำลังแสดงหน้าไหนอยู่ ก็ไม่รู้ว่าหน้าถัดไปควรจะเป็นหน้าอะไรนั่นเอง ซึ่ง View Pager ก็มีคำสั่งดังกล่าวไว้ให้อยู่แล้ว
int current_position= pager.getCurrentItem();
ดังนั้นการประยุกต์ใช้กับ Button ทั้ง Next และ Prev ก็จะง่ายขึ้นทันตาเห็น เพราะว่าเมื่อกดปุ่ม Next ก็จะให้บวกเข้าไปอีก 1 นั่นเองint current_position = pager.getCurrentItem();
int next_position = current_position + 1;
pager.setCurrentItem(next_position );
หรือจะพิมพ์สั้นๆแบบนี้ก็ได้pager.setCurrentItem(pager.getCurrentItem() + 1);
ดังนั้นสำหรับ Prev ก็เดากันได้ไม่ยากเนอะ
pager.setCurrentItem(pager.getCurrentItem() - 1);
ถ้าสมมติว่า current_position มีค่าเป็น 0 แล้วไปกดปุ่ม Prev ซ้ำมันก็กลายเป็น -1 สิ แล้วแบบนี้คำสั่งจะไม่เกิด Exception ขึ้นหรอ?
ข้อดีของคำสั่ง setCurrentItem ก็คือจะไม่มีปัญหา OutOfBoundException เพราะว่าถ้าค่าต่ำกว่า 0 ลงไป View Pager ก็จะเลือกไปที่หน้าแรกสุด (Position 0) แทน และถ้าสมมติว่า View Pager มี 3 หน้า แต่ดันไปกำหนด Position เป็น 20 ซึ่งมีค่าเกินกำหนด View Pager ก็จะเลือกไปที่หน้าสุดท้ายเท่าที่กำหนดไว้ใน Adapter แทน (Position 2)
ดังนั้น MainActivity ที่เพิ่ม Button เข้าไป 2 ตัวก็จะได้ออกมาเป็นดังนี้
MainActivity.java
package app.akexorcist.fragmentsimple;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends FragmentActivity {
MyPageAdapter adapter;
ViewPager pager;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
adapter = new MyPageAdapter(getSupportFragmentManager());
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
Button btn_next = (Button)findViewById(R.id.btn_next);
btn_next.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
pager.setCurrentItem(pager.getCurrentItem() + 1);
}
});
Button btn_prev = (Button)findViewById(R.id.btn_prev);
btn_prev.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
pager.setCurrentItem(pager.getCurrentItem() - 1);
}
});
}
}
เมื่อเสร็จแล้วก็ให้รันทดสอบดู จะสามารถกดปุ่ม Next หรือ Prev เพื่อเลื่อน Fragment ไปมาได้ หรือจะปาดนิ้วไปมาบน View Pager ก็ได้เช่นกัน
แต่ทว่าการกำหนด Fragment ใน Adapter ที่ใช้อยู่ตอนนี้จะมีข้อจำกัดอยู่อย่างหนึ่ง นั่นก็คือไม่สามารถดึง Fragment ที่แสดงอยู่บน View Pager เพื่อเรียกใช้คำสั่งบางอย่างได้
Fragment fragment = pager.getItem(0);
OneFragment oneFragment = (OneFragment)fragment;
oneFragment.method();
นั่นก็เพราะว่าคำสั่ง getItem ที่ใช้ดึง Fragment เจ้าของบล็อกได้ Return Fragment ด้วยการสร้าง Instance ขึ้นมาใหม่ เช่น
return new Fragment;
ดังนั้น Fragment ที่ได้ก็จะเป็นคนละอันกับที่แสดงอยู่บน View Pager ดังนั้นต่อให้เรียก Method ใดๆบน Fragment ตัวนั้นๆก็จะได้เป็น Null ทันทีถ้า View Pager ของผู้ที่หลงเข้ามาอ่านเป็นประเภท Standalone คือ ทำงานได้ด้วยตัวเอง โดยไม่มีการส่งข้อมูลระหว่าง Activity หรือ Fragment ตัวอื่นๆ ก็อาจจะไม่มีปัญหาอะไร แต่เอาเข้าจริงเจ้าของบล็อกก็ไม่แนะนำให้เมินเฉยปัญหานี้ไป และนอกจากนี้การสร้าง Fragment ด้วย Constructor ก็ไม่ใช่วิธีที่ถูกต้องด้วย ดังนั้น View Pager จึงไม่อาจจะจบลงเพียงแค่นี้ เพราะงั้นขอให้ติดตามอ่านกันต่อที่บทความตอนที่ 2 นะคร้าบบบบบบบ [Android Code] Let's Fragment - มาทำ View Pager กันเถิดพี่น้อง~ [ตอนที่ 2]
โดนหลอกให้พิมพ์ตาม แต่ใช้งานจริงไม่ได้อีกแล้ววววววว
บทความที่เกี่ยวข้อง
• Fragment Principle - มารู้จักกับ Fragment กันเถอะ~
• Let's Fragment - เริ่มต้นง่ายๆกับ Fragment แบบพื้นฐาน
• Let's Fragment - รู้จักกับ FragmentTransaction สำหรับการแสดง Fragment [ตอนที่ 2]
• Let's Fragment - มาทำ View Pager กันเถิดพี่น้อง~ [ตอนที่ 1]
• Let's Fragment - มาทำ View Pager กันเถิดพี่น้อง~ [ตอนที่ 2]