Print
Details: Category: บทความแอนดรอยด์ | Published: 30 May 2018 | Hits: 6919

โจทย์ เป็นอย่างนี่ครับ มาสเตอร์ มี Fragment 3 ตัวคือ TabAFragment, TabBFragment และ TabCFragment เราต้องการสลับไปมาเป็น BaseFragment ที่อยู่บน MainActivity สามารถทำ สไลด์ เลื่อนแนวขวางไปมาได้ สามารถโหลด Source Code ไปทดสอบได้ที่ https://github.com/masterUNG/TestTabLayout งั้นเรามาเร่ิมกัน

 

สร้างโปรเจ็คแอนดรอยด์ เปล่าๆ ขั้นมาก่อนเลยครับ

สร้าง Layout Resource File 

จะได้แบบนี่ มาสเตอร์ จะไป ปลด ActionBar ออก

ไปที่ style.xml มาสเตอร์ จะเปลี่ยน Theme

เราจะใช้ No ActionBar ครับ

ให้ กด Tab นะ เพราะ คื่อการแทนที่ ถ้า Enter จะเป็นการแทรก

เห็นไหม ? ไม่มี Actonbar ละ

มาสเตอร์ เปิด Project Structor เพื่อติดตััง Library

Library decency

เลือก com.android.support:design:27.1.1 (เวอร์ชันไม่ตรงไม่เป็นไร ? นะ)

ไปเช็คว่าเราติดตั้ง Library สำเร็จหรือเปล่า ? ไปที่ build.gradle

 

จะเห็น Library com.android.support:design ถือว่า โอเค

 

 ที่ fragment_base.xml มาสเตอร์ เพิ่ม เทค TabLayout (ถ้าไม่ติดตั่ง Library ก่อนจะมองไม่เห็น คำสั่งนี่ครับ)

 เดิมโค้ดเข้าไปอย่างนี่ครับ

ต่อไปก็ ViewPager

ได้มาละ

ต่อไป มาสเตอร์ สร้าง Class สำหรับ ทำ Fragment

มาสเตอร์ ได้คลาสเปล่า ? ของ BaseFragment มาละ

มาสเตอร์​ Override  เมธอด onCreateView และ สร้าง View

ต่อไปสร้างคลาสหลัก onActivity

 

มาที่ Layout ของ Activity

มาสเตอร์ ลบ TextView และ แทนที่ด้วย FramLayout

กลับมาที่ MainActivity

มาสเตอร์ จะ Add Fragment ไปที่ Fram Layout

 

 

กลับมาที่ คลาส BaseFragment มาสเตอร์ ประกาศตัวแปร สำหรับ TabLayout

และ ViewPager

มาสเตอร์ สร้าง เมธอด createTabLayout แบบนี้

ลองทดสอบโค้ดจะได้แบบนี้

 สร้าง Adapter

 

ได้ คลาสเปล่า? มาทำ Adapter

ประกาศตัวแปรแบบนี้

สร้าง Constructor

Extends FramentStatePagerAdapter

Implement Method

ตัวแอนดรอยด์ จะขอ Override Method สองตัวนี้

 

เมธอด getCount() จะทำหน้าที่กำหนดจำนวนของ Tab

ส่วนเมธอด getItem() จะทำ Switch สำหรับดักค่า Position

อ้อ อย่างลืมสร้าง Fragment นะครับ (ใครสร้างไม่เป็นมาเรียน แอนดอยด์ สำหรรับผู้เริ่มต้นกับ มาสเตอร์ เลย) 

กลับมาที่ BaseFragment 

ลองทดสอบโค้ดเราจะได้แบบนี่ครับ