ในตอนนี้คุณมีการติดตั้งใช้งาน TabHelper
และ CompatTab
อยู่ 2 รูปแบบ โดยแบ่งเป็น 2 แบบสำหรับ Android 3.0 เป็นต้นไป และอีกแบบหนึ่งสำหรับแพลตฟอร์มเวอร์ชันเก่า ก็ถึงเวลาดำเนินการอย่างใดอย่างหนึ่งกับการติดตั้งใช้งานเหล่านี้ บทเรียนนี้จะกล่าวถึงการสร้างตรรกะสำหรับการสลับระหว่างการติดตั้งใช้งานเหล่านี้ การสร้างเลย์เอาต์ที่รับรู้เวอร์ชัน และสุดท้ายการใช้คอมโพเนนต์ UI ที่เข้ากันได้แบบย้อนหลัง
เพิ่มตรรกะการสลับอุปกรณ์
คลาส TabHelper
จะทำหน้าที่เป็นโรงงานในการสร้างอินสแตนซ์ TabHelper
และ CompatTab
ที่เหมาะสมกับเวอร์ชัน โดยอิงตามเวอร์ชันแพลตฟอร์มของอุปกรณ์ปัจจุบัน ดังนี้
Kotlin
sealed class TabHelper(protected val mActivity: FragmentActivity, protected val tag: String) { abstract fun setUp() abstract fun addTab(tab: CompatTab) // Usage is tabHelper.newTab("tag") fun newTab(tag: String): CompatTab = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { CompatTabHoneycomb(mActivity, tag) } else { CompatTabEclair(mActivity, tag) } companion object { // Usage is TabHelper.createInstance(activity) fun createInstance(activity: FragmentActivity): TabHelper = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { TabHelperHoneycomb(activity) } else { TabHelperEclair(activity) } } }
Java
public abstract class TabHelper { ... // Usage is TabHelper.createInstance(activity) public static TabHelper createInstance(FragmentActivity activity) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { return new TabHelperHoneycomb(activity); } else { return new TabHelperEclair(activity); } } // Usage is tabHelper.newTab("tag") public CompatTab newTab(String tag) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { return new CompatTabHoneycomb(mActivity, tag); } else { return new CompatTabEclair(mActivity, tag); } } ... }
สร้างเลย์เอาต์กิจกรรมที่รับรู้เวอร์ชัน
ขั้นตอนถัดไปคือการจัดเตรียมเลย์เอาต์สำหรับกิจกรรมที่สามารถรองรับการใช้งานทั้ง 2 แท็บ สำหรับการติดตั้งใช้งานเก่า (TabHelperEclair
) คุณต้องตรวจสอบว่าเลย์เอาต์กิจกรรมมี TabWidget
และ TabHost
รวมถึงคอนเทนเนอร์สำหรับเนื้อหาแท็บ
res/layout/main.xml:
<!-- This layout is for API level 5-10 only. --> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp"> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> </TabHost>
ในการใช้งาน TabHelperHoneycomb
คุณจะต้องมี FrameLayout
เพื่อใช้เก็บเนื้อหาแท็บ เนื่องจากตัวบ่งชี้แท็บมาจาก ActionBar
:
res/layout-v11/main.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" />
ระหว่างรันไทม์ Android จะตัดสินใจว่าจะเพิ่มเลย์เอาต์ main.xml
เวอร์ชันใด โดยขึ้นอยู่กับเวอร์ชันของแพลตฟอร์ม นี่คือตรรกะเดียวกันกับที่แสดงในส่วนก่อนหน้าเพื่อระบุว่าควรใช้การใช้งาน TabHelper
ใด
ใช้ TabHelper ในกิจกรรม
ในเมธอด onCreate()
ของกิจกรรม คุณสามารถรับออบเจ็กต์ TabHelper
และเพิ่มแท็บด้วยโค้ดต่อไปนี้
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { ... setContentView(R.layout.main) TabHelper.createInstance(this).apply { setUp() newTab("photos") .setText(R.string.tab_photos) .also { photosTab -> addTab(photosTab) } newTab("videos") .setText(R.string.tab_videos) .also { videosTab -> addTab(videosTab) } } }
Java
@Override public void onCreate(Bundle savedInstanceState) { setContentView(R.layout.main); TabHelper tabHelper = TabHelper.createInstance(this); tabHelper.setUp(); CompatTab photosTab = tabHelper .newTab("photos") .setText(R.string.tab_photos); tabHelper.addTab(photosTab); CompatTab videosTab = tabHelper .newTab("videos") .setText(R.string.tab_videos); tabHelper.addTab(videosTab); }
เมื่อเรียกใช้แอปพลิเคชัน โค้ดนี้จะเพิ่มเลย์เอาต์กิจกรรมที่ถูกต้องและสร้างอินสแตนซ์ TabHelperHoneycomb
หรือออบเจ็กต์ TabHelperEclair
คลาสที่เป็นรูปธรรมที่ใช้จริงนั้นไม่ชัดเจนต่อกิจกรรม เนื่องจากมีอินเทอร์เฟซ TabHelper
ร่วมกัน
ด้านล่างนี้คือภาพหน้าจอ 2 ภาพของการใช้งานนี้ที่ทำงานบนอุปกรณ์ Android 2.3 และ Android 4.0
![ตัวอย่างภาพหน้าจอของแท็บที่ทำงานในอุปกรณ์ Android 2.3 (ใช้ TabHelperEclair)](https://developer.android.google.cn/static/images/training/backward-compatible-ui-gb.png?authuser=7&hl=th)
![ตัวอย่างภาพหน้าจอของแท็บที่ทำงานในอุปกรณ์ Android 4.0 (ใช้ TabHelperHoneycomb)](https://developer.android.google.cn/static/images/training/backward-compatible-ui-ics.png?authuser=7&hl=th)
รูปที่ 1 ตัวอย่างภาพหน้าจอของแท็บที่เข้ากันได้แบบย้อนหลังซึ่งทำงานบนอุปกรณ์ Android 2.3 (ใช้ TabHelperEclair
) และอุปกรณ์ Android 4.0 (ใช้ TabHelperHoneycomb
)